スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ CSSによるセンタリング
CSSによるセンタリング
CSSによるセンタリング 
投稿日：2006年12月26日 レベル：初心者 ソフトウェア：
ここでは、どのブラウザーでもコンテンツがセンタリング（中央揃え）で表示されるようにするテクニックを説明します。
これで完了です。<body>の中にあり上記の<div>タグに挟まれたコンテンツは、Internet ExplorerでもFirefoxでもウィンドウの左右中央に表示されるはずです。 ご活用ください。
スポンサードリンク
ここでは、どのブラウザーでもコンテンツがセンタリング（中央揃え）で表示されるようにするテクニックを説明します。
- Step1 ： 適切な形式で保存する
- Step2 ： 外部スタイルシート
- Step3 ： センタリングコード
- Step4 ： コンテンツ
Step1 − 適切な形式で保存する
Photoshopなどでウェブ・ページを作成し、.php、.html、.aspなどの適切な形式で保存します。
Step2 − 外部スタイルシート
CSSのスタイル・シートは「style.css」という名前で保存し、Step1で作ったウェブ・ページから外部スタイル・シートとしてリンクします。つまり、ウェブ・ページの<head>部分に次のコードを追加します。
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
Step3 − センタリングコード
Step2のスタイル・シートに、次のスタイルを追加します。これは、Internet ExplorerでもFirefoxでも、タグ内にあるコンテンツをセンタリングさせるためのコードです。
body
{
text-align: center; /* IE 向けセンタリング指定 */
}
#container
{
margin: 0 auto; /* Firefox 向けセンタリング指定 */
}
{
text-align: center; /* IE 向けセンタリング指定 */
}
#container
{
margin: 0 auto; /* Firefox 向けセンタリング指定 */
}
Step4 − コンテンツ
ウェブ・ページで、<body>のコンテンツを次のように<div>タグで挟みます。
<body>
<div id="container">
ここにコンテンツを入れる
</div>
</body>
<div id="container">
ここにコンテンツを入れる
</div>
</body>
これで完了です。<body>の中にあり上記の<div>タグに挟まれたコンテンツは、Internet ExplorerでもFirefoxでもウィンドウの左右中央に表示されるはずです。 ご活用ください。
引用:Web Design Library 著者:Escrima翻訳:小林 修
スポンサードリンク
