生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSSレイアウト入門 #07~#09

ドットインストールさんで、CSSのレイアウトを

今日も学習していきましょう。

 

f:id:ponnkichi:20180311214551p:plain

 

 

#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プロパティに関しては、

CSS入門編の#18で学習しています

 

そして、clear: both;ですね。これでOKです。

 

このclearfixは、昔のブラウザに対応させるためにはもっと色々書かなくてはならないそうなのですが、

最近のモダンブラウザであればこれで大丈夫だそうです。

f:id:ponnkichi:20180308092135p:plain

ブラウザで確認しても、clear: both;のときと同じ見た目になっていますね。

OKです。

overflow: hidden;

clearfixよりも、もうちょっと簡単な方法としてoverflow: hidden;があります。

これはすごく簡単で、書くことはこれだけです。

clear{

overflow: hidden;

 このように書くことで、clearfixと同じ結果になるはずです。

f:id:ponnkichi:20180308092135p:plain

同じ見た目になります。

 

あとで詳しい理屈を学んだときに、理由がわかるようになるのでしょうか。

とにかく今は、「overflow:hidden;」を見かけたらclearfixと同じようなことをしているのかな、という理解をしておきたいと思います。

 

ちなみに、overflow:hidden;という言葉自体は

CSS入門編の#21で学習しています

 

#08 カラムに余白をつけてみよう

さて、カラムができあがりました。

しかし、leftとrightがしっかりとくっつくていますよね。

ここに余白をつけていきたいと思います。

今回紹介されているのは2つの方法です。

どちらも使えるようになることが望ましいそうです!

1.leftの幅を狭めて、leftの右にmargin-rightをつける

現在は、leftもrightもfloat:leftになっているので

左カラムの幅を狭めて右に余白をあけることで

左右のカラムの間に余白がつく、という方法です。 

#left{

background: limegreen;

float: left;

width:180px;

margin-right: 20px;

}

 

 

初めは200pxだった幅を180pxに狭めて、

狭めたぶんの20pxををmargin-rightにしました。

f:id:ponnkichi:20180311081703p:plain

うん、余白がつきましたね。

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にします。

f:id:ponnkichi:20180311081703p:plain

すると、同じようになります。

 

うーん、floatをrightにする方(2のほう)が簡単な気がしますね^皿^

しかし、意味がわかっていないとどちらもできないのでしっかり覚えたいと思います。

 

leftとrightの中に余白をつけたい場合

カラムの中に余白をつけたい場合には、paddingを使えばOKです。

#left.#right{

padding: 10px;

}

 ただ、ここで注意点があります。

leftやrightの幅は、paddingやborderを含まないので

ここでpaddingを設定してしまうと、幅からあふれてしまいます。

f:id:ponnkichi:20180311082444p:plain

あらら!あふれてはみだして

わけのわからないことになってしまいました。

カラムが下に落ちてしまいましたね。

 

これの解決方法としては、

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;

}

すると…、

f:id:ponnkichi:20180311083021p:plain

おおー!綺麗に並んでいる上に

paddingもちゃんとついていますね♪

いちいち計算すると計算漏れが必ず発生しそう勢としては

box-sizingはぜひとも覚えておきたいところです。

 

#09 3カラムレイアウトを作ってみよう 

3カラムを学ぶために、まずは余白などをとってシンプルな形に戻してあります。

f:id:ponnkichi:20180308092135p:plain

これを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にしても同じ結果になります。

f:id:ponnkichi:20180311083914p:plain

ブラウザで見ても、正しく表示されていますね。

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;

}

 

f:id:ponnkichi:20180311084330p:plain

はい、ちゃんと左とセンターの間に余白があきました。

次は、センターと右の間におなじように余白をつけます。

 

センターの右に余白を10pxつけて、さらに幅を10px縮めます。

#center{

background:seagreen;

float: left;

width:280px;

margin-right:10px

}

 

f:id:ponnkichi:20180311084532p:plain

はい、無事に余白があきました!

 

また#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;

}

すると、同じように見えます。

f:id:ponnkichi:20180311084532p:plain

はい、うまくいっていますね。

 

2カラムも3カラムも、基本的な作り方は同じですね。

3カラムの場合にも、paddingをつけたいときにはbox-sizingの「border-box

」にすると便利でしょうね(*^^*)

しっかりと慣れて、覚えていきたいと思います。