【現在3000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

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

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

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

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

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

前回の記事はこちら↓

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

Bootstrapを学習する

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

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

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

 

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

  1. ドットインストールでBootstrapの基本を抑える
  2. YouTubeのチュートリアルを見ながらビジネスLPを作る

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

 

DAY11~13. ドットインストールでBootstrap学習

Bootstrap学習編

DAY11.『Bootstrapの基本を学ぼう』
DAY12.『Bootstrapでレイアウトを作ろう 前編』
DAY13.『Bootstrapでレイアウトを作ろう後編+BootstrapでビジネスLP制作①』

マークは4h、それ以外は2hが目安

Bootstrapの基本を学ぶため、ドットインストールの『Bootstrap 4入門』コースのレッスン#01〜#22を3日間で完了させましょう!1日7レッスンずつのペースで進めればOKです👍
DAY13は、ドットインストール完了後にそのままYouTube学習に入りますので、次のセクションをご覧ください!

ドットインストール Bootstrap4入門

※動画を見るだけじゃなく、必ず自分でもコーディングしてください!

 

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

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

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

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

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

 

Tips2. Emmetの復習(ドットインストール#13~#15をもう1周しよう)

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

ドットインストールの動画では、解説のためにあえてタグを手打ちしてくれてますが、そこまでマネする必要ないですからね。

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

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

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

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

 

読み終わったら、Emmetのチートシートを見ながらでいいので、ドットインストール#13〜#15をできる限りEmmetを使って書くことを意識してもう1周しましょう。

Emmetチートシート

 

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

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

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

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


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

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

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

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

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

 

 

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

Bootstrap学習編

DAY13.『Bootstrapでレイアウトを作ろう後編+BootstrapでビジネスLP制作①』
DAY14.『BootstrapでビジネスLP制作②』
DAY15.『BootstrapでビジネスLP制作③』
DAY16.『BootstrapでビジネスLP制作④』
DAY17.『HTML5/CSS3/Bootstrap4の復習』

マークは4h、それ以外は2hが目安

ドットインストールでBootstrapの使い方を覚えました。次は

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

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

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

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

 

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

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

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

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

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

ドットインストールのBootstrap講座では、BootstrapのみでLPを作りましたが、この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を作ってみましょう!

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

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

ただ説明どおりに写経コーディングするだけでは、いざ自分で考えて作る段階になると手が動かないものです。(Progate道場編で経験ある方も多いはず!)

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

もし学習時間を十分に取れる人は、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つ↓

 

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

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

 

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

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

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

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

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

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

 

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

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

それでは!

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

コーディングカテゴリの最新記事