勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS上級編（２）

今回は、HTML&CSS上級編の復習その2となります。

内容は【viewportの設定、width100%、responsive.cssの読み込み、レイアウトの配置の

変更、floatと親要素の高さ】です。

　レスポンシブデザインを適用する準備として、<head>内にviewportを設定する。

　viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリ

　が正しく機能しない。

　<meta name="viewport"

　content="width=device-width,initial-scale=1.0">

　とメタタグを設定する（ここではviewportの中身の書き方を暗記する必要はない）。

　HTML中級編では、全体のwidthを1170pxで固定していた。

　この状態だとスマートフォンなどの小さい画面でも、widthが1170pxのままになって

　しまう。画面幅によって全体のwidthが変わるように、width: 100%;に変更する。

　stylesheet.cssにメディアクエリ用のCSSを記述しても問題はないが、整理しやすいよ

　うにCSSファイルを分割し、responsive.cssにメディアクエリ用のCSSを記述する。

　このresponsive.cssを読み込む際には、必ずviewportの下の行に記述するようにする。

　クラス毎にwidthの比率（%）を変更することで、端末（タブレット・スマートフォ

　ン）毎にレイアウトが変更されるようにresponsive.cssに記述していく。

　クラスの要素の高さが固定されていると、端末が変わった際に背景色が途中で切れて

　しまうという問題が発生する。

　通常、親要素の高さは子要素を包む高さとなる。しかし、子要素がすべてfloatの時、

　親要素の高さは0となってしまうという性質がある。

　これはfloatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在し

　ていないように見えるからである。

　子要素がすべてfloatでも親要素が高さを持つように設定するためには、clear: left;を記

　述し「浮いている」状態を解除する必要がある。ここではclear: leftを適用するためだ

　けの空タグ<div class="clear"></div>を用意する。

　空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくとよい。

ということで、本日はここまで。

次回は「HTML&CSS上級編」の3回目の復習を記録します。

ご一読を頂きまして、有り難うございました。