HTML/CSS学習②

1月と2月は特に大阪出張が多いので、スキマ時間を活用した学習のチャンス。東京・大阪間の往復で5時間。この移動時間の半分くらいをプログラミング学習に使えたら理想的。

今回の学習目的はシンプルなサイトを作成しながら、HTML/CSSコーディングの基本的な考え方を学習すること。

たとえば、

CSSファイル適用のためのlinkタグの利用

セレクタの役割

タイプセレクタ、classセレクタ、idセレクタ

セレクタに対するプロパティと値の設定

calsを使用した計算

ウェブフォント

ulやliタグを使ったリスト表示

Flexboxなどを使った要素の整列

overflowプロパティを利用した表示の変更

text-alignプロパティを利用した文字表示位置の設置 

などなど。

ちなみに、本ブログ「3つの『と』びら~Three Doors」はWordpressで作成しており、ときどきHTMLに変更を加えることもあります。ので、簡単なHTMLであれば「何となく」馴染みがあるものもあります。体系的なHTML/CSS学習により、その「何となく」のことが「明確に」なっていくプロセスはとても新鮮で、脳への刺激にもなります。

今回のプログラミング学習では、こんな感じの簡単サイトをつくりました。

 

私が取り組んでいるのは「Webアプリケーション開発」ができることを目指すWebコースのカリキュラム。時間は目安。赤字は現在までの進捗状況。① 準備(4時間)→終了
② HTML/CSS(11時間)→5時間まで終了
③ Ruby(11時間)
④ Rails(25時間)
⑤ 応用

ここまではオンライン学習&質問で内容は理解できました。でも、これからの段階はカリキュラム内容をより効率よく消化するため、教室での自習と直接メンターへの質問を重ねていく必要があるだろうと考えています。

(補足)

学習が進むにつれコードが大量になってきています。そこで、「PC画面上の学習用コードは手打ちではなくコピペでもよいのか」という極めて素人な質問をオンラインで投げかけました。メンターの方からはすぐに返信がありました。

そのメンターの方の個人的な意見は、全体理解に努めている際はコピペでもよい。ただ、学習用コード全体のコピペではなく、ハイライトされている部分のみをコピペ対象とするのが良いだろう。なぜなら、そうすることによって自分がどのコードを変更/追加し、それによりどのような変化があったということが実感できるため。

この回答が私の腑に落ち、頭の中のモヤモヤも取れスッキリしました。細部ではなくまずは全体理解に努めること。プログラム初心者である私が意識していかねばならないことです。