ショップハンター

　「css でつくる h タグ」のカスタマイズシリーズの 4 回目は、マージン（タグ外部の余白設定）とパディング（タグ内部の余白設定）の設定方法をご紹介します。

　まずは以下のページをご覧ください（クリックで別タブで開きます）。

---

1. 外側の余白（マージン）設定

　ここでは実線タイプ、一番上の「のしめはないろ」の見出しの余白をいろいろと変えてみましょう。
　一番簡単なのが、margin: の後にお好きな余白幅を指定することです。



　それでは実際に設定してみましょう。

　以下の◆ココ◆と記された部分に余白指定用の margin コードを設定します。



　それでは、先ほどの指定例をみながら値を追加してみましょう。



　カスタマイズ後の表示効果はこのようになります。



　余白が広がりましたね。
　このようにすることによって、改行キーを打たずに好きなだけ余白を広げることができます。

　たとえば、5em (5文字分)の余白を入れると、より余白がはっきりします。



　しかし、これでは上下左右に均等に余白が入ってしまうため、見た目がイマイチという方もいらっしゃるでしょう。
　そこで、部位ごとに異なる幅の余白を入れてみることにしましょう。



　上記の指定を並べて入れると、このようになります。
　それぞれの指定の区切りとしてセミコロン(;)を打つのを忘れないようにしましょう。



　こちらがカスタマイズ後の表示効果。


　
　ご覧のように、上下左右でバランスの異なる余白設定ができましたね。

---

2. 内側の余白（パディング）設定

　引き続き実線タイプ、一番上の「のしめはないろ」の見出しの内部の余白（パディング）をいろいろと変えてみましょう。
　先ほどの margin: の代わりに padding: と打って、お好きな余白幅を指定するだけです。
　簡単ですね^^。

　こちらが一番単純な padding: 設定になります。



　表示はこのようになります。


　かなりだだっ広い h3 タグ内の余白ができましたね。
　これよりはもう少し少なめの余白設定にすると見栄えがよくなるかもしれません。

　30px のパディングを 10px に変えてみます。



　いかがでしょうか？
　このように、見出し枠がつまり過ぎているような印象のときに、少しパディングを入れて余白を微調整すると見出し枠と文字のバランスがよくなりますので、必要に応じてお試しいただけると幸いです。

---

3. 余白のまとめ設定を覚えよう

　margin と padding による余白設定のやり方はバッチリご理解いただけたと思います。
　ここでは、margin/padding の一括指定の方法をご紹介します。

　これにより、コード量を大幅に削ることができますので、入力文字数制限のある楽天ブログではいろいろと出番があるかもしれません。

　覚え方は、上から時計回りです。上からスタートと覚えておけば間違いありません。

　
　
　それでは試してみましょう。
　まずはマージンです。
　margin: 50px 20px 10px 20px;



　こちらがパディング。
　padding: 1em 1.5em 0.5em 2em;

余白のおまけ話

　ブログ記事を書く際に、余白を改行コードまたは <br /> タグを駆使して調整されている方も多いと思いますが、ページ内に <br /> タグを連続して並べるのは、実は W3C が定義する HTML の記述文法に反しています。　
　また、必要以上に連続した改行が含まれているページは検索エンジンの評価を落とす（検索エンジンにヒットしにくくなる）可能性があります。

　余白設定は、css によるマージン設定を使うのが推奨されています。
　たとえば、段落の前後に余白を大きく取りたい場合は、今回の記事でご紹介した margin を使って必要な分の余白をあけます。

　また、可読性向上のために一行おきに一文字分、ないしそれ以上の余白を取りたい場合は、line-height を使うと便利です。
　その場合は、<p> タグや <div> タグなどを使うことによって、その範囲内の文字列の行間を設定します。

　たとえば、行間に 3 文字分の余白を表示させたい場合は、このように指定します。



　表示効果はこのようになります。