私もこの余白には大変苦労しました…(汗
特に一番気に入っているテーマTwentyElevenは、余白が大変多い…(汗 最初は本当に全く分からず、デフォルトのまま使用していました。
やっぱり多くの方が、この余白をなんとかしたいとお考えでしょう。その余白を制御しているのが、
padding margin
です。これは、本当に厄介でした…。分かってしまえばどうと言うことはありませんが、とにかくこれらがどんな意味をもっているのか?それを理解する必要があります。
色々なサイトやブログで、この2つについては書かれています。それくらい重要であり、なおかつ理解しずらいところでもあるのでしょう。
この２つの厄介なヤツらを理解するのには、理論よりも体感です。私がハッ!!っと気がついたのは、コチラのサイトを見てからです。
こちらのサイトでは、CSS3を体感的に視覚的に理解出来る様になっていると思います。角の丸み、グラデーション、そして’padding’これらが、どんなモノなのか?ぜひ使ってみて下さい。
これを見ると、’BOX’と言う概念が視覚的に分かるかと思います。’padding’の値がどの様に作用するのかを感覚的に理解する事が出来ます。
残念ながら’margin’については触れていませんが、イメージとしては’padding’の外側にもう一枠追加したのが’margin’と思って頂いてOKかと思います。
細かく言えば、’padding’は表示されうる範囲で’margin’は表示範囲外のBOX要素って言うことになります。(分からなければスルーでww)
ですから、スタイルシート上に’margin’が指定されていたら、その値を’0’にすると、大枠の余白が取り除かれます。
その上で必要な分だけ余白を追加すると言った方法が一番簡単かと思われます。
チョッと初心者さんには、分かりにくい記事になってしまいましたね…(汗
しかし、この’margin’’padding’’border’の関係が分かってくると、スタイルシートは怖くありません。位置の補正や余白の調整なども簡単に行う事が出来る様になります。
上記の文字をそのまま検索しても良いですし、実際にスタイルシートを編集してみても良いでしょう。ダンダンと理解が深まっていくハズです。
例えば、テーマTwentyElevenのヘッダー部分のスタイルシートを見てみましょう。
/* =Header
----------------------------------------------- */
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
#branding img {
height: auto;
display: block;
width: 100%;
}ご覧の様にサイトタイトル部分には上部に3行半程の’padding’要素が指定してあります。また、キャッチフレーズ部分(サイトディスクリプション)にも同じく3行半程の’margin’要素が指定してあるのがお分かり頂けるかと思います。
これが、あの多くの余白部分を作ってしまっているんですね。だって、3行半ですよ?ものすごい余白ですよね(笑
ですから、まずはこの値を’0’にしてみるとどんな表示になるのか試してみると面白いと思います。結構左上に凝縮された感じになると思います。
また、各数値の指定については、コチラのサイト(記事)が大変参考になると思いますので、ぜひ覗いてみて下さい。
メチャメチャ分かりやすいと思いますよ。同時に’margin’や’border’にも触れていますので、良くお読みになってみて下さい。
チョッと長くなりましたが、余白について触れてみました☆
