今日やったこととclearfix #リセットCSS

今日やったこと

言葉通り「一つのブロック」として扱われる。基本的には、CSSで高さと横幅を指定する。
CSSで何も指定していない場合、ウインドウの左右いっぱいに表示され、なおかつ上下に改行が入る。

テキストを装飾するときによく使う。テキストの一部を囲い、そこにｙ区割りを与える。文字の一部の範囲指定なので、横幅は中身のテキストの横幅と同一。
インライン要素は連続して横に並ぶ。例：span要素

ブラウザは独自のCSSを持っている。なんらかのトラブルで、Webページ作成者が用意したCSSファイルが読み込まれなかった時に、ブラウザ側で最低限の見た目を保証するため。

しかしこれが自作のCSSファイルと影響しあって見た目を崩してしまうことがある。これを防ぐために各ブラウザが用意しているデフォルトのCSSを上書きするCSSを書いておく。これがリセットCSS。

:afterを使う。ボックス要素内の最後の子要素の後に新たなんラインボックスを作れる。
:afterで作った新たなインラインボックスに対して、clear:both(回り込み解除)とdisplay:block(ブロック要素)を指定することによって、回り込みを解除する。

回り込みを解除したい要素に対して、clearfixというclassをつける

style.css

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

index.html

  <div class="contents clearfix">
      <div class="left-content">
      </div>
      <div class="right-content">
      </div>
  </div>

ある箇所に対してHTMLに手を加えることなくスタイルを指定することができる要素。

例：「:after」「:hover」