yujiroのプログラミング

勉強内容をアウトプットし、サボらないようにする為のブログ

<DAY88>指示書を基づくデザイン構築を終えて

\ Follow me!! /

f:id:yujiro0320:20190512223713p:plain

学習状況

●学習日数 88日 

●学習時間(本日) 12時間

●累計学習時間 349.0時間

●一日あたりの平均学習時間 3.96時間 

*この記事でわかる事

.box-sizing: border-box;を使用する理由 .clearflix afterを使用する理由

*指示書に基づくデザインについて、基礎だけど忘れがちなポイントを 2点、忘備録とアウトプットの為に、記述する。

*box-sizing: border-boxについて

親要素が子要素を含む時に、padding,margin幅を含んで、子要素を表示するようにする。 レスポンシブ対応しているサイトがほとんどであり、サイト構築の際に、形を崩れにくくする為に必要。 box-sizing:content-boxはデフォルトで指定されており、border-boxの逆である。

box-sizing: border-box

参考サイトがこちら

saruwakakun.com

*clearflix afterについて

子要素のブロック要素や、インラインブロック要素に対して、floatを用いて、展開位置を調整するが floatはその字のごとく、浮いている状態になる。親要素から見たら、子要素が浮いているので、 親要素が子要素の高さや幅を認識できずに、デザインが崩れがちになる。

<div class="クラス名 clearfix">

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

クラス名に含めるやり方もできるので、こちらで覚える

参考サイト

jdash.info