0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

今日やったこととclearfix

Last updated at Posted at 2017-03-05

今日やったこと

  • Virtualboxのインストール
  • Vagrantのインストール
  • Git for Windowsのインストール

ブロック要素

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

インライン要素

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

リセットCSS

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

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

clearfix

: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」

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?