tachimugi’s diary

30歳主婦プログラミング初心者が学んでいく記録

【DAY12】「Bootstrapでレイアウトをつくろう　前篇」をやってみた（30DAYSトライアル）

むぎです。

 

 

■30DAYSトライアル　DAY12.をやります！

 

本日はデイトラ12日目の課題をやります！

 

 

 

■デイトラ12日目の 課題①：ドットインストールでBootstrap学習２

 


基本編の今日は、ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15まで

※ドットインストールの講座リンクはこちら

  

 

 

 

■ドットインストール　Bootstrap4入門　#10～15

■ドットインストール#10で、さっそく分からない…！

アプリサイトをつくる段階に入っていきました。

しかし…！意味が…！わからない…！どうしよう。

 

こちら、ヘッダーのCSSです。

 

<header>
<div class="cover text-white text-center py-5">
<h1 class="display-4 mb-4">Dotinstall App</h1>
<a href="" class="btn btn-primary btn-lg">Get It Now!</a>
</div>
</header>

 

HTMLでh1クラスにdisplay-4 mb-4と記述しているのですが、display-4って何？マージンボトム4て何？数字変えてみたけどよくわからない…。

 

ここは質問ポイントかな…。

もう少し様子を見てみます。

 

ここで

アレ？これなんだっけ？→考えるも分からず→ググる→わからない→ぽけーっとしてしまう。

ああ、そうだった、分からないフローってこうだったよなぁ…。としみじみ勉強につまづいたときのことを思いだすのでした。

たぶんこれはBootstrap独特のタグだと思う…

今までの仕事なら、分からないときに聞く人がいたし、あいまいなことは決定権があったのに。こう、ルールが決まっているけど理解できていない、と言うことに対するこのストレスを久々に感じました。

 

→上記の内容、講座を振り返ったらきちんと#05あたりで解説されていました。

https://dotinstall.com/lessons/basic_twitter_bootstrap_v5/43006

いかに身についていないかが分かります…涙

 

■Bootstrapのチートシート

Bootstrapにはチートシートがありコピペして使用すると使いやすいとのこと。

ショートカットコードや、Emmetのチートシートは印刷して手元に置いていますが、Bootstrapはブクマの方がやりやすそうですね…

 

Bootstrapのチートシート

 

 

 

■デイトラ12日目の 課題②：Emmetの復習

 

Emmetという超絶便利プラグインのおさらいです。

ショーへーさんのツイートでははにわまんさんのサイトが紹介されていました。

 

 

haniwaman.com

 

 

そして、Emmetのチートシートを印刷してファイリングしました。

これでVSCodeのショートカットキーと、Emmetのチートシートはいつでも手元で見られます…！

 

■Emmetを意識しながら、ドットインストールの#13～#15をおさらい復習

あの…Emmetすごいですね…。サクサク書けますね…。

このタイミングでこれが出てくるのか～。

すごいサクサクかけて感動レベル…。

 

2回やると、だいぶスムーズに頭に入ってきますね。

短時間の間に復習するのはこんなに理解度が深まるんだな～と、復習の威力にも感動。

 

 ■デイトラ12日目の作業報告

 

作業時間：3時間

累計作業時間：29時間

 

■デイトラ12日目終わっての一言

 

久々にしっかり時間が取れたので、4時間ぶっ続けでやりました。

仕事と違って4時間の勉強とてもきついです…笑

集中力が！全然衰えているのが実感。また、分からないときの思考のストップ感！

これが勉強だったなぁ～！としみじみ実感します。

がんばるぞ～！