BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

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の互換モードでもブロック要素を中央寄せすることができます。

(*1)
表の縦列を指定するcol要素には、セル内データの横方向をスタイルシートで指定することができません。しかし、表のデータの横方向を揃えることは視覚的に意味を持つことから、align属性の指定が認められています。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。