おはこんばにちは、ミヤビです。
さて今回は、『Bootstrapを使ってビジネスLP制作②』ということで、DAY13.の続きです。
DAY14. 『Bootstrapを使ってビジネスLP制作②』
今日でデイトラ開始から2週間です‼️初めてコードに触れてから2週間でここまで来たって本当にすごい🎉
デイトラはまだ続きますが、まずは2週間お疲れ様でした☺️今日の課題はこちら👉https://t.co/MYofuAxODM#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/4uVLGokcm2
— ショーヘー@Webエンジニア (@showheyohtaki) January 19, 2019
✔︎本記事の内容
- DAY14.『Bootstrapを使ってビジネスLP制作②』の解説
✔︎30DAYSトライアル1stの最終目標
- 月5万を稼ぐスキルを目指す
- 未経験からWEB系エンジニアの転職を目指す
- 未経験からWEB系ノマドエンジニアを目指す
わずか2週間という期間で、ランディングページが完成できることは驚きですよ。
基本的には、、、
- HTMLを記述
- divタグにBootstrapで用意されているclassを記述
- CSSでデザインを施す
初めてのチュートリアルを使ったLP制作なので、わけわかめ状態かと思いますので、3週はして慣れましょう。
1周目は「よくわからないな〜」といった感じですが、2周目になると「あっこれ前に見たことあるな、もしかしてこれってこういうことなのかな」と感じられるようになります。
そして3周目とやっていくうちに、「そうか、こうゆうことか」と腑に落ちる瞬間に出会えるハズです。
Progateやドットインストールでも同じなのですが、ある程度繰り返し学習する必要があります。
とはいえ、暗記は不要なので何周もする必要はなくて、ググれば解決できます。
BootstrapでLP制作を完成させよう
英語は字幕表記、再生速度を落として学習することをオススメします。
コーディングでよくありがちな凡ミス
🔽英語のスペルミス
🔽CSSの{ }の閉じ忘れ
🔽divタグを閉じる位置
🔽全角スペースを入れてる
🔽コロン( : )とセミコロン( ; )のミス1文字でもミスってるとバグるので、スペルミスをまずは見直そう😌#駆け出しエンジニアとつながりたい #30DAYSトライアル
— ミヤビ@saitama (@Kiyomasa0181064) March 8, 2020
上記のとおり、写径をする上でよくありがちなミスです。
バグってる原因は、たぶんスペルミスが一番あり得るハズです。
これが単純に一番多いです。
とはいえ、DAY8.の環境設定編で解説した、10個のVSCode拡張機能とEmmetでミスは極力減らせるので、焦らずゆっくりと作業しましょう。
VSCodeの「Go Live」機能を使いつつ、セクションごとに区切りをつけて、バグってないか確認しながら進めましょう。
バグってれば、その前の段階でミスってるハズなので、時間の節約にもなります。
Bootstrapのクラス名【必須】
ありがちなBootstrapのクラスです。
- container-fluid 画面サイズに合わせて流動的にリサイズ
- text-center 中央寄せ
- hr 水平線
- mx(y)-数字,px(y)-数字 paddingやmarginをx方向、y方向にいくつ付けるか
- display-数字 見出しの大きさ
この他にも様々なクラスがありますが、Bootstrap移行ガイドを参考に学習して行きましょう。
というわけで、今回はここまで。
次回は、YouTubeでのチュートリアル学習の2回目になります。
しかしこの辺りから、むずかしいなーと感じることが多くなりますので、そんな時は一人で抱え込まないことです。
ネットには先人の声がゴロゴロ転がっています。
その中でも、アルパカさんはわかりやすいので、ぜひ参考にしてみてください。

