コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識

文章の読みやすいWebサイトとは 文章の行間や コンテンツごとの余白が
適度な幅に設定されている記事ではないでしょうか？

文字が小さく 文章ばかりの記事は 一目見ただけで読むことに躊躇してしまいがちですよね。

記事作成の基本的な知識として 適度な余白を設定するということは
読みやすい記事作りのポイントになりますので 余白の設定 margin についてまとめてみました。

 margin （余白）のきほん

余白は「隣り合わせるブロック」に 適度な余白を作ることによって
サイト画面全体の見やすさを決める項目になります。

余白 (margin) は 見出し・文章・画像 などのコンテンツのブロックごとに設定するもので
例えば 見出しタイトルの上下・画像や囲み枠の場合、隣り合わせる画像 や 記事の境界線などです。

ひとつの文章の 行間の設定は margin (余白) ではなく line-height を使ったコード指定になります。

line-height の関連記事はこちら
CSS カスタマイズ line-height ～行間を調整する ～【 WordPress 】

レイアウトのプロパティ

余白 “margin" の設定は CSSカスタマイズを使用して設定していきます。

コンテンツのイメージとCSSに必要なプロパティを簡単にまとめてみました。

図に表すとイメージがとても わかりやすくなります。
さまざまな カスタマイズの場面で出てくるプロパティですので 覚えておいてくださいね。

content（コンテンツ）文章 や 画像などのひとつの 要素（内容）を指しています。

padding（パディング）画像や囲み枠などの内側の余白に使用します。

border（ボーダー）ラインに関する指示を出すプロパティです。

margin（マージン）外側の余白。隣接する 要素 との間隔を指定する時に使用します。

padding・border・margin は　上下左右「top  bottom  left  right」
この 4方向の指定をすることでどの位置の余白を調整したいかをコードで指定していきます。

隣接するブロックの 余白の相殺

相殺（そうさい）とは 簡単に言うと「差し引きして帳消しにすること。」で
例えば 図のように どの場面でも「隣接するブロック」 が存在します。

margin-top にも margin-bottom にも余白を設定していますが
余白は 二重に設定されるのではなく 大きいサイズを指定した方が優先 (相殺)される形になります。

marginの 基本CSSコード

CSSのコードは セレクタ{プロパティ：値} で構成されていてセレクタには
指定したいコンテンツの場所、今回の場合 " margin “のどの部分をカスタマイズするのかを指定します。

また この " margin " の指定のしかたには  top・bottom それぞれのコードを
① 個別に記述するパターンと ② 一度にまとめて記述してしまうパターンがあります。

WordPressテーマや コンテンツによって まとめての記述が可能な場合と
個別でなければ指定したコードが機能しない場合があります。

まとめての場合、上下、左右の場所が分からなくなりがちですが
CSSコードはできるだけシンプルにしておく方がいいので
まとめられるコードはできるだけ一度に記述することをお勧めします。

見出しの上下の余白

見出しの出しの余白 (プロパティ)を すべて もしくはいくつかの見出しを同じ指定にする場合、
隣り合うプロパティの間に ( , ) コンマをつけることで 一度に記述することができます。

セレクタ部分ですが私の使っているこの Luxeritas のテーマでは h2 では反映されず
この「.post 」を使用しましたが  WordPressのテーマなどによって h2 { で記述するものもあります。

囲み枠 (box) や 画像 (img) の余白

文章に関するセレクタの他に 記事内で使用するセレクタには BOX・img などがあり
囲み枠 (Box) や 画像 (img) なども文章と隣り合う場合に 余白部分が広すぎたり
狭すぎたりといったケースがありますので調整が必要になります。

それぞれのセレクタは 囲み枠  .normal-box{margin～・画像  img{margin～ といった感じです。

キャプションを付けた画像のセレクタ  ー caption ー

キャプションとは画像の下に画像についての説明分のことです。

画像自体に margin-bottom を付けていない場合、キャプションが近すぎて見にくくなることがありますので
画像の margin-top か キャプションの margin-bottom のどちらかを調整します。

反映されない場合のチェック項目

当たり前ですがコードは 一か所でも間違えると反映されませんので
初歩的な見落としがないか まずは焦らずにチェックしてみましょう。

スペースを空けるか空けないか？

テーマのバージョンによっては コードの記述に使用する：（コロン）の前後に スペースが空いている方がいい場合と
空いていない方が表示できる場合など 微妙な違いで表示されないというケースがあります。

英数半角モードになっているか？

ひらがなモードからの変換 などもエラーになったりしますので
この場合は ひらがなモードを使用してしまった部分のコードすべてを一度削除し
英数半角モードで入力し直しますとカスタマイズが反映されるようになります。

｛｝で正しく閉じられているか？

：（コロン）；（セミコロン）が打たれているか？｛｝で閉じられているか？ などです。

これらのチェックで記述間違いがない場合は 先ほどにもあった セレクタのコード名が違うといった場合です。