CSSでのシンプルな単一カラムウェブサイトレイアウト
このレッスンでは、シンプルな単一カラムのウェブサイトレイアウトを作成する練習をします。例えば、次のようなレイアウトを作ってみましょう：
実装を始めましょう。通常、各レイアウトはwrapperという名前の一般的なdivから始まり、サイト全体の残りを含みます：
html<div id="wrapper">
</div>
今回の場合、ラッパーは画面の中央に配置されます：
css#wrapper {
width: 800px;
margin: 50px auto;
}
また、枠線を持たせます：
css#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
では、ページの基本構造を作りましょう。それはメニューとメインコンテンツから構成されます：
html<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
ブロックの中身を追加しましょう：
html<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
これでブロックにスタイルを追加できます。メニューにスタイルを追加しましょう：
css#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
次に、コンテンツ要素にスタイルを追加します：
css#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
これですべてのコードをまとめることができます：
html<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>css#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
アドバイス 1
上から下へ間隔を空けるのが最も便利です。例えば、メニューとコンテンツがあり、その間に空きスペースがあるとします。明らかに、このスペースはメニューの下マージン、コンテンツの上マージン、またはそれらの同時の影響によって作ることができます。この場合、メニューに下マージンを設定し、コンテンツではh1のデフォルトのpaddingとmarginを取り除くのが良いでしょう。
アドバイス 2
子要素は親要素間の間隔を形成すべきではありません。例えば、メニューがあるとします。このメニューの下マージンは、メニューのdivのmargin、またはリンクのmarginのいずれかで形成できます。リンクが親を越えて作用すべきではないので、最初のオプションを選択するのが良いです。
アドバイス 3
2つの要素の間に間隔があり、視覚的にmarginとpaddingのどちらを間隔に選んでも違いがない場合があります。この場合はmarginを選択してください。なぜなら、要素間の間隔を作るのはまさにmarginだからです。