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

CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

CSSのmarginプロパティとは

CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。

値の指定ルール

marginプロパティでは、指定する値の数によって適用される方向が変わります。

  • 値が1つ：上下左右すべてに同じ値が適用される
  • 値が2つ：1つ目が「上下」、2つ目が「左右」に適用される
  • 値が3つ：1つ目が「上」、2つ目が「左右」、3つ目が「下」に適用される
  • 値が4つ：上・右・下・左の順（時計回り）で適用される

また、負の値を指定して要素を重ねて表示したり、autoを指定してブロック要素を中央寄せにしたりすることもできます。

構文

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

セレクター {
    margin: /* 値 */
}

サンプルコード1：複数の値と負のマージン

次の例では、div要素に3つの値でマージンを指定し、idが「demo」の段落には負のマージンを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 10px 50px 20px;
    padding: 1rem;
    border: dashed;
}
p {
    text-align: center;
}
#demo {
    margin-left: -80px;
    box-shadow: inset 0 0 10px brown;
}
</style>
</head>
<body>
<div></div>
<p>This is demo text.</p>
<p id="demo">Another demo text.</p>
<p>This is new demo text.</p>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

この例では、「上：10px／左右：50px／下：20px」というマージンが適用され、負の値を指定した段落は左側に移動していることが確認できます。

サンプルコード2：autoによる中央配置とリストへの応用

次の例では、ul要素にmargin: auto;を指定して中央に配置し、リスト項目ごとに異なるマージンを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    margin: auto;
    background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple);
    width: 20em;
}
li {
    margin-top: 3px;
}
li + li {
    margin-left: -20px;
}
li:last-child {
    margin-left: 75px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<ul>
<li>This is demo list item.</li>
<li>This is another list item with different style.</li>
<li>This is our third demo text with another style.
</li>
</ul>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

このように、marginプロパティを使いこなすことで、レイアウトの中央寄せや要素間の間隔調整など、柔軟なデザイン表現が可能になります。

  1. CSSディメンション（寸法）プロパティの使い方を徹底解説｜width・height・min-width・max-height

    CSSディメンション（寸法）プロパティとは？ CSSでは、width（幅）、height（高さ）、max-height（最大の高さ）、min-width（最小の幅）といったディメンションプロパティを使用することで、要素のコンテンツボックスのサイズを細かく制御できます。レイアウトの崩れを防ぎ、柔軟で見やすいWebページを作るうえで欠かせないプロパティ群です。 主な寸法関連プロパティは以下のとおりです。 width / height：要素の幅・高さを指定する基本プロパティ max-width / max-height：要素がそれ以上大きくならないよう上限値を指定 min-width / min-

  2. CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

    CSSのフォントプロパティを使うことで、Webページ上のテキストの見た目を自由にカスタマイズできます。本記事では、テキストのスタイリングに役立つ主要なフォント関連プロパティを、実際のコード例とともにわかりやすく解説します。 CSSの主要なフォントプロパティ一覧 font-family 要素に適用するフォント（書体）を指定するためのプロパティです。複数のフォント名をカンマ区切りで列挙でき、先頭から順に利用可能なものが適用されます。 font-kerning 文字間隔を均一に整え、可読性を高めるために使用するプロパティです。ただし、この機能はフォント側がカーニング情報を持っている場合にのみ有効とな