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

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

デモのキャプチャ

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%;
}

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

CSS

body {
    overflow-x: hidden;
}

実装したデモは、下記のようになります。
デモでは左のみ拡張、右のみ拡張、も用意しました。

デモのキャプチャ

デモページ

この方法は擬似要素をサポートする次のブラウザでうまく機能します。

  • Firefox3.5+
  • Chrome
  • Safari4+
  • Opera6+
  • IE8

擬似要素の各ブラウザの詳しいサポート状況は、下記ページを参照ください。

sponsors

top of page

©2018 coliss