レスポンシブ対応
レスポンシブとは？
PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調節し、見やすく最適な表示にすること。
viewport
レスポンシブデザインをするときは、<head>タグに必ず設置する。
付けないと閲覧時にメディアクエリが機能しなくなる。
width:100%;
画面幅によって全体の幅が変わるようにwidth:100%;に設定する。（〜pxで固定しない）
responsive.css
CSSファイルを整理するために、レスポンシブ用のCSS（responsive.css）を作る。
responsive.cssを読み込む際は、viewportよりも下の行に記述する。
floatの解除方法
子要素全てが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;非表示にさせた要素を表示させる