ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング