[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート

サイト構築 -CSS

Post on:2011年5月18日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。

Full Browser Width Bars
デモページ

[ad#ad-2]

バーは3つとも、ブラウザのサイズを変更してもぴったりくっついています。

ブラウザの幅を狭くしたキャプチャ

以下は各ポイントを意訳したものです。

まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。

しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。

これを実現する一つの方法は、h1要素の中にテキストのラッパーとなるdiv要素を使用します。

HTML

<h1>
   <div>Header</div>
<h1>

<p>... text ... </p>

そして、スタイルシートで、内部のテキストの幅を指定します。

CSS

h1 div, p {
   width: 50%;
   margin: 0 auto;
}

確かにこの方法で、バーの幅をブラウザいっぱいにし、テキストを読みやすい幅に設定することができます。

[ad#ad-2]

しかし、ちょっと待ってください！
このdiv要素を使った方法はセマンティックではありません。単にスタイルのために用いただけです。理想としては、こういった方法は避けるべきです。

では、セマンティックなマークアップの例を見てみましょう。

HTML

<section>
    <h2>Header</h2>
    <p>... text ... </p>
    <h2>Header</h2>
    <p>... text ... </p>
</section>

非常にシンプルなマークアップで、スタイルのための要素はありません。ヘッダ・パラグラフをsection要素で内包します。

スタイルシートではsection要素で幅を決め、それがヘッダの幅に反映されます。
そして、擬似要素（:before, :after）を使用し、バーの左側と右側を拡張します。

CSS

section {
   width: 50%;
   margin: 0 auto;
}
h2 {
   position: relative;
   background: black;
}
h2:before, h2:after {
   content: "";
   position: absolute;
   background: black;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
}
h2:before {
   right: 100%;
}
h2:after {
   left: 100%;
}

最後に、ブラウザに水平方向のスクロールバーがでることは好ましくないので、スクロールバーを隠します。