エントリー記事
centerタグ,align属性からの脱却
<center>タグやalign属性は、横方向の位置を指定します。しかしこれらの情報は、例えば音声ブラウザにとっては全く意味を為しません。
これらは、スタイルシートで指定することができます(*1)。
インライン要素の横方向の位置を指定
インライン要素の横方向の位置は、text-alignプロパティで指定することができます。ブロック要素にtext-alignを適用すると、その内部のインライン要素の横方向の位置を指定することができます。
h2{ text-align:right; }
W3Cの仕様においては、text-alignでブロック要素の横方向の位置を指定することはできないことになっています。しかし、Windows版Internet Explorerはブロック要素の横方向の位置も変更してしまいます。
開始点がバラバラで読みづらくなるため、テキストの中央寄せを嫌うユーザーは少なくありません。デフォルトの左寄せが最も見やすいとされているので、text-alignの指定は必要最低限に留めておく方が無難です。
ブロック要素の横方向の位置を指定
ブロック要素の横方向の位置は、marginプロパティで指定することができます。左右のマージンをautoに指定すると、対象となるブロック要素を中央寄せすることができます。
しかし、Windows版Internet Explorerにはスタイルシートの実装にバグがあり、互換モードでは左右のマージンをautoに指定しても中央寄せされません。代わりにtext-alignプロパティでブロック要素の横方向の位置を指定することが可能となっております。
<body>
(中央寄せしたいボックスの中身)
<div class="all"></div>
</body>
body{ text-align:center; }
#all{ margin:5px auto 10px; text-align:left; }
このように指定すると、W3Cの仕様に準拠したブラウザでもWindows版Internet Explorerの互換モードでもブロック要素を中央寄せすることができます。
【注釈】テーブルレイアウトからの脱却
<table>タグは表を形成するものであり、ページのレイアウトを目的とした使用は推奨されていません。タグの占める割合が大きいためページの表示に時間を要し、訪問者に余計なストレスを与える恐れがあります。
この問題を解決するための手法を次に挙げています。
- リスト要素
部分的なテーブルレイアウトからの脱却に役立ちます。リスト要素には順番のある箇条書き、順番のない箇条書き、定義リストの3種類があり、これらを利用することで構造的にリストであることを示すことができます。
- ブロック要素の浮動
全体的なテーブルレイアウトからの脱却に役立ちます(*1)。CSSのfloatプロパティを利用することで、通常は横方向に並べて配置することのできないブロック要素を浮動させ、並列に配置することができます(*2)。
当ブログは、非常に一般的な2カラム形式でレイアウトされています。
div#all基礎となる横幅720pxのボックスです。タイトルや他のボックスを含んでいます。
div#all{ width:720px; }div#main横幅500pxのボックスを右側に浮動させています。記事やコメントを含んでいます。
div#main{
width:500px;
float:right;
text-align:left;
}div#menu横幅185pxのボックスを左側に浮動させています。メニューを含んでいます。
div#menu{
width:185px;
float:left;
text-align:left;
}address浮動させたボックスの回りこみを解除しています。連絡先や広告を含んでいます。
address{ clear:both; }
IE6にはCSSの実装にバグがあり、ブロック要素を浮動させる際には次の点に注意する必要があります。
- 1つのボックスに、floatプロパティとmarginプロパティを同時に指定しない方が良いでしょう。例えば左方向に浮動させたボックスは、左側のマージンが2倍に増大してしまいます。
- 1つのボックスに、widthプロパティとpaddingプロパティ及びborderプロパティを同時に指定しない方が良いでしょう。互換モードで表示される場合、widthの値にpadding及びborder-widthの値を含んでしまい、その分だけ短い横幅が適用されます。他の視覚系ブラウザはW3Cの仕様に従い、widthの値を内容域のみの横幅と解釈するため、レイアウトが崩れる恐れがあります。
回避策としては、浮動させたボックスにはwidthプロパティを指定し、その内側のブロック要素にmarginプロパティ、paddingプロパティ及びborderプロパティを指定します。
ブロック要素の余白
多くの視覚系ブラウザは、デフォルト状態でブロック要素に一定の余白を適用します。例えば見出しや段落は上下に1行分の余白を伴い、リストは左に余白を取って字下げを行います。
これらは、スタイルシートでページをレイアウトする際に邪魔になることがあります。特に、順番つきリスト、順番なしリストの左側の余白には注意を払う必要があります。
マージンとパディングの両方をゼロに指定すると、リストマークが左側にはみ出します。
リストマーク左側の余白は、ブラウザによって解釈が異なります。IEやOperaではul要素またはol要素のマージンとして解釈されますが、Gecko系ブラウザ(*1)ではパディングとして解釈されます。
IEやOpera、Gecko系ブラウザのどちらでもレイアウトを崩さないために、はじめに全要素の余白をゼロに指定して、その後必要に応じて適宜加える方法を推奨します。
*{ margin:0; padding:0; }(*2)
ul li{ margin-left:1em; }
ol li{ margin-left:1.5em; }