つれづれ日記

２０１１年４月１日～８月１５日まで育児休業を取りしました。この期間の生活を日記のまとめです。また、育児休業期間が終わったので、他にも挑戦しているものや日常のメモなどもこの日記に載せようと思います。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(X)HTML,CSS覚書
～ページレイアウトの調整について～

　今回は、サイト全体を中央に配置することについて、説明します。
　画面の中央に内容が配置されているデザインを実現するためには、最近のブラウザ用の指定と古いブラウザ用の指定の両方を記述する必要があります。

☆最近のブラウザ用の指定
　「20111015ｗｅｂサイト作成について　０９」で書き込んだ index.html ファイルに追加で記入します。

<body>
<div id="pageWrapper">　　　　＜＝追加
<div id="header"><h1>タイトル</h1></div>

～中略～

<div id="footer"><p>Copyright (C) All rights reserved.</p></div>
</div>　　　　＜＝追加
</body>

　追加した行は、２行だけです。
　そしてさらに main.css ファイルにも追加で記入します。

* {
    margin: 0;
    padding: 0;
}

div#pageWrapper { 　　＜＝追加
    width 800px; 　　　　　＜＝追加
    margin-right: auto;　　＜＝追加
    margin-left: auto;　　　＜＝追加
} 　　　　　　　　　　　　　　＜＝追加

div#header {
～以下省略～

（（解説））
　まずは index.html に追加した内容についてです。
　<body>の直後に行を追加し、</body>の直前にも行を追加しました。
　つまり、本文全体に対して設定を行うということです。

　次に、 main.css についてです。
　まずは div#pageWrapper に設定を書き込みます。
　width は横幅を指定するためのプロパティなので、横幅は８００ｐｘにするという指定になります。
　そして、 margin-right: auto; と margin-left: auto; ですが、width で指定した８００ｐｘに調整して左右の余白を自動で決めることになります。左右の余白の設定が auto の場合は自動で同じ量の margin が割り振られ、結果的に中央に配置することになります。

☆古いブラウザ用の指定

　main.css に追加です。先ほどの新しいブラウザ用の指定で記入した div#pageWrapper の上に記入します。

body {　　　　　　　　　　　＜＝追加
    text-align: center;　　　＜＝追加
}　　　　　　　　　　　　　　＜＝追加

　また、div#pageWrapper の最後の行に１行追加です。
    margin-left: auto;
    text-align: left;　　　　＜＝追加
}

（（解説））
　最初に注意しておきますが、古いブラウザ用として記述した text-align プロパティは、text-align 本来の使い方（テキストの水平方向の揃え方を指定するプロパティ）ではありません。

　では、新たに記述した文章の説明です。
　まずは、text-align で <body> と </body> の中身全てを中央揃えにします。
　古いブラウザではレイアウトも揃えてしまうので、このプロパティで記述しました。

　そして、全てのテキスト（とデザイン）が中央揃えになったので、<div id="pageWrapper" の中は左揃えと設定するために、div#pageWrapper の一番最後に左揃えという記述をしました。

　つまり、<body> と</body> の中はデザインも中央揃えですが、<div id="pageWrapper" 内のテキストは左揃えということです。

[0回]