30DAYSトライアル1st【Bootstrapの基礎〜LP制作編】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになる30日間の学習ステップ、その中編です。

30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。

2019.03.31

30DAYSトライアル【ゼロから始めるコーディング学習】〜導入編〜

『ゼロからプログラミングを学びたい』『プログラミングを通して人生の幅を広げたい』そんな方のために、30日間でできるコーディング学習カリキュラム【30DAYSトライアル】を作りました。第一歩はこの記事から。...

前回の記事はこちら↓

2019.03.31

30DAYSトライアル1st【コーディング基礎学習〜環境設定編】

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになるための30DAYSトライアル、その前編です。ファーストステップであるこの記事では、コーディングの基礎学習〜エディタなどの環境設定までを10日間で進めていきます。...

セカンドステップであるこの記事では、Bootstrapの基礎〜動画でLP制作編までを7日間で進めていきます。

Bootstrapを学習する

これまではclass名や対応するCSSファイルは全て自作する必要がありました。

ですが、世の中には読み込むだけですぐに使える『CSSフレームワーク』というものが存在します。

Bootstrapは最も有名なCSSフレームワークの一つで、利用することでコーディングスピードが飛躍的に上がります（開発してくれたTwitter社さん、ありがとう！）

以下の順番でBootstrapの使い方を学習しましょう

1. YouTubeのチュートリアルを見ながらビジネスLPを作る

それぞれ詳しく説明していきます。

Tips1. Gridレイアウトについて調べて理解する

特にGridレイアウトはよく使うので必ず抑えておきましょう！

（Bootstrapは使わないベテランコーダーでも、Gridレイアウト用のスタイルシートだけは切り出して使うというくらい重要です！）

Gridレイアウト　公式リファレンス

↑の公式を読んでもOKですが、ググり力強化のためにも、分かりやすいと思う記事を自分で探してTwitterで紹介してみてください（たくさんありますので！）

Tips2. Emmetの復習

前回の記事で紹介したEmmetですが、使えてますか？

改めて言いますが、Emmetはコーディングに欠かせません！！

Emmetの記法を使って、どんどんコーディングを効率化して行きましょう。

「使ってなかった」という方は、こちらの記事で復習してください↓

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

Emmetチートシート

Tips3. Bootstrapの開発効率を上げる方法

Bootstrapの開発効率を上げる方法をお伝えします。

まず、コピペで使えるチートシートを手元に用意しておくと便利です。

シートを印刷してPCの横に置く、スクショをデスクトップに設定するなどして見やすいところに置いておきましょう！

Bootstrapには、様々なスタイルがclassとしてあらかじめ用意されていますので、上手く使いこなせればコーディング速度が２倍・３倍に上がります。

まずは公式の日本語リファレンスを見て、どんなスタイルがあるのか確認してみましょう。

その後、チートシートからコピペしながら、NavbarやCardを作ってみてください。

Bootstrapを使うとコーディングがどれほど楽になるか分かると思います。

リファレンスとチートシートを使いながら、欲しいパーツを即座に作れるようにしていきましょう( ^ω^ )

• Bootstrap日本語リファレンス
• Bootstrap 4 Cheat Sheet

DAY13~17. YouTubeのチュートリアルを見ながらビジネスLPを作る

次は

• Bootstrapを復習する
• 英語になれる
• 制作物を増やす

ために、YouTubeにアップされているBootstrap4のチュートリアルを見ながら、実際にビジネスLPを作っていきましょう！

以下の2本の動画を見ながら、自分でコーディングしていきます↓

• Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3
• Build A Complete HTML & CSS Website with Bootstrap 4

詳しく解説していきます。

YouTubeチュートリアル動画1本目

YouTubeチュートリアル1本目は、無料なのにとても勉強になる神動画です！

この動画を見ながら、実際にビジネスLPのコーディングをしていきましょう！

Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

※html/css/imgフォルダが入ったスターターキットがあるので、動画概要欄の『STARTER FILES』と書いてあるリンクからダウンロードしてください。

このYouTube動画では、手書きのCSSと併用しつつスタイルを整えていきます。

実務では、Bootstrap100％でサイト制作することはまずありません。

この動画のように、手書きのスタイルを付け加えたりBootstrapのクラスを上書きするなどして、Bootstrapをベースにしつつスタイルを調整するのが基本です。

つまり、より実務に近い形でBootstrapを使う練習ができる動画になっています。

ちなみに、この動画のHTML/CSSは商用利用可です（画像はダメ！）

完成したLPは、画像とテキストを差し替えてビシネスLP用テンプレートとして使用できます( ^ω^ )

Youtubeチュートリアル動画2本目

Build A Complete HTML & CSS Website with Bootstrap 4

※html/css/imgフォルダが入ったスターターキットがあるので、動画概要欄の『STARTER FILES』と書いてあるリンクからダウンロードしてください。

上で紹介した動画の作者が出している別のチュートリアル動画を見て、もう一本ビシネスLPを作ってみましょう！

動画は「見本を確認」→「コーディング」という順番で進みます。

２本目の動画は、その見本を確認するシーンで一度止めて、自分なら「どういうブロック分けをするか」「クラスを付けるか」を頭の中で設計してから再生する、という方法で進めてみてください！

ただ説明どおりに写経コーディングするだけでは、いざ自分で考えて作る段階になると手が動かないものです。

そうならないために、自分で考えて作ることを念頭に置いてコーディングしましょう( ^ω^ )

もし学習時間を十分に取れる人は、HTMLを書き上げたら一旦、自力で完成形を目指してCSSを書いてみて下さい。ちょっと手間はかかりますが、このステップがコーディング力をつける上で大事です！

この動画のHTML/CSSファイルも商用利用可です。

コーディング初心者向けの情報まとめ

以上で、Bootstrapの学習が終わりです。

かなりの量を短期間でインプットしてきたと思いますので、DAY17は復習を兼ねて、ここまでの学習内容をアウトプットしてみてください👍

次に進む前に、コーディング初心者向けに役立つ情報もまとめておきます。

Tips4. セクション単位でパーツ分けできるようになりましょう

教材の手順通りのコーディングから、自力でコーディングにステップアップするための第一歩は『セクション単位でパーツ分けできるようになること』です。

• サイトのキャプチャ取る
• 上からパーツごとに分けて赤線引く

これだけで構成力上がるのでぜひ試してみてください！

見本はこちら↓

Tips5. Bootstrapのグリッドにcontainerやrowは使わないことも多い

Bootstrapのグリッド ＝ containerとrowを使うと思われてるかもしれませんが、実務ではcontainerやrowは使わないことも多いです。
デフォルトで設定されてるmargin・paddingが邪魔なので。

.flex {display:flex;} クラスを作って親要素につけるだけでもcolは使えます。

Tips6. flexboxを理解する

flexboxを使うと、

• 要素の横並び「diplay:inline-block」
• 高さの中央揃え「vertical-align:middle」
• 右揃え・左揃え「float」

これら全てを簡単に代替できます。

オススメ記事はこちらです↓

日本語対応！CSS Flexboxのチートシートを作ったので配布します

無料のチートシートも配布されてるのでチェックすべし！

Tips7. 初心者がつまずきやすいpositionの解説

初心者がつまづきやすい『position』のわかりやすい図解です。

これ見ればpositionで悩むこともなくなるはず（必見です）

Tips8. idとclassの使い分け方について

コーディング初心者が迷いやすいのが、idとclass。

使い分けは以下の通りです

•  id：1つのHTML内で同じid名を使えない
•  class：何回でも同じclass名を使ってOK

idは1つのHTML内で一意です。

その特性を利用し、ページ内リンクにはidを使います！

参考リンク2つ↓

• 6. classとidを理解しよう
• 【HTML】ページ内リンクの作り方：記事の途中に飛ばすには？

Tips9. プログラミング関連の調べ物をする時は英語で探す

プログラミング関連の調べ物をする時は英語で探すのがオススメです。

Bootstrapの基礎〜動画でLP制作編まとめ

以上、DAY11〜DAY17までのまとめでした。

Bootstrapはコーディングの手間を大幅に短縮してくれるので、ぜひ使えるようになっておきましょう( ^ω^ )

また、『YouTubeの動画で勉強』ってあまりイメージなかったかもしれませんが、プログラミング系の学習動画はたくさんアップされてます。

英語さえ何とかなれば、有料オンラインスクールレベルのことまで無料で勉強できるので、ぜひ積極的にYouTubeを勉強に活用してみてください。

ついでに英語の勉強にもなりますからね。

リアルタイムでデイトラに参加し、毎日詳細な解説記事をあげて下さったアルパカさん（@engineeraru ）の記事もとても参考になるのでぜひ見てみてください。

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】解説まとめ #30DAYSトライアル

それでは！