ドットインストールでCSSレイアウト入門 #04~#06
いよいよサイトを作っていきましょう！
ドットインストールさんの「CSSレイアウト入門」#04~#06です！
#04 ワンカラムレイアウトを作ろう
ワンカラムのレイアウト！
「はてなブログ」を初めて開いたときには自動的にワンカラムのレイアウトになっていました。
自分で作られるようになるといいなあ…！
今回、bodyはこのように作っていきます。
<body>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
色はこんな感じに指定します。
header{
background: tomato;
}
main{
background: skyblue;
}
footer{
background: slategray;
}
すると、このような１カラムの見た目になります。
ヘッダーの「トマト」という色、初めて見ました。かわいらしいですね。
次に、背景色は横幅いっぱいにしたいけれど、
内容自体は中央のある程度の幅にするときの方法です。
そのときには、containerというclassを作ります。
<body>
<header><div class="container"></div>
header
</header>
<main><div class="container"></div>
main
</main>
<footer><div class="container"></div>
footer
</footer>
</body>
そして、cssではこのように指定します。
.container{
width: 500px;
margin: 0 auto;
background: pink;
}
containerの幅を500pxにし、
containerを中央揃えにするときには左右のmarginを0 autoと記します。
背景色はピンクですね。
すると、このようになります。
わあ！見たことある！
ブログとかでよく使われている構成ですね。
なるほどなあー。
ほかには、フッターの背景色をページの下まで伸ばしたいときもあると思われます。
フッターをいじってもいいのですが、
そうすると後から混乱してしまったりするので
発想を変えて、bodyの背景色をフッターと同じにしてみましょう。
（発想の転換…！）
body{
background: slategray;
}
こうすると、下までフッターの背景が続いているように見えますよね。
「なるほどー、私がフッターの高さをいじろうとしたら
ぐちゃぐちゃになりそうだけれど、
こうしたらどのブラウザで見ても同じになりますね」
このような方法もあるのですね。
#05 アイキャッチ画像を配置してみよう
アイキャッチ画像といえば、よくわかっていない画像（ひどい）。
この記事のときに「はてなブログでのアイキャッチ画像のつけかた」を学んだのでした。
ドットインストールさんではどのように学習するのでしょう？
では、始めましょう！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
よくあるレイアウトとして、背景の横幅いっぱいに画像を配置する、というものがあります。
今回は、ヘッダーとメインの間に「アイキャッチ」というセクションを配置して、そこに画像を入れていきます。
セクションタグでもいいのですが、より汎用的なdivタグをつけていきます。
classでもいいのですが、今回は唯一の要素ということで、idタグを。
<header><div class="container"></div>
header
</header>
<div id="eyecatch">
<div class="container">
eyecatch
</div>
</div>
<main><div class="container"></div>
main
</main>
cssではこのように。
#eyecatch{
background: url('eyecatch.jpg') no-repeat;
}
同じ画像を繰り返さないように 「no-repeat」もつけておきます。
すると、ブラウザで見るとこうなります、
「？？」
背景画像を入れたのに、「eyecatch」の文字しか見えていない？
これは、写真がそのままのサイズでひょうじされているからなのだそうです。
上のほうが暗い色の画像なのですね＾＾；
これを、画面の横幅いっぱいでおさまるサイズで表示したいと思います。
#eyecatch{
background: url('eyecatch.jpg') no-repeat;
backgroud-size: cover;
height: 100px;
}
background-sizeプロパティの値をcoverにします。
background-sizeに関しては、CSS3の#10で学習しました。
覚えていなくてはならないものが積み重なってだんだん白眼になってきていますが
ここはふんばって、しっかりと覚えましょう。（と、自分に言い聞かせる）
また、見やすくするために高さを100pxに指定してみましょう。
すると、こうなります。
無事に出てきました！
（上の方がグレーの画像だったのですね！）
ちなみに、coverにしているので、ブラウザの幅を縮めると
ちゃんとリサイズされます。
（縮めると、きのこがより多く見えるようになりますね＾皿＾）
画像の伸縮の中心が、現在デフォルトで画像の左上になっていますが、
これだときのこたちが目立ちません。
なので、画像の伸縮の中心地点を変えてみましょう。
#eyecatch{
background: url('eyecatch.jpg') no-repeat;
backgroud-size: cover;
background-position: 50% 20%
height: 100px;
}
そのようなときには、background-positionを使います。
background-positionについては、css入門編の#17で学習しました。
x方向には50%(真ん中)、y方向には20%（上寄り）の場所を、伸縮の中心点にします。
おお！きのこの密集地隊がよく見えるようになりました♪
背景に画像を入れたいことはたくさんあると思うので、
このような方法を取っていきたいなあと思います（＊＾＾＊）
#06 2カラムレイアウトを作ってみよう
当ブログPC版の「ぽんきちさんの初めて日記」も2カラムレイアウトです！
これは、覚えるしかない！楽しみでしかない！
さて、わかりやすいようにシンプルな構成に戻りました。
#04と同じ構成に戻りましたね。これを2カラムのレイアウトにしていきたいと思います。
2カラムに分けるのは、「main」の領域です。
<main>
main
</main>
これを、左右に分けます。
<main>
<div id="left">Left</div>
<div id="right">Right</div>
</main>
mainの領域を左右に分けました。
色をつけて、わかりやすくしてみましょう。
#left{
background: limegreen;
float: left;
width:200px;
}
#right{
background: lightgreen;float: left;
width: 300px;
}
左のほうがライムグリーン、右のほうがライトグリーンですね。
両方とも、左右に並べるために「float:left;」を指定しました。
floatに関しては、CSS入門編の#23で学習しました。
floatを指定したときには、幅を指定しなくてはならないので指定しましょう。
containerの幅を500pxにしていたので、
左右で担当を分けます。
左カラムが200px、右のカラムを300pxに指定しましょう。
（合計でcoutainerの500pxと同じになるようにします）
%で指定してもいいですね。containerの幅を変えたくなった時などに楽そうです。
ブラウザで見ると、こうなりました。
おお！
「Left」と「Right」の高さが高くなれば、2カラムレイアウトのブログの見た目といっしょですね♪
ただ、floatをしたときにclearをしていないので、フッターの色が左右に回り込んでしまっています。
(clearについても、CSS入門編の#23で学習しました)
これを解除するのは簡単で、clear:both;をつけるだけです。
footer{
clear: both;
background: slategray;
}
はい、メインに回り込んでいた濃いめの灰色が無事に消えました！
あれ？でも…メインの背景色も消えてしまったような？
これは、floatでleftとrightを浮かせてしまったため、
メインの領域の高さを計算できなくなってしまったために
背景色も消えてしまったのです。
これも直してみましょう。
htmlのほうで、floatしない要素を作ります。
<main>
<div id="left">Left</div>
<div id="right">Right</div>
<div style="clear:both;"></div>
</main>
このようにすると、leftとrightの下までの高さを計算してくれます。
メインの背景色も無事に出てきてくれましたね！
floatを含んだ親要素に高さを出す方法も学びました。
是非とも使い慣れておきたいですね。
