TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / ボックスのセンタリング
ボックスのセンタリング


スタイルシートの指定だけで、ボックスをセンターに配置してみます。

※IEとNNでは指定方法が異なります。
※ここで使用しているスタイルシートについての詳細は、「ボックス」「テキスト・フォント」カテゴリーをご覧ください。


 IE用の指定方法
IEの場合は、親要素に text-align: center を指定することで、その中に入るボックスをセンターに配置することができます。

DIVタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.oya { /* 親要素に対する指定 */
text-align: center; /* センタリング */
}

.box1 { /* ボックスの指定 */
width: 300px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV CLASS="oya">

<DIV CLASS="box1">IE用の指定</DIV>

</DIV>

・これをブラウザで見ると次のように表示されます

IE用の指定

上記のように、このボックスはセンターに配置されます(IEで見た場合)。


ただしこの場合、親要素に指定した text-align: center が、ボックス内のテキストにまで適用されてしまいます。ボックス内のテキストを左寄せにしたい場合は、次の例のようにボックスに対して text-align: left を指定しておきます。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.oya { /* 親要素に対する指定 */
text-align: center; /* センタリング */
}

.box2 { /* ボックスの指定 */
text-align: left; /* 左寄せ */
width: 300px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV CLASS="oya">

<DIV CLASS="box2">IE用の指定</DIV>

</DIV>

・これをブラウザで見ると次のように表示されます

IE用の指定



 NN用の指定方法
NNの場合は、ボックスの横幅を指定した上で、左右のマージンを auto に指定します。

DIVタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box3 { /* ボックスの指定 */
margin-left: auto; /* 左側のマージン */
margin-right: auto; /* 右側のマージン */
width: 300px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV CLASS="box3">NN用の指定</DIV>

・これをブラウザで見ると次のように表示されます

NN用の指定

上記のように、このボックスはセンターに配置されます(NNで見た場合)。


 両方とも指定する場合
IE、NN、どちらのブラウザでもセンタリングされるようにするには、上記の2つを同時に指定します。

DIVタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.oya { /* 親要素に対する指定 */
text-align: center; /* センタリング */
}

.box4 { /* ボックスの指定 */
margin-left: auto; /* 左側のマージン */
margin-right: auto; /* 右側のマージン */
text-align: left; /* 左寄せ */
width: 300px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV CLASS="oya">

<DIV CLASS="box4">同時に指定</DIV>

</DIV>

・これをブラウザで見ると次のように表示されます

同時に指定


メモ
本来はNNの指定方法が正しいものとなります。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲