【30DAYSトライアル1st】Bootstrap編

30DAYSトライアル bootstrap編Web Development
2020.10.16

30DAYSトライアル bootstrap編

2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」のBootstrap編（Day11からDay17）の課題をまとめた記事です。

DAY11からDAY17ではCSSのフレームワークで有名な「Bootstrap」の学習をします。環境構築編で準備したローカル環境を使い、「Bootstrap」を使ってLP作成をしていきます。

スポンサーリンク

30DAYSトライアル1st・Bootstrap編（Day11からDay17）

DAY11からDAY17ではCSSのフレームワークで有名な「Bootstrap」の基礎を学んでからLP作成をするという課題構成になっています。

ローカル環境でコーディングをしていくので、ローカル環境の設定がまだの方はDay8からDay10での環境設定編を参考にローカル環境設定を先に完了してくださいね。

【30DAYSトライアル1st】環境設定編
2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」の環境設定編（Day8からDay10）の課題をまとめた記事です。 Day8からDay10では自分のパソコン内でコードを書ける環境を整えるので、自分のパソコンがあればコーディング作業ができるようになります。
yaponkalog.com

Day11: Bootstrapの基本を学ぶ

Day11の課題

 

Day11の感想

私は英語学習者でもあるので、課題②とおまけ課題の公式レファレンスを読むというのを日本語ではなく英語の文書を読みました。

英語でも読みたい！っていう方は、ページの右上に言語を切り替えられるドロップダウンがあり英語に簡単に切り替えられるので、試してみて下さい。

Day12: Bootstrapでレイアウトを作る

Day12の課題

 

Day12の感想

ドットインストール課題の「特徴セクションのレスポンシブ対応」が個人的にとても感動しました。

classにorder番号をつけてあげるだけでPCでの表示の時と、スマートフォンでの表示に違和感を無くすことができます。

Bootstrapの公式文書ではうまく理解できなかったのでググった結果、ここのページの解説で理解することができました。（ご参考までに）↓

stackoverflow.com

Day13: Bootstrapでレイアウトを作る（続き）& ビジネスLP作成①

Day13の課題

課題の動画はこちらです↓

 

Day13の感想

ドットインストールでのBootstrap基礎学習が完了して、ついにLP製作になったのでとってもワクワクしました。

動画の始めの6:50までは完成ページの紹介と、スターターキットの中身の紹介があります。

また課題の39:00あたりまでやるとGIFのセクションまで作れます。

ちなみに、スターターキットは動画概要欄内の「➢Tutorial Starter Files:」の下にあるURLからダウンロードできますよ。

Day14: ビジネスLP作成①（続き）

Day14の課題

 

Day14の感想

動画の54:55あたりまででBootstrapを使用したHTMLのコーディングが完成し、その後CSSでデザインを整えていきます。

navbarのpaddingを整える時に「rem」と「em」の説明をしてくれているのですが、私はそれたけでは理解できなかったので「rem」と「em」に関しては要勉強と感じました。

Day15: ビジネスLP作成②

Day15の課題

課題の動画はこちらです↓

 

Day15の感想

LP製作2件目。

動画の始めの11:00あたりまでは完成ページの紹介と、スターターキットの中身の紹介があり、課題の59:22までやるとResourcesのセクションまで作れます。

今回のスターターキットは前回のと比べるといろいろ入ってて、Fixed backgroundのためのCSSがCSSフォルダーに既に用意されていたりします。

スターターキットは前回の動画と同様に、動画概要欄内の「➢Tutorial Starter Files:」の下にあるURLからダウンロードできます。

また私は、LP作成①でもLP作成②でも文章を入れる部分はダミーテキストを使いました。

Day16: ビジネスLP作成②（続き）

Day16の課題

 

Day16の感想

1:11:50あたりまででBootstrapを使用したHTMLのコーディングが完成し、その後CSSでデザインを整えていきます。

たった2日でこんなに素敵なLPが作れちゃうなんて感動です。

個人的にDAY15とDAY16で作成したLPの雰囲気が好きなので写真を替えて、色を替えて自分のオリジナルのLPを作ってみたいと思っています。

Day17: DAY13からDAY16までの復習

Day17の課題

 

Day17の感想

DAY13からDAY16の復習ということで具体的な課題が出なかったDAY17。

私は「Bootstrap」を使ってやってみたかったウェブサイト模写にチャレンジしました。

トライしたのはAirbnbのギフトページです。Navbarの実装が難しくて、ほどほどの完成度で次に進みました。

結果として、Navbar部分とfooter部分は完璧にできませんでしたが、他の部分は見本ページと同じ見た目にすることができました。

Navbar部分の理解がかなり甘いことが再確認できたので、要勉強ですね。

自分で課題を見つけてチャレンジしてみると新しい発見があるので自主的にチャレンジするのは大切ですね。

おまけ

「Bootstrap」を実務で使う時に覚えておきたいことがツイートされていたので、乗せておきます。

まとめ

プログラミングに加え、英語学習者の私にとって英語の動画を観てプログラミングを学ぶというのは一石二鳥でとっても良かったです。

わからないことがあってググる時や公式文書などは積極的に英語を使うと英語の勉強にもなりますし、英語のほうが情報量多いので、英語を使って調べるのがおすすめです★