CSS【 上級編 】

こんにちは。

今回も、CSSについて学んだことを共有していきます。

メディアクエリを設定する

メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。

メディアクエリは、@media (条件) { .... }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。

メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-widthはその反対となります。

max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、「◯◯px」の部分をブレイクポイントと呼びます。
今回はスマートフォンの画面幅は670px以下、タブレットの画面幅は670px ~ 1000pxと想定して、ブレイクポイントを設定しましょう。

レイアウト崩れを直す

要素の幅の合計が100%を超えてしまうと、レイアウトが崩れてしまいます。このようなレイアウト崩れは、box-sizing: border-box;を用いることで防ぐことができます。

box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになります。そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます（※ただし、marginはborder-boxでの合計値に含まれません）。

1.全要素にCSSを適用する

box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されています。
*はすべての要素に対してCSSを適用したい場合に用います。
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。

2.floatと親要素の高さ

通常、親要素の高さは子要素を包む高さとなります。
しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。
これは、floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるからです。

・HTMLでclearクラスを持つ<div>を追加する
<div class="clear">

子要素が全てfloatでも、親要素が高さを持つように設定してみましょう。
floatはclear: left;で「浮いている」状態を解除できます。
ここではclear: left;を適用するためだけの空のタグを用意しましょう。
空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくようにしましょう。

画面サイズが大きい時に対応しよう

1.max-widthを指定する

max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなります。

要素の表示/非表示

要素を非表示にするにはdisplay: none;を用います。
非表示にした要素を表示させる時は、display: block;を用いて表示します。

まとめ

今回で、プロゲートで学べるCSSについて初級編から上級編まですべてまとめてきました。ここまで色々な要素が出てきたので最初の頃の要素を忘れつつあるのでこのnoteを振り返りに使って復習したいと思います。

今後もCSSについて学んだことを随時まとめていこうと思います。
お楽しみに！