ショップハンター

2014.11.14

[やってみよう] css でつくる h タグの余白をカスタマイズしてみよう（応用編）

テーマ：楽天ブログの活用法(10)

カテゴリ：当ブログオリジナル

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

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

ブログ用見出しテンプレート[フラット系]

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

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

margin: 50px; ― 50 ピクセル分の余白が上下左右にできる
margin: 30pt; ― 30 ポイント分の余白が上下左右にできる
margin: 1.5em; ― 1.5 文字分の余白が上下左右にできる

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

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

のしめはないろ

◆ココ◆ ">ここにテキストを入力します</h3>

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

<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px; margin: 50px; ">ここにテキストを入力します</h3>

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

ここにテキストを入力します

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

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

ここにテキストを入力します

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

margin-top: 50px; ― 50 ピクセル分の余白が上側に設定される
margin-right: 30pt; ― 30 ポイント分の余白が右側に設定される
margin-bottom: 1.5em; ― 1.5 文字分の余白が下側に設定される
margin-left: 1pc; ― 1 パイカ分の余白が左に設定される

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

<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px; margin-top: 50px;margin-right: 30pt;margin-bottom: 1.5em;margin-left: 1pc; ">ここにテキストを入力します</h3>

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

ここにテキストを入力します

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

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

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

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

<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px; padding: 30px; ">ここにテキストを入力します</h3>

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

ここにテキストを入力します

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

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

ここにテキストを入力します

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

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

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

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

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

上 → 右 → 下 → 左　の順に、半角スペースを入れながら指定します

padding: 1em 1.5em 0.5em 2em; ― 上 1文字分、右 1.5文字分、下0.5 文字分、左 1文字分のパディングが入る

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

ここにテキストを入力します

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

ここにテキストを入力します

余白のおまけ話

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

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

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

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

<p style=" line-height: 3em; ">　
　毎年冬になるとつい保温弁当箱買っちゃうよ。
　実は昼はあまり食べないんだけどね。
　売り場の前を通っただけなのに、店を出ると保温弁当箱を手に持ってたりするんだよなあ。
　あっ、ちゃんと金払ってますから。
</p>

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

　毎年冬になるとつい保温弁当箱買っちゃうよ。　実は昼はあまり食べないんだけどね。
　売り場の前を通っただけなのに、店を出ると保温弁当箱を手に持ってたりするんだよなあ。
　あっ、ちゃんと金払ってますから。

お気に入りの記事を「いいね！」で応援しよう