Progate-HTML & CSS上級編を学んでみた感想と忘備録

公開日:2020年4月14日
     
 プログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像  
   


こんにちは。

ごりぱちです。

2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、

「自主的に自宅待機+仕事・住居探しに時間がかかる」ということで時間を持て余したので、

ProgateでHTML & CSSを学んでみました!

この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。

"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、

是非とも記事を読んでみてください。

では、レッツゴー!!!

*ちなみに僕の作業環境はMac Book Airです。

⬇︎Progate HTML & CSSの中級編について知りたい方はこちらから

⬇︎Progate HTML & CSSの初級編について知りたい方はこちらから。

Progate HTML & CSS上級編で学ぶこと

"Progate HTML & CSS 上級編"を通じて、レスポンシブデザインを学びます。

▶︎【図解】レスポンシブデザインとは?定義、特徴、メリットとデメリットを解説

▶︎ProgteのHPはこちら!

▶︎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に、親要素を保つ方法が、分かりやすく解説されています。

フォントのレスポンシブ設定

画面幅ごとに、最適なフォントサイズも設定する必要があります。

px, em, rem, %といった様々なフォントサイズの指定方法を知ることで、レスポンシブデザインの設定が楽になります。

▶︎【CSS】結局レスポンシブでのフォントサイズはどう書くべき?

スマホ用のハンバーガーメニューの設定

PCやタブレットで表示されているメニューバーでは、スマホ表示の際にデザインが崩れてしまうので、

スマホ画面に対応したハンバーガーメニューを作ることになります。

▶︎CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)

Progate HTML & CSS上級編のまとめ

Progateの上級編では、レスポンシブデザインの構築方法を学ぶことができました。

レスポンシブデザインは、これまで書いてきたCSSに、画面サイズごとに上書きをすれば良いだけなので、

コーディングの量自体は、これまでと比較すると多くなかったです。

しかし、各端末ごとにデザインを設計する際には、デザインが崩れないように、

floatやフォントサイズなど、基本的な機能をしっかりと理解することが重要です

では、今回はここまで!

これからも、Progateで学んだこと、気になったところをまとめていきます。

プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。

⬇︎Progate HTML & CSSの中級編について知りたい方はこちらから

⬇︎Progate HTML & CSSの初級編について知りたい方はこちらから。

最後まで読んでいただき本当にありがとうございました。

また次回お会いしましょう!

プログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像Progate-HTML & CSS中級編を学んでみた感想と忘備録前のページ

【インドで最適な病院を】日本人向け医療サービスの問い合わせ方法・メリット・サービスの流れをまとめてみた。次のページインド,チェンナイ,病院,日本語デスク,保険

夫婦で世界一周-出国前の準備編-

世界一周,夫婦,アイキャッチ,準備,費用,お金

夫婦で世界一周-帰国後の手続き編-

世界一周,手続き,帰国

夫婦で世界一周 -旅の記録-

youtube,世界一周,夫婦,海外旅行,旅

カテゴリー

アーカイブ

PAGE TOP
人生を変える本気の180日間!プログラマーへの第一歩。
プログラマー育成スクールの無料面談はコチラ
人生を変える本気の180日間!プログラマーへの第一歩。
プログラマー育成スクールの無料面談はコチラ