スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSによるセンタリング

CSSによるセンタリング

投稿日:2006年12月26日   レベル:初心者    ソフトウェア:DreamWeaver
html_10014_1.jpgここでは、どのブラウザーでもコンテンツがセンタリング(中央揃え)で表示されるようにするテクニックを説明します。



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 向けセンタリング指定 */
}


Step4 − コンテンツ
ウェブ・ページで、<body>のコンテンツを次のように<div>タグで挟みます。

<body>
<div id="container">
ここにコンテンツを入れる
</div>
</body>

これで完了です。<body>の中にあり上記の<div>タグに挟まれたコンテンツは、Internet ExplorerでもFirefoxでもウィンドウの左右中央に表示されるはずです。 ご活用ください。

引用:Web Design Library 著者:Escrima翻訳:小林 修



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング