ドットインストールでCSSレイアウト入門 #07~#09
ドットインストールさんで、CSSのレイアウトを
今日も学習していきましょう。
#07 clearfixを使ってみよう
前回、#06でまなんだこれ。
<div style="clear: both"></div>
2カラムのレイアウトを作っているときに、
メインの左カラムと右カラムをfloatにさせると
高さが指定できなくなるので
高さを指定するために生まれたclear:both;です。
clearfix
親要素の高さを指定するためだけにdivを作るのは大変だったりしますよね。
そんなときに使えるのがclearfixです。
clearfixを入れるのはこんな場所です。
<main>
<div class="container clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</main>
ここに指定すると、先ほどのclear:both;を使わなくてすむということなのです。
.clearfix::after{
content: '' ;
display: block;
clear: both;
}
アフターという擬似要素に関しては、CSS入門編の#07で学習しています。
そちらにも描いてありますが、
after要素を使うときにはcontentプロパティが必須です。
とりあえず空文字に。
また、divと同じ効果がほしいので、display: block; とします。
displayプロパティに関しては、
そして、clear: both;ですね。これでOKです。
このclearfixは、昔のブラウザに対応させるためにはもっと色々書かなくてはならないそうなのですが、
最近のモダンブラウザであればこれで大丈夫だそうです。
ブラウザで確認しても、clear: both;のときと同じ見た目になっていますね。
OKです。
overflow: hidden;
clearfixよりも、もうちょっと簡単な方法としてoverflow: hidden;があります。
これはすごく簡単で、書くことはこれだけです。
clear{
overflow: hidden;
}
このように書くことで、clearfixと同じ結果になるはずです。
同じ見た目になります。
あとで詳しい理屈を学んだときに、理由がわかるようになるのでしょうか。
とにかく今は、「overflow:hidden;」を見かけたらclearfixと同じようなことをしているのかな、という理解をしておきたいと思います。
ちなみに、overflow:hidden;という言葉自体は
#08 カラムに余白をつけてみよう
さて、カラムができあがりました。
しかし、leftとrightがしっかりとくっつくていますよね。
ここに余白をつけていきたいと思います。
今回紹介されているのは２つの方法です。
どちらも使えるようになることが望ましいそうです！
1.leftの幅を狭めて、leftの右にmargin-rightをつける
現在は、leftもrightもfloat:leftになっているので
左カラムの幅を狭めて右に余白をあけることで
左右のカラムの間に余白がつく、という方法です。
#left{
background: limegreen;
float: left;
width:180px;
margin-right: 20px;
}
初めは200pxだった幅を180pxに狭めて、
狭めたぶんの20pxををmargin-rightにしました。
うん、余白がつきましたね。
2. leftをfloat:leftにし、rightをfloat:rightにしてleftの幅を狭める
leftもrightもfloat:leftになっているところを変更し、
rightのほうをfloat:rightにすることで余白をあけやすくする方法です。
leftの幅を狭めることで自然と余白があくので
margin-rightを設定する必要がなくなります。
#left{
background: limegreen;
float: left;
width:180px;
}
まずは、leftのほうのmargin-rightを決して
#right{
background: limegreen;
float: right;
width:180px;
}
floatをrightにします。
すると、同じようになります。
うーん、floatをrightにする方（2のほう）が簡単な気がしますね＾皿＾
しかし、意味がわかっていないとどちらもできないのでしっかり覚えたいと思います。
leftとrightの中に余白をつけたい場合
カラムの中に余白をつけたい場合には、paddingを使えばOKです。
#left.#right{
padding: 10px;
}
ただ、ここで注意点があります。
leftやrightの幅は、paddingやborderを含まないので
ここでpaddingを設定してしまうと、幅からあふれてしまいます。
あらら！あふれてはみだして
わけのわからないことになってしまいました。
カラムが下に落ちてしまいましたね。
これの解決方法としては、
1:設定したpaddingのぶんをwidthから引く（180から170に）
2:box-sizingを使う
1でも悪くはないのですが、いちいち計算をするのは大変だったりしますよね。
そこで使うのがbox-sizingです。
box-sizingは、色々な値をとりうるのですが
「border-box」を使うと、leftやrightがpaddingやborderを含む値になります。
#left.#right{
padding: 10px;
border-sizing: border-box;
}
すると…、
おおー！綺麗に並んでいる上に
paddingもちゃんとついていますね♪
いちいち計算すると計算漏れが必ず発生しそう勢としては
box-sizingはぜひとも覚えておきたいところです。
#09 3カラムレイアウトを作ってみよう
3カラムを学ぶために、まずは余白などをとってシンプルな形に戻してあります。
これを3カラムにしていきましょう！
<main>
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</main>
htmlの編集画面で、
”center”というdivを作ります。
CSS のほうでは、すべてをfloat:leftにして
幅を変えてみます。
全体の幅が500pxなので
左を100px、センターを300px、右を100pxにします。
#left{
background: limegreen;
float: left;
width:100px;
}
#center{
background:seagreen;
float: left;
width:300px;
}
#right{
background: limegreen;
float: left;
width:100px;
}
先ほどの#08のように、rightをfloat:rightにしても同じ結果になります。
ブラウザで見ても、正しく表示されていますね。
seagreenは初めて見る色ですが、海藻の色…なのかな…？(いや、単純に『海の緑』でいいそうです)
次は、marginを設定していきましょう。
leftとrightはそのままにしたいので、centerのあたりをいじっていきます。
左と右の間に余白をつける場合,
左に余白を10px。センターのカラムをそのぶん10px縮めて290pxにします。
#left{
background: limegreen;
float: left;
width:100px;
margin-right: 10px;
}
#center{
background:seagreen;
float: left;
width:290px;
}
はい、ちゃんと左とセンターの間に余白があきました。
次は、センターと右の間におなじように余白をつけます。
センターの右に余白を10pxつけて、さらに幅を10px縮めます。
#center{
background:seagreen;
float: left;
width:280px;
margin-right:10px
}
はい、無事に余白があきました！
また#08で学習したように、
leftとcenterはfloat:leftにして、
rightだけfloat:rightにするという方法もありますね。
centerのmargin-rght:10px;を決して、rightをfloat:rightにします。
#center{
background:seagreen;
float: left;
width:280px;
}
#right{
background: limegreen;
float: right;
width:100px;
}
すると、同じように見えます。
はい、うまくいっていますね。
2カラムも3カラムも、基本的な作り方は同じですね。
3カラムの場合にも、paddingをつけたいときにはbox-sizingの「border-box
」にすると便利でしょうね（＊＾＾＊）
しっかりと慣れて、覚えていきたいと思います。
