「HTML＆CSS学習コース 中級編」から１週間くらい経ちましたが、ようやく上級編も終わりました。
このページではプログラミング学習サービス「Progate」の「HTML & CSS 上級編」を勉強してみて、学んだこと気づきいたことについてメモしておきます。
上級編で学習すること
上級編では、レスポンシブデザインについて学びます。
レスポンシブデザインとは簡単に言えば、画面サイズに応じてサイトのデザインを柔軟に調整し、見やすく最適な表示にすることを指します。
パソコン、タブレット、スマホでそれぞれ画面サイズが異なるので、その画面サイズに適したデザインを設定する必要があります。
メディアクエリ
メディアクエリは画面サイズに応じて、CSSを設定できる手法です。
メディアクエリの書き方
@media (max-width: 1170px) { }
上記では、画面サイズが1170px以下になった場合のCSSの設定ができます。
レスポンシブデザインのステップ
①Viewpointの設定
Header内部に書くことで、メディアクエリを正しく利用することができる。書き方は暗記する必要はなし。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
②画面幅の設定
スマホやタブレットなどの小さい画面ではwidthを100%に設定する。
③メディアクエリを使い画面サイズに応じた処理を設定する。
@media (max-width: 1000px) {
}
ちなみに、メディアクエリは別CSSとして管理した方がわかりやすい。
その他
全ての要素に対してCSSを適用する方法
*{ }
レイアウト崩れを直す
box-sizing: border-box
画面幅の上限設定
max-width
floatの解除
clear:left
上級を終えて・・・
上級編は中級編に比べてると割と簡単でした。
というのも、すでに出来上がっているデザインに対して、画面が変わった際のサイズや設定をするだけだからです。
もちろん、上級でしか登場しないような手法もありますが、中級までの知識がしっかりと身についていれば、容易に理解でき、かつすでに知っているタグの応用だったので、つまずくこともありませんでした。
まだ、道場コース（実習編）が残っているので、こちらを完了させてProgateでのHTML & CSSコースは終わりとなります。
