こんにちは。
ごりぱちです。
2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、
「自主的に自宅待機＋仕事・住居探しに時間がかかる」ということで時間を持て余したので、
ProgateでHTML & CSSを学んでみました！
この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。
"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、
是非とも記事を読んでみてください。
では、レッツゴー！！！
＊ちなみに僕の作業環境はMac Book Airです。
⬇︎Progate HTML& CSSの中級編について知りたい方はこちらから。
⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。
Progate HTML & CSS初級編学ぶこと
"Progate HTML & CSS 初級編"を通じて、文字通りwebデザインの基礎の基礎を学んでいきます。
▶︎Progate HTML & CSS 初級編で学ぶこと一覧
"Progate HTML & CSS 初級編"は、無料で学ぶことができるので、
「プログラミング学習が継続できるか不安だな。。。」という方でも、気軽に取り掛かることができます。
お試し感覚で、是非トライしてみてください！
Progateの感想
「Progateって使いやすいの？」と心配される方もいると思うので、
まずは僕の主観での「Progateを使ってみた感想」をお伝えします。
Progate、めっちゃ使いやすいです！
僕は過去に、いくつかプログラミング学習サービスを使っていたのですが、その際に最も面倒くさかったのが、
Emmetのようなコーディングの省略機能が使えず、コーディング時間が無駄に長くなってしまうことです。
Emmetとは、独自の省略記法でHTML・CSSのコーディングの効率化をサポートしてくれるプラグイン。
by GRANFAIRS
しかし、Progateであれば、基本的なEmmet機能が使えるので、すごく楽にコーディングをすることが可能です。
例えば、<div></div>を作成する際、div+tabで、<div></div>が一瞬で作成されます。
⬇︎Emmetの具体的な使い方を知りたい方へ、オススメの記事です。
▶︎「はじめて」でも簡単！Emmetの使い方とよく使うパターン集
＊Progateで、上記の記事内全てのEmmetコマンドが使えるわけではありません。
実際にProgateを触りながら、Progateで使えるEmmetコマンドを覚えていくことをオススメします。
Progate HTML & CSS初級編の忘備録
▶︎Progate HTML & CSS 初級編で学ぶこと一覧
ここでは、僕が実際に初級編の中で理解に詰まったところ、それを解決するために参考にした情報をセットにして紹介していきます。
＊サルワカさんや、ちづみさんが分かりやすくて、本当に助かりました。。。
HTMLとCSSの役割について
「そもそもHTMLとCSSって何？どこがどう違うの？役割って何？」
という、絶望的なまでにチンプンカンプンだった僕は、まずHTMLとCSSについて調べました。
HTMLで使用されるタグや、CSSの記述方法など、詳しく知ることができるので、
Progateで理解できないところがあれば、こちらの記事を読むことをオススメします！
▶︎初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
floatについて
僕は特に、floatで子要素を横並びにした際に、親要素高さを保てなくなり、うまいことデザインができなくなってしまい、
かなり悩んだのですが、その時参考にしたのがこちらのtwitterです。
親要素を保つ方法が、分かりやすく解説されています。
✅なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr— ちづみ (@098ra0209) January 16, 2019
margin ・ paddingについて
「marginとpaddingって、要素同士の間隔をあけるもの？性質の違いは何？分からん！」
と、かなり混乱していましたが、何回も繰り返し解説記事を読むことで理解が深まりました。
▶︎CSSのmarginとは？paddingとは？余白の指定方法まとめ
理解が深まった後は、再度Progateを復習する際に、勝手にmarginやpaddingの数字をいじってみると、非常に分かりやすいです。
その後も、日常生活で四角を見ると、その度に「margin・padding」をイメージしていました。
テレビ・窓・ipad・iphone・ノートなど、身の回りの四角いものは、全てイメトレに活用しました。笑
問い合わせフォームについて
お問い合わせフォームを作る際、input要素・textarea要素・form要素など、新しい概念が出てきます。
正直、それらがどんな役割で、どんな機能を果たしているのか分からなかったので、それぞれの役割を調べてみました。
Progate HTML & CSS初級編のまとめ
Proagte HTML & CSS初級編を通じて、
「HTMLとCSSって何？どうやってサイトって作るの？」という状態から、
「HTMLとCSSの基本的な使い方、サイトの構成について理解することができた！」となりました。
では、今回はここまで！
これからも、Progateで学んだこと、気になったところをまとめていきます。
プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。
⬇︎Progate HTML& CSSの中級編について知りたい方はこちらから。
⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。
最後まで読んでいただき本当にありがとうございました。
また次回お会いしましょう！
[email-subscribers-form id="1"]
