CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmarginプロパティで要素の周囲にマージン（余白）を設定する方法

CSSのmarginプロパティは、選択した要素の境界線（ボーダー）の外側にマージン領域（余白）を設定するために使用されます。marginプロパティは、margin-top・margin-right・margin-bottom・margin-leftという4つの個別プロパティをまとめて指定できるショートハンド（一括指定）プロパティです。

指定する値の数によって適用される方向が変わり、1つなら全方向、2つなら「上下／左右」、4つなら「上・右・下・左」（時計回り）に対応します。

構文

CSSのmarginプロパティの基本構文は以下のとおりです。

Selector {
   margin: /*値*/
}

それでは、実際のコード例でmarginプロパティの使い方を見ていきましょう。

コード例1：テキスト要素にマージンを設定する

<!DOCTYPE html>
<html>
<head>
<style>
body * {
   display: flex;
   float: left;
   margin: 10px 15px;
   border: thin solid;
   text-align: center;
   width: 40%;
   border-radius: 5%;
   box-shadow: 0 0 4px 1px grey;
}
p {
   font-family: "Sim Sun", monospace;
   background-color: lightcyan;
}
div {
   font-family: Impact, cursive;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html>

表示結果

このコードを実行すると、次のような出力が得られます。各要素の上下に10px、左右に15pxのマージンが確保され、要素同士の間に適切な間隔が生まれます。

CSSのmarginプロパティで要素の周囲にマージン（余白）を設定する方法

コード例2：テーブルにパーセンテージでマージンを設定する

マージンの値にはpxなどの絶対単位だけでなく、%のような相対単位も使用できます。次の例では、テーブルに対して親要素の幅を基準としたパーセンテージでマージンを指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   margin: 5% 30%;
   border: 12px double red;
   padding: 0.5rem;
   border-radius: 30px;
}
td:nth-child(even) {
   background-color: lightblue;
}
td:nth-child(odd) {
   background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

表示結果

このコードを実行すると、次のような出力が得られます。テーブルの上下に5%、左右に30%のマージンが適用され、画面中央寄りに配置されていることがわかります。

CSSのmarginプロパティで要素の周囲にマージン（余白）を設定する方法

まとめ

marginプロパティを使うことで、要素の外側の余白を簡単に制御できます。レイアウトの調整や要素間のスペース確保において基本となるプロパティなので、単位ごとの挙動や値の数による適用方向の違いをしっかり理解しておきましょう。

  1. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit

  2. CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

    CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。基本構文background-image: linear-gradient(角度, カラー1, カラー2);角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。0deg：下から上へ（to topと同じ）90deg：左から右へ（to rightと同じ）180deg：上から下へ（to bottomと同じ・初期値）-90deg：右から左へ（to leftと同じ）サンプルコード以下は、CSSで角度を使って線形グラデーシ