詰め CSS
お題目
特定領域での背景画像
目標
HTML と CSS の目標
- HTML として見て，へんなマークアップにならない
- 画面のレイアウトの情報は CSS に分離
- div 要素の意味付けになるように class アトリビュート値を定義
レイアウトの目標
- ナビゲーションバーなどの特定領域だけに背景画像を貼付ける．
- 画像は横方向に繰り返すが，縦方向には繰り返さない．
- ブラウザのウィンドウをリサイズした時に，ナビゲーションバーの大きさがかわっても追従できる．
解説
CSS を使えば，特定のブロック要素に背景画像を指定できます．
ページの上の部分にナビゲーションバー(web サイト内を動くためのリンクの集合)があるとして，そこだけに背景を置くとか．
ページの上に背景画像を置こうとすると，ウィンドウをリサイズされたり，想定していたフォントサイズと異なるサイズのフォントがユーザによって指定されていたりすると，レイアウトがくずれちゃいます．
そういう時は，背景を置きたい部分をブロック要素としてして定義して，そこに背景画像を指定してはどうでしょう．縦長の画像を用意し，ブロック要素に下側揃えで配置し，上側ははみ出すようにしておきます．そうすれば表示領域が想定とちょっと変わっても追従できます．
CSS の例示
html,
body {
background-color: white;
color: black;
margin: 0;
padding: 0;
}
div.header {
background-color: white;
color: black;
background-image: url(http://onohiroki.cycling.jp/image/png/bg-header-aqua.png);
background-repeat: repeat-x;
background-position: bottom;
margin: 0;
padding: 20px;
}
使用する画像は横 240 ピクセル 縦 320 ピクセルです．縦はこのくらいあったほうが良いでしょう．あまり小さい画像を沢山並べるよりも，ほどほどの大きさの画像を並べるほうが，コンピュータのメモリ使用量が少ないのではないかしらんという話があります．
細かい解説は，ここではしません．どこかの CSS リファレンスを参照してください．
HTML の例示
<body> <div class="header"> <p class="navi"><a href="./" id="top">おのひろきおんらいん welcome</a> | <a href="seek.html">検索</a> | <a href="menu.html" accesskey="0" title="もくじのページ">もくじ</a> |</p> </div> <div class="main-contents"> <h1>詰め CSS (スタイルシート具体例)</h1> <p>例をしめしましょ．</p> </div> </body>
Netscape 6.2 のレンダリング例(キャプチャー画像)
