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

2010年2月4日 (木)

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

カテゴリ: ウェブデザイン | コメント (0) | トラックバック (0) | |

　相変わらず私は「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 URL :

コメントはまだありません。

日	月	火	水	木	金	土
« 6月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

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

2010年2月4日 (木)