シニアIT化ブログ

文系50代管理職がIT人材を目指してイチから学ぶ奮闘記

【学習5日目】HTML&CSS初級編 レイアウトを学ぶ

8月12日水曜日

今日は在宅勤務を活用して日中にプログラミング学習。

東京も過酷な猛暑となっているので在宅はありがたい…

 

学習5日目は引き続きProgateで、メインコンテンツ部分に枠線だったり余白を設定するなどの内容です。

 

先ずは枠線(border)の付け方

f:id:makken1968:20200812173636p:plain

太さ・種類・色をそれぞれ指定、と。

 

チュートリアルの後には実際にコードを打ち込む画面になります↓

f:id:makken1968:20200812173939p:plain

左画面にコードを打ち込むと右側のプレビューに表示されます。その下の見本と同じ様になれば正解。

おっかなびっくり、学習したメモを見ながら打ち込んで行きます…

が、えてして間違います。

 

この場合は、28行目を<h3 class="section-title">学べるレッスン</h3>とすれば正解。

h3要素にclassを付けられるのが分からず、やむなく答えを見つつの進行でした。しかもtittleなるスペルミスもしててやれやれ。

歳を取ると老眼で見えにくい汗

f:id:makken1968:20200812174651p:plain

正誤表で教えてくれるのはホント、ありがたいです。

しかし、親切設計ですなぁ〜

 

その後は余白を付けたり

f:id:makken1968:20200812175019p:plain

余白の種類(margin>border>padding)の概念を学んだり

f:id:makken1968:20200812175134p:plain

これはわかりやすくて助かりました^^

 

大体ここまでで1時間ちょっと。

今日の結果はこちら↓

f:id:makken1968:20200812175644p:plain

少し前進!

f:id:makken1968:20200812175647p:plain

初級編も後少し。

これで一通りのHPのコードが描ける様になりますね。

もうちょっと早く進めたいけれど、残念ながら頭が追いつきませぬ^^;

這いつくばりながら、根性で!

 

とはいえ、明日・明後日とまたまた出張…

どっかで勉強できれば良いなぁ。

頑張ります。