【CSS の 基本】記事の見やすさを決める marginとは!?

ひとつの記事の中で 見出し・文章・画像　など
それぞれの項目（ ブロック ）を使用すると思いますが
隣り合わせる ブロック に適度な空白を作ることによって
見やすいサイトになります。

 margin （余白）のきほん

余白は　見出しタイトルの場合 見出しの上下
記事（ 段落P ）では 記事と記事の間
画像や囲み枠の場合、隣り合わせる画像 や 記事の境界線などです。

もちろん、左右も margin は存在しますが 主に サイト全体を見やすくするためには
上下の余白のカスタマイズが重要だと考えます。

レイアウトのプロパティ

CSSに必要なプロパティを簡単にまとめてみました。
図に表すとイメージがとってもわかりやすくなりますね。^^
さまざまなカスタマイズの場面で出てくるプロパティですので
覚えておいてくださいね。

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

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

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

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

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

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

図のように、どの場面でも 隣接するブロック が存在します。

文章同士の場合、二重に余白ができるのではなくマージンは相殺（そうさい）され
大きいサイズを指定した方を優先して設定されるようになっています。

WordPressの 外観カスタマイズからでしたら
バランスをみながら調整していけるので色々試してみてください。^^

【margin】基本のCSSコード

CSSのコードは　セレクタ{プロパティ：値} で構成されています。
セレクタは変更を加えたいブロックごとに選びます。
margin-top と margin-bottom それぞれにコードを記述するパターンと
一度に記述してしまうパターンがあります。

一度に記述することでソースコードはかなりスッキリしますね。^^

見出しの上下の余白

見出しには ｈ1からｈ6 までサイズが分かれていて
それぞれに指定してあげたい場合もあるかと思いますが
すべて、または数か所 同じ指定をしたい場合、一度に記述することができます。

.post h2, .post h3, というように　,（コンマ）をつけるだけです。
それぞれに調整したい場合は個別の記述で構いませんが
HTMLやCSSではできるだけ無駄な記述も避ける方がいいので
まとめられるものはできるだけまとめて記述しましょう。

 セレクタごとの記述のしかた

囲み枠などを使用する場合、CSSで枠のスタイルを作成 しておいて
記事の作成中に HTMLコードで呼び出すことで
サイト上に枠を設定することができます。

HTMLの記述のしかたはこちら ↓
【囲み枠】 基本のきほんから の CSSとHTML

囲み枠のセレクタ  ー box ー

画像のセレクタ  ー img ー

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

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

上手く表示されない場合

WordPressの カスタマイズ画面や 直接スタイルシートに書き込む際も
記述が間違っていて上手く表示されない場合、エラーとして知らせてくれます。

上の図の場合、  ｝この囲いで閉じられていないことで
２か所がエラーになっています。

コードの記述は スペースが開いていないだけだったり、
ひらがなモードからの変換 などもエラーになったりします。

基本的なポイントは 英数半角モード になっているか？
：（コロン）；（セミコロン）が打たれているか？
｛｝で閉じられているか？
コードとコードの間にスペースが取られているか？
例えば　border: 4px solid #a7d28d;
この場合、この３つのコードの間には
半角のスペースを空けないと正確に表示されません。

焦らずに　確かめてみてくださいね。^^