こんにちは。
ごりぱちです。
2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、
「自主的に自宅待機＋仕事・住居探しに時間がかかる」ということで時間を持て余したので、
ProgateでHTML & CSSを学んでみました！
この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。
"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、
是非とも記事を読んでみてください。
では、レッツゴー！！！
＊ちなみに僕の作業環境はMac Book Airです。
⬇︎Progate HTML & CSSの中級編について知りたい方はこちらから
⬇︎Progate HTML & CSSの初級編について知りたい方はこちらから。
Progate HTML & CSS上級編で学ぶこと
"Progate HTML & CSS 上級編"を通じて、レスポンシブデザインを学びます。
▶︎【図解】レスポンシブデザインとは？定義、特徴、メリットとデメリットを解説
▶︎Progate HTML & CSS 上級編で学ぶこと一覧
"Progate HTML & CSS 上級編"は、Progateの"有料会員"にならないと利用ができません！
Progateの有料会員は、月々980円(税抜き)です。
ランチ1回分の値段で、めちゃんこ豊富なコンテンツにアクセスできるので、有料会員となることをオススメします！
⬇︎Progateの使いやすさについてはこちらから。
Progate HTML & CSS上級編の忘備録
メディアクエリの設定
PC,タブレット,スマホと端末ごとにデザインを整えるレスポンシブデザインの基本として、メディアクエリを設定する必要があります。
メディアクエリによって、様々な端末へ対応するデザインを構築することができるようになります。
また、ブレイクポイントを設定することで、画面サイズごとに表示させるデザインの内容を変更することができます。
▶︎【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]
viewportの設定
<head></head>内に、viewportを設定します。
viewportが<head></head>内に設定されていないと、メディアクエリがきちんと機能せず、レスポンシブデザインが崩れてしまいます。
▶︎viewportを理解して正しいレスポンシブデザインを設定しよう
▶︎head内に書くべきタグを総まとめ：SEO対策に有効なものは？
floatの解除
僕は特に、floatで子要素を横並びにした際に、親要素がなくなってしまう点に混乱しました。
しかし、こちらのtwitterに、親要素を保つ方法が、分かりやすく解説されています。
✅なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr— ちづみ (@098ra0209) January 16, 2019
フォントのレスポンシブ設定
画面幅ごとに、最適なフォントサイズも設定する必要があります。
px, em, rem, %といった様々なフォントサイズの指定方法を知ることで、レスポンシブデザインの設定が楽になります。
▶︎【CSS】結局レスポンシブでのフォントサイズはどう書くべき？
スマホ用のハンバーガーメニューの設定
PCやタブレットで表示されているメニューバーでは、スマホ表示の際にデザインが崩れてしまうので、
スマホ画面に対応したハンバーガーメニューを作ることになります。
▶︎CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
Progate HTML & CSS上級編のまとめ
Progateの上級編では、レスポンシブデザインの構築方法を学ぶことができました。
レスポンシブデザインは、これまで書いてきたCSSに、画面サイズごとに上書きをすれば良いだけなので、
コーディングの量自体は、これまでと比較すると多くなかったです。
しかし、各端末ごとにデザインを設計する際には、デザインが崩れないように、
floatやフォントサイズなど、基本的な機能をしっかりと理解することが重要です
では、今回はここまで！
これからも、Progateで学んだこと、気になったところをまとめていきます。
プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。
⬇︎Progate HTML & CSSの中級編について知りたい方はこちらから
⬇︎Progate HTML & CSSの初級編について知りたい方はこちらから。
最後まで読んでいただき本当にありがとうございました。
また次回お会いしましょう！
[email-subscribers-form id="1"]
