HTML 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

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system