こんにちは、
11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。
個人的にBootstrap編は楽しかったです（英語抜きにすれば）。
というのも僕はBootstrapを以前から学んでいるんですよ↓。
【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】
それはですね
Bootstrapを学んでおけば、ボタンとか、ナビバーとかが簡単に実装することができるからです。
プログラマーやエンジニアが
余計な負担をかけずにコーディングをしたいと思っています。
そんなとき、Bootstrapを使えば負担が急激に減るでしょう。
詳細は下記に↓
Bootstrapってなんなの？
さて、そもそもBootstrapとは何でしょうか？
元々はあのTwitter社が開発したCSSフレームワークです。
フレームワークとは
ボタンを思い浮かべてください。
皆さんが思い浮かべているボタンは、デザインが変わっているだけで、
基本的な機能は大きな違いはないと思います。
「ボタンがあってそれを押すと何かが起動する」って感じです。
こんな皆さんが思っている当たり前なことをHTMLで１からコーディングするのって面倒くさいですよね。
フレームワークはそれを解決してくれるありがたいものなんです。
「ボタンがあってそれを押すと何かが起動する」
この「ボタンがあってそれを押す」ところをCSSを使わずに実装することができます。
フレームワークは以下の言い換えることができます。
どうでしょうか。イメージつきましたでしょうか？
テンプレートがもうすでにあって、僕たちはテンプレートに装飾するだけでいいんですよ。
Bootstrapは数あるwebフレームワークの中で最も選ばれているフレームワークです。
DAY11. 『Bootstrapの基本を学ぼう』
DAY12. 『Bootstrapでレイアウトを作ろう 前編』
DAY11. 『Bootstrapの基本を学ぼう』
デイトラも1/3を突破👏スゴイ🎉
ここまで来たら完走しましょ‼️
️
今日からは、最も有名なCSSフレームワークの一つ『Bootstrap』を使ったコーディングを学びます。まずは基本を抑えましょう！課題内容はこちら👉https://t.co/rYeDi2XTq7#30DAYSトライアル pic.twitter.com/hj0YCLkmfA
— ショーヘー@東フリCMO (@showheyohtaki) September 18, 2019
DAY11. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍
DAY12. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍課題詳細はこちら👉https://t.co/rQ5n0z9E2B#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/NqK4ODWLMs
— ショーヘー@東フリCMO (@showheyohtaki) September 19, 2019
ドットインストールで『Bootstrap 4入門』を観て勉強しましょう！
ドットインストールはProgateよりも教材数が多く、
無料の枠でも学べることが多いので今後もお世話になると思います。
ブックマークを推奨します！
次はGridレイアウトです。
現在では、パソコンじゃなくスマートフォンやタブレットで見る人が増えました。
Gridレイアウトはスマートフォンやタブレットの幅に合わせてくれるものです。
これも、Bootstrapで簡単に作れちゃうんです。
初心者がよくやるミス
CSSとBootstrapを読み込む時、
必ずCSSは下に置くこと、
なぜならどのプログラム言語やマークアップ言語でも、上から下に読み込むからです（これを順次処理と呼びます）。
例として、僕はCSSはタイトルの下に配置して置くと決まっています。
1 2 3 4 5 6 7 8 | <head> （中略） <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>sample file</title> <link rel="stylesheet" href="css/sample.css" > </head> |
これがもし逆ならCSSがBootstrapに上書きされてしまいます(これを順次処理といいます)。
基本的にCSSは下に配置して置くのが無難です。
DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①
DAY14. 『Bootstrapを使ってビジネスLP制作②
DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①』
DAY13はドットインストールを終わらせ、YoutubeのBootstrapチュートリアルでLP制作に入っていきます。今日は39:00まで進めましょう💻課題詳細👉https://t.co/9dNMQLnwyd#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/HFigrVbeh8
— ショーヘー@東フリCMO (@showheyohtaki) September 20, 2019
３日間続いたドットインストールで『Bootstrap 4入門』レッスン#16〜#22クリアです！！
DAY14. 『Bootstrapを使ってビジネスLP制作②』
今日でデイトラ開始から2週間です‼️初めてコードに触れてから2週間でここまで来たって本当にすごい🎉
デイトラはまだ続きますが、まずは2週間お疲れ様でした☺️今日の課題はこちら👉https://t.co/MYofuAgdfc#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/egop0cdNlz
— ショーヘー@東フリCMO (@showheyohtaki) September 22, 2019
YouTubeで英語の動画を観てコーディングです。
DAY13. 動画の39:00
DAY14.最後まで
少し長いですが、
ただ観たままコーディングするだけなので（英語は無視で、じゃないと疲れます）、
「海外でも、同じなんだ」という感想を持っていただければこの課題は完了です。
急に理解できなくても、大丈夫です。
使っていくうちに慣れていきますから。
終わりに
お疲れ様でした。
containerクラスとrowクラス、text-centerクラスはよく使うので自分でググって理解するのをおすすめします。
Bootstrapは、
「あるクラスは既に修飾されたものがあって、自分がCSSに何も書かなくてもいいんだ！」という理解で大丈夫です。
では、また
ここまで読んでくれてありがとうございました。
次回はこちら↓
こちらもおすすめ↓
にほんブログ村へ
