レイアウト例

このサイトで使っている工夫

皆さまのリクエストに応えるべく，以下の例を盛り込みました．詳細は，Webページのソース（htmlファイル）とCSSファイルをご覧ください．

レイアウトの工夫

CSSを使って，ページ上部にヘッダ，左側にメニュー（目次），ページ下部にフッタを配置．
ヘッダ部のメニューはページ幅が狭くなれば折り返す．
ページ全体も，ページ幅が狭くなると，（ある範囲までは）テキストを折り返して表示する．

ナビゲーションの工夫

左上にあるロゴ（画像と画像文字）をクリックすると，どのページからでもトップページに戻る．
ヘッダ部に，サイト内を行き来するためのメニューがある．いまいるページへのリンクは消してある．
左側の目次を使って，ページ内のコンテンツにジャンプできる．（この目次はKompozerの機能で挿入してから，少しソースを編集しています．）
[目次に戻る]リンクを使って，目次に戻ることができる．

アクセシビリティの工夫

画像が見えなくても使える．
CSSを無効にしても使える．
様々なナビゲーション機能があるのでサイト内やページ内を行き来しやすい．
Web標準に沿って作成してある．

[目次に戻る]

画像の横にテキストを回り込ませる

CSSのfloatプロパティを使います．

左側の画像の右にテキストが回り込む

東京女子大学本館この画像には，CSSで「float:left」と指定してあるので，画像は左側に寄り，その反対側（つまり右側）にテキストが流し込まれます．画像に適当な値のmarginを指定すれば，画像と文字の間に間隔があきます．

CSSで「clear:both」と指定しない限り，全ての要素が右側に回り込み続けるのでご注意ください．

右側の画像の左にテキストが回り込む

東京女子大学本館この画像には，CSSで「float:right」と指定してあるので，画像は右側に寄り，その反対側（つまり左側）にテキストが流し込まれます．

回り込みを解除するのを忘れないように！

[目次に戻る]

レイアウトテーブル

CSSを使わなくてもテーブル要素を使ってレイアウトすることもできます．以下のような場合，レイアウトテーブルを使えば簡単に画像と文章をそろえて表示できますね．

画像を左側に表示して，真中に何かの文章を書く．あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお．

この表は3行3列なので，このセルが余ってしまった．3行目に示すようにセルを結合することもできます．

画像を真中に表示して，画像の左側と右側の両方に文章を書くこともできます．

このテーブルは枠線を表示せず，セル間隔を少し空けるようにスタイルシートで設定してあります．

<table width="100%" border="0" cellspacing="10">
<tr>
<td style="text-align:center"><img ... /></td> <td>画像を左側に表示</td> <td>この表は3行3列</td>
</tr>
<tr>
<td>画像を真中に表示</td> <td style="text-align:center"><img ... /></td> <td>画像を真中に表示</td>
</tr>
<tr>
<td colspan="2">このテーブルは...</td> <td style="text-align:center"><img ... /></td>
</tr>
</table>

レイアウト目的のテーブルを使うときは，th要素やcaption要素を使ってはいけません．table要素の中に，行を表すtr要素とセルを表すtd要素だけを使います．

[目次に戻る]

センタリングあれこれ

センタリングするときは text-align;center というCSSのルールが使えますが，このルールはブロックレベルの要素にしか適用できません．なので，（インライン要素である）画像をセンタリングしたいときは，下記の規則をCSSに作成して，画像を囲むp要素に適用します．すると，（ブロック要素である）p要素の中にある（インライン要素の）img要素がp要素の真中に表示されます．

.center {
	text-align: center;
}

なべさんの似顔絵

テーブルをセンタリングしたいときは，下記のようにします．つまり，CSSで margin-left:auto; と margin-right:auto; と指定することで，左右マージンが同じ長さに自動調整され，ブロック要素であるテーブルが真中に表示されるわけです．

Triathlonの種目と距離
種目	距離（Ironmanの場合）	距離（オリンピックの場合）
Swim	3.86km	1.5km
Bike	180km	40km
Run	42.195km	10km

ただし，皆さんは不必要にセンタリングしすぎだと思います．教科書やメジャーなWebサイトでは，センタリング表示は一部にしか使わないです．センタリングするとかわいく思えるのは，僕は勘違いだと思います．

[目次に戻る]

背景画像

皆さんのWebページを見ていると，背景画像をページ全体に貼っている場合が多いですが，文字色とのコントラストに気をつけてください．たとえば下記の場合，なんて書いてあるか読めますか？

黄色い背景に白い文字を書くと，僕には読めません．これは極端な例だけれどね．

[目次に戻る]