ここではwebサイトで良く見られるレイアウトである３カラムをマスターして作成してみましょう。
新しく「margin」「padding」「float」「clearfix」が出てくるので説明していきます。
margin
「margin」は要素に対して周りの間隔を開ける場合に使用します。
margin: 0 10px 20px 30px;
とすると
上→0px (0=間を開けない)
右→10px
下→20px
左→30px
で間隔を開けるということを示します。
(0pxの場合は、「0px」ではなく「0」と書きましょう)
分かりやすく図で表すと、ピンク色の要素の外側が「margin」です。
そして、個別に指定することも可能です。
例えば左側だけ間隔を指定したい場合は以下のように記述します。
margin-left: 20px;
同様に、右側の場合は「margin-right」、上部は「margin-top」、下部は「margin-bottom」なども使えます。
また、こんな書き方も出来ます。
margin: 10px 20px;
この場合は
上下→10px
左右→20px
となります。
参考サイト：http://www.htmq.com/style/margin.shtml
padding
「padding」は要素に対して内側の間隔を開ける場合に使用します。
marginとは逆だと思ってください。
padding: 10px 20px 30px 40px;
とすると
上→10px
右→20px
下→30px
左→40px
で間隔を開けるということを示します。
分かりやすく図で表すと、ピンク色の要素の内側が「padding」です。
そして、個別に指定することも可能です。
例えば上部だけ間隔を指定したい場合は以下のように記述します。
padding-top: 30px;
同様に、左側だけ間隔を指定したい場合は「padding-left」、右側は「padding-right」、下部は「padding-bottom」なども使えます。
参考サイト：http://www.htmq.com/style/padding.shtml
float
次に「float」プロパティは要素（divタグやpタグなど）を浮かせて右や左に寄せたりする際に使用します。
例えば右側に寄せたい場合は「float: right;」これで要素を右に寄せることができます。
左側の場合は「float :left;」になります。
「float」を使用すると要素が浮きます。
下図は、今回作って頂いているものを図式化したものです。
「left-center」クラスと「right」クラスは、その親要素である「contents」クラスの上でぷかぷか浮いている状態です。
(ついでに言えば、「left」クラスと「center」クラスも、その親要素である「left-center」クラスの上で浮いています。)
浮かせた上で、左に寄せたり、右に寄せたりすることが出来ます。
HTMLは基本パズルを上から見ているものだと思えば良いのです。
では、今持っているパズルのピースを左に動かすにはどうするか。
左にあるものをどかすか、その上に重ねて置いちゃえば良いのです。
これが「float」の考え方です。(ちょっと極端ですが)
clearfix
ただ、一度「float」で浮かせたらどこかで浮いてない状態に戻さないといけません。
「left-center」クラスと「right」クラスは、その親要素である「contents」クラスの上でぷかぷか浮いている、と言いました。
従って「contents」クラスにまだ何か書きたいという場合、 そのままでは「left-center」クラスの下に要素が潜ります。
(一度試してみるといいです)
それをどうにかするために「clearfix」という小技をよく使います。
CSSには以下の記述をします
.clearfix::after {
content: '';
display: block;
clear: both;
}
そして、HTMLには浮いている要素(float)の親要素のクラス名の後ろに「clearfix」とクラスを付けます
「left-center」クラスと「right」クラスのfloatを解除するには、その親要素である「contents」クラスに「clearfix」クラスを付与します。
リセットCSS
各ブラウザがデフォルトで持っているCSSのmarginやpaddingのせいで、本来自分が意図していた配置にならないということが起きてしまう事があるので、ブラウザによってページが崩れてしまうのを防ぐ為のリセットCSSというものがあります。
リセットCSSは以下のように記述します。
「＊」は、全てのクラスにという意味です。
* {
margin: 0;
padding: 0;
}
部品を作成する
3カラムを作成する上で必要なクラスは以下の14個になります。
※たまに勘違いする方がいますが、クラス名は任意で決められるものなので自由に変えられます。
そしてHTML・CSSを記述する際には、作成したい要素の上から順番に記述し、誰が見ても見やすい、分かりやすい綺麗なコードを記述するように心掛けましょう。
・wrapper（全体を括るクラス）
・header（ヘッダー）
・contents（left-centerとrightをまとめるクラス）
・left-center (leftとcenterをまとめるクラス)
・left（左のカラム）
・left-upper（left内にあるボックスのうち、上の方）
・left-lower（left内にあるボックスのうち、下の方）
・center（メインコンテンツ）
・right（右のカラム）
・right-inner（right内にあるボックス）
・right-inner-text（right-inner内のテキスト）
・footer（フッター）
・clearfix（補助クラスその1。後ほど説明）
・bg-white（補助クラスその2。背景を白にする）
【HTML側】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3カラムレイアウト例</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="contents clearfix">
<div class="left-center clearfix">
<div class="left">
<div class="left-upper bg-white">left-upper</div>
<div class="left-lower bg-white">left-lower</div>
<span>left</span>
</div>
<div class="center">center</div>
</div>
<div class="right">
<div class="right-inner bg-white">
<div class="right-inner-text">right-inner</div>
</div>
<span>right</span>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
【CSS側】
body {
min-height: 100%;
height: 100%;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.wrapper {
width: 1024px;
margin: 0 auto;
/* wrapperクラスを中央寄せ */
}
.bg-white {
background-color: #fff;
}
/** header **/
.header {
height: 100px;
background-color: #337ab7;
}
/** end of header **//** contents **/
.contents {
height: 640px;
}
/** left-center **/
.left-center {
float: left;
height: 100%;
}
/** left **/
.left {
float: left;
width: 300px;
height: 100%;
background-color: #dff0d8;
}
.left-upper {
width: 200px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
}
.left-lower {
width: 200px;
height: 415px;
margin-top: 25px;
margin-left: 50px;
}
/** end of left **/
.center {
float: right;
width: 424px;
height: 100%;
background-color: #d9edf7;
}
/** end of left-center **//** right **/
.right {
float: right;
width: 300px;
height: 100%;
background-color: #fcf8e3;
}
.right-inner {
padding-top: 30px;
width: 190px;
height: 510px;
margin: 50px 0 0 50px;
/* 上と左への指定なら、こういう書き方も出来ます */
}
.right-inner-text {
padding: 15px 25px;
border: 5px solid #eee;
}
/** end of right **/
/** end of contents **/
/** footer **/
.footer {
height: 100px;
background-color: #f2dede;
}
/** end of footer **/
/* reset.css*/
* {
margin: 0;
padding: 0;
}
上記CSSで触れているのにここで説明を省いているものもありますので、以下で調べてみましょう。
参考サイト：http://www.htmq.com/
