不良少年 » ウェブサイト »

ケチケチ固定幅センタリング法

Atom RSS

ケチケチ固定幅センタリング法

 相変わらず私は「IE6を含むほとんどのブラウザで同じように表示できて、固定幅でセンタリングして、固定配置(fixed)ブロックも入れて、かつXHTML1.1準拠のソースコード」にこだわる、変なサイト作りを続けています。
 一昨日の雑記で書いたように、この方法はやたらと<div>要素が増殖する傾向にあり、一個でも抜くとたちどころにすべてのブロックが崩壊してします。
 とはいえ<div>や<span>のような文法的に意味のないタグを乱用するのは、プログラマとしてどうなのかと思う今日この頃。

 そんなこんなで、可能な限り現状のデザインを維持しつつ、<div>タグをケチる(減らす)ことにしてみました。

多段divの代替手段

 以前書いた「非矩形ブロックの position:fixed」では、各fixedブロックごとに三段の<div>タグをかましてました。
 一番外側のdivで「position: fixed」を指定して固定、二番目のdivで幅指定とセンタリングを行い、最後に三番目のブロックにコンテンツを入れる、という方法です。

 今回はこれを応用して、「あらゆるタグの親」である<body>タグに上記の「二番目のdiv」の代わりをさせ、fixed指定とブロック配置はそれぞれの固定ブロックで行う、という方法を試してみます。
 以下の例では880pixelsの幅固定(内コンテンツ表示エリアは800pixels)として記述しています。

全要素共通

 CSS記述ではもはや定番の技ですが、最初にブラウザ間の違いを吸収するため、全要素のマージンとパディングをクリアしておきます。
 <body>タグのセンタリング指定が他の要素に影響しないよう、配置も左揃えに統一します。

*
{
  margin: 0;
  padding: 0;
  text-align: left;
}

html

 ページ全体の背景色や背景画像は、<html>タグで指定しておきます。
 ここではあらかじめ幅880pixelsの背景画像「background.jpg」があるものとします。
 背景画像の外側は背景色で塗りつぶします。

html
{
  background: #c0c0c0 url(background.jpg) repeat-y center;
}

body

 いささかトリッキーな書き方ですが、<body>タグをページ全体を覆うブロック要素と考え、800pixesの固定幅でセンタリングし、子要素もセンタリングするよう指定します。

body
{
  width: 800px;       /* 幅指定 */
  margin: 0 auto;     /* センタリング */
  text-align: center; /* 子要素のセンタリング */
}

パラグラフ

 IE6対策。IE6はデフォルトでbody直下の<p>タグはウィンドウ幅になってしまうため、幅を抑制しておきます。

p
{
  width: 800px;
}

 このままだとfloatなどで左右にブロックを分けたときも800pixelsで表示されてしまうので、以下のようにdivブロック内の<p>タグの幅は、自動で計算するようにします。

div p
{
  width: auto;
}

fixed ブロックの左右配置は margin で!

 毎度おなじみfixedヘッダブロックの指定です。
 divをケチるため、今回は個別にヘッダブロックの各要素を「position: fixed」にします。
 以下はうちのサイトでの設定例です。

ページタイトル(<h1>タグ)の場合

 <h1>タグはXHTMLの文法上、<body>タグのすぐ下に書くべきです。
 ……が、そうするとfixed指定しても、後に書かれたブロックの下に隠れてしまいます。
 なもんで z-index を指定し、むりやり手前に持ってきます。

/* screen時のみ fixed または absolute を適用 */
@media screen
{
  h1
  {
    position: fixed!important;
    position: absolute; /* IE6対策 */
  }
}

/* 印刷時は absolute になる */
h1
{
  display: block;
  z-index: 65535;     /* 一番手前に配置 */
  position: absolute;
  top: 0px;           /* ウィンドウの上端に配置 */
  margin-left: 102px; /* 左右はleftやrightで指定すると崩れます!! */

  /* 以下は見た目の調整 (お好みで変更してください) */
  font-size: 14px;
  line-height: 20px;
  padding: 1px 4px;
  width: 688px;
  text-align: right;
  color: #e8e8e8;
  border-bottom: 1px dotted #eeeeee;
}

 ここで「おや?」と思われた方も多いでしょう。「margin-left: 102px;」の部分。
 実はposition:fixedやposition:absoluteで指定したブロックの親が<body>タグの場合、leftやrightはウィンドウ左端や右端からの距離になってしまうんです。
 これを回避するため、margin-leftでbody左端からの相対距離を指定します。こうすることで、センタリングされた状態でウィンドウ上端に固定されます。
 ちなみにtopやbottomも同じなんですが、ヘッダはそもそもウィンドウ上端固定にしてるので、ウィンドウ上端からの絶対距離でも問題ありません。

ロゴ、メニュー、その他もろもろ

 ロゴやメニューなども同様に記述します。やってることは上記と同じなので、参考までに。

/* ロゴ */
@media screen
{
  #logo
  {
    position: fixed!important;
    position: absolute;
  }
}

#logo
{
  display: block;
  position: absolute;
  top: 0;
  margin-left: 0;
  width: 100px;
  height: 150px;
  background: url(/image/logo.png) no-repeat;
}

#logo span
{
  display: none;
}

/* メニュー */
#navigator
{
  /* 省略 */
}

HTMLサンプル

 上記のCSSを使ってHTMLを書くと、以下のような感じになります。

サンプル(bodyブロックのみ)

<body>
  <h1>ケチケチ固定幅センタリング法</h1>
 
  <!-- 本文は省略 -->
 
  <!-- ロゴ -->
  <p>
    <a href="example.html" id="logo"><span>サイト名</span></a>
  </p>
 
  <!-- メニューブロック -->
  <div id="navigator">
    <!-- ここに各ページへのリンクを記述 -->
  </div>
</body>

 いやー、前回に比べて劇的に短く、かつdivブロックの数も最小限になりました。
 ……その分、CSSの記述量は三倍近く増えましたが。(笑)
 もっとも、こんだけ苦労して不要なタグを取り除いても、見た目はほとんど同じなんですけどね!(号泣)

関連記事

トラックバック

trackback 意味ブロ - ちょっと難しい言葉の意味まとめ さん - 2011年8月24日 (水) 22:49:43

widthの読み方

「widthを980pxにしてください」

えっと、ワイド?(違います

ちなみに、ワイドは「幅が広い」という意味です。
だからちょっと違う。

<widthの読み方>

HTML・CSSなど、パソコン…

コメント

comment 通りすがりの… さん - 2011年10月14日 (金) 20:27:16

bodyの横幅を決めてしまうと、lightboxがdefaultで正常に動かない。

コメント投稿フォーム

※ スパム防止の為、コメント内に2個以上のリンクがあった場合、サイト管理者 (かのう神路) が承認するまで表示されません。

ページの先頭に戻る