レスポンシブ対応

レスポンシブとは？

PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調節し、見やすく最適な表示にすること。

viewport
　レスポンシブデザインをするときは、<head>タグに必ず設置する。
　付けないと閲覧時にメディアクエリが機能しなくなる。

width:100%;
　画面幅によって全体の幅が変わるようにwidth:100%;に設定する。（〜pxで固定しない）

responsive.css
　CSSファイルを整理するために、レスポンシブ用のCSS（responsive.css）を作る。
　responsive.cssを読み込む際は、viewportよりも下の行に記述する。

子要素全てがfloatしている場合、親要素の高さは０になる。
（子が浮いている状態になるので、親からは子が見えない）
　↓
clearクラスを持つ空タグを、子要素の中に用意する

<div class="lesson">
・
・
・
 <div class="clear"></div>
</div>

.clear {
 clear:left;
}

画面が大きすぎるとき（2000px以上など）にwidth:100%を設定していると、要素の幅が広すぎるため、見えづらくなる。

全体のwidthを設定している要素に、max-width:〇〇pxを設定する

.container {
 max-width:1170px;
 width:100%;
・
・
・

}

max-width:1170px;→最大1170pxまでの幅
width:100%;→max-widthの幅まで全体に広げてね

display:none; 要素を非表示にする
display:block;非表示にさせた要素を表示させる