レスポンシブデザイン
様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのもの
スマホ表示に対応したサイトを作成するには重要。
メディアクエリ設定
PC、スマホ、タブレットなど、ブラウザ画面のサイズに応じてCSSのスタイルを設定できる。
書き方：＠media(条件){…}
条件が当てはまるときのみ、{ }内のCSSが適応される。
メディアクエリの条件
- max-width(最大幅)またはmin-width(最小幅)を指定できる。
- max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できる。min-widthはその反対。
メディアクエリ設定の○○px部分：ブレイクポイントという。
Progateでは以下のように想定。
- スマホ画面 ：~670px
- タブレット画面：670~1000px
- PC画面 ：1000px～
レイアウト崩れを直す
box-sizing: border-box; を使うと防げる！
- 通常：要素の幅＝width＋padding＋border
- box-sizing: border-box;を使うと：要素の幅＝width(paddingやborderを追加しても変化なし)
- ↑ただし、marginは含まれない
すべてのCSSにbox-sizing: border-box;を指定する場合
- ＊に対して指定することが推奨されている(＊{box-sizing: border-box;}ってする。)
viewportの設定
メディアクエリ設定が正しく機能させるための準備。<header>タグ内に設定する。
＜meta-name=”viewport” contents=”width=device-width,initial-scale=1.0″＞(暗記しなくてOK)
responsive.cssの読み込み
responsive.cssを読み込む際には、必ずviewportよりも下の行に記述する
floatの解除
通常、親要素の高さは子要素を包む高さとなるが、
子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある。
floatはclear: left;で「浮いている」状態を解除できる！
- HTMLでclear: left;を適用するためだけの空のタグを用意する。(<div class=”clear”></div>)
- CSSで、.clear{clear:left;}でfloatを解除する。
フォントのレスポンシブ化
デバイスの画面幅によって、フォントサイズを小さくしたほうが読みやすくなる。
画面サイズが大きいとき
max-width: ◯◯px;を指定する。
コンテンツ同士が離れすぎて見ずらくなってしまうのを防ぐ。
以下を合わせて指定すると、画面幅を伸長してもいい感じに収まるようになる。
- max-width:○○px; ←画面幅の上限を指定
- width:100%; ←その上限内で、幅を最大まで広げる
スマホのヘッダーメニュー
要素を非表示にする：display: none;
非表示にした要素を表示させる：display: block;
<a class=”icon” href=”#”><span class=”fa fa-bars”></span></a>
.icon{display: none;}
@media(max-width:670px){ header-right{display: none;} .icon{display: block;}}
コメント