Progate(プロゲート):学習記録「HTML&CSS学習コース 上級編」

「HTML&CSS学習コース 中級編」から1週間くらい経ちましたが、ようやく上級編も終わりました。

このページではプログラミング学習サービス「Progate」の「HTML & CSS 上級編」を勉強してみて、学んだこと気づきいたことについてメモしておきます。

上級編で学習すること

上級編では、レスポンシブデザインについて学びます。

レスポンシブデザインとは簡単に言えば、画面サイズに応じてサイトのデザインを柔軟に調整し、見やすく最適な表示にすることを指します。

パソコン、タブレット、スマホでそれぞれ画面サイズが異なるので、その画面サイズに適したデザインを設定する必要があります。

メディアクエリ

メディアクエリは画面サイズに応じて、CSSを設定できる手法です。

メディアクエリの書き方
@media (max-width: 1170px) {
(処理を書く)
}

上記では、画面サイズが1170px以下になった場合に「(処理を書く)」が実行される仕組みになっています。

レスポンシブデザインのステップ

Viewpointの設定
Header内部に書くことで、メディアクエリを正しく利用することができる。書き方は暗記する必要はなし。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

②画面幅の設定
スマホやタブレットなどの小さい画面ではwidth100%に設定する。

③メディアクエリを使い画面サイズに応じた処理を設定する。
@media (max-width: 1000px) {

  }

ちなみに、メディアクエリは別CSSとして管理した方がわかりやすい。

その他

全ての要素に対してCSSを適用する方法
*{
  〜〜〜〜
}

レイアウト崩れを直す
box-sizing: border-box;

画面幅の上限設定
max-width:数値;

floatの解除
clear:left;



上級を終えて・・・

上級編は中級編に比べてると割と簡単でした。

というのも、すでに出来上がっているデザインに対して、画面が変わった際のサイズや設定をするだけだからです。

もちろん、上級でしか登場しないような手法もありますが、中級までの知識がしっかりと身についていれば、容易に理解でき、かつすでに知っているタグの応用だったので、つまずくこともありませんでした。

まだ、道場コース(実習編)が残っているので、こちらを完了させてProgateでのHTML & CSSコースは終わりとなります。

スポンサーリンク
コメントを残す

CAPTCHA