CSSプロパティ｜ margin マージン [ホームページ制作の装飾プロパティ]

margin: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「margin」についてのご説明です。

ホームページ制作・作成において、margin（マージン）は、ページ内の対象要素の周辺四辺の余白（マージン）をまとめて指定します。padding（パディング）が内余白なのに対して、margin（マージン）は、要素の外側の余白を指定するCSSプロパティです。

margin 周辺の余白（マージン）指定（四辺）

marginは、ホームページ中の要素の周辺（上下左右）の余白（マージン）をまとめて（四辺）指定します。このmargin（マージン）は、要素の外側に対して余白を指定するため、要素の内側に余白を指定する場合はpaddingで指定します。

margin　読み方　「マージン」

四辺（上下左右）を異なるマージン幅にする場合には、スペースで区切って複数の値を指定（負の値指定可能）。

• 値1つ　四辺（上下左右）
• 値2つ　上下・左右
• 値3つ　上・左右・下
• 値4つ　上・右・下・左

ショートハンドによる効率的な余白管理と複数方向の設計ルール

ホームページ（ウェブサイト）を構築する際、要素の周囲に適切な外側余白を確保することは、デザインの美しさだけでなく、情報の区切りを明確にしてユーザーの視線誘導をスムーズにするために欠かせません。上下左右の余白を個別に指定することもできますが、一括指定プロパティである「margin」を活用することで、スタイルシート（CSS）の記述量を大幅に削減し、保守性の高いホームページ制作を実現できます。

記述する値の個数による挙動の変化

marginプロパティの最大の特徴は、スペースで区切って記述する値の個数によって、上下左右への適用ルールが自動的に変化する点にあります。

・値が1つの場合（例：margin: 20px;）
上下左右の4方向すべてに同じ20pxの余白が適用されます。

・値が2つの場合（例：margin: 15px 30px;）
1つ目の値が「上下」、2つ目の値が「左右」に適用されます。パソコンの大画面モニターなどで、左右に広い余白を持たせつつ上下をスマートにまとめたい場合に便利です。

・値が3つの場合（例：margin: 10px auto 20px;）
1つ目が「上」、2つ目が「左右」、3つ目が「下」に適用されます。ヘッダーや特定のコンテナを中央揃え（auto）にしつつ、上下で異なる余白を引きたい場面でよく使われます。

・値が4つの場合（例：margin: 10px 20px 30px 40px;）
「上」「右」「下」「左」の順に、時計回りでそれぞれの余白が個別に適用されます。

このように、1行のコードで四方の余白を自在にコントロールできるため、より専門的には、コードの可読性を高めて将来的なホームページの更新・修正コストを抑えるために、このショートハンド（一括指定）をベースに設計を行っていきます。

ボックスモデルの理解と意図しないレイアウトシフトの防止

marginプロパティを正しく扱うためには、CSSの基本概念である「ボックスモデル」の理解が重要です。marginは要素の「枠線の外側」に作られる余白であるため、内側余白であるpaddingや、境界線であるborderとは異なり、要素自身の背景色や背景画像は適用されません。親要素や隣接する要素との「距離」を離すためだけに機能します。

また、縦並びのブロック要素間で発生する「マージンの相殺」という仕様にも注意が必要です。上から下へとコンテンツが流れる事業用ホームページでは、複雑なマージン相殺による表示崩れを防ぐため、全体を一括指定（margin）で整えつつ、微調整が必要な部分だけ「margin-bottom」などの個別プロパティで上書きしていく手法が推奨されます。あらゆる画面サイズでレイアウトの堅牢性を保ち、訪問者にストレスを与えないホームページ（ウェブサイト）を構築していくことが、Web集客の成果を最大化させることへと繋がります。

margin: ;

margin系プロパティ

以下のmargin系プロパティで、要素の上下左右に対して個別に余白を指定することもできます。

• margin-top　上側の余白（マージン）指定
• margin-bottom　下側の余白（マージン）指定
• margin-left　左側の余白（マージン）指定
• margin-right　右側の余白（マージン）指定

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページ制作・Webデザインの1ポイント

マージンの設定は、Webデザインを考える上でレイアウトの調整などに関して重要な設定項目です。特にブロック要素の左右の外余白の調整がうまく言っていない場合は、レイアウト崩れの原因になります。モバイルフレンドリー対応としてレスポンシブ化する際も、モバイルデバイスに合わせた要素幅やマージンの設定を注意して設定する必要があります。

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ