|
|
|
● W3C勧告html4.01に準拠して、CSSだけで、ブロック要素のセンタリング、左寄せ、右寄せ
|
※WindowsIEで、このページをご覧になる場合は、バージョン6以降でお願いします（MacIEは5.2.3）。
CSSテスト ブロック要素のセンタリング、左寄せ、右寄せ
センタリング、左寄せ、右寄せについて、html(xhtml)上でalign="center"などと書いてしまえば簡単ですが、W3C勧告html4.01において、「HTMLで視覚的整形に用いる要素や属性定義は非推奨」ということで、align=""は推奨されていません。webページのSEO（サーチエンジン最適化）は、W3C勧告準拠が強く望まれますので、align=""に替わるcssが必要になります。
cssでブロック要素のセンタリング1
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin:0 auto 0 auto;">
cssでブロック要素のセンタリング2
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin:0 auto;">
cssでブロック要素のセンタリング・インライン要素もセンタリング1
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin:0 auto 0 auto;
text-align:center;">
cssでブロック要素のセンタリング・インラインもセンタリング2（div 二重）
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin:0 auto 0 auto;">
<div style="width:100%;
text-align:center;">
cssでブロック要素の入れ子のセンタリング
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin:0 auto 0 auto;
text-align:center;">
cssでブロック要素の左寄せ
<div style="width:450px;
padding:5px;
border:1px solid #dddddd; margin-left:0;
margin-right:auto;">
cssでブロック要素の左寄せ・左マージン20px
<div style="width:450px;
padding:5px;
border:1px solid #dddddd; margin-left:20px;
margin-right:auto;">
cssでブロック要素の右寄せ
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin-left:auto;
margin-right:0;">
cssでブロック要素の右寄せ・右マージン20px
<div style="width:450px;
padding:5px;
border:1px solid #dddddd;
margin-left:auto;
margin-right:20px;">
|
※このページはxhtml1.0で書いていますが、Windows IE6の標準準拠モードに合わせるため、XML宣言を省いています。
XML宣言を省くこと（Windows IE6のドキュメント宣言バグへの対処）について解説しているコニファ・マメ知識のページ
|
