Bootstrap | kinoblog 初心者エンジニアブロガーの成長記録！ https://kinonoteblog.com Sun, 12 Jul 2020 13:07:05 +0000 ja hourly 1 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS https://kinonoteblog.com/programming/30days-bootstrap-2 https://kinonoteblog.com/programming/30days-bootstrap-2#respond Thu, 21 May 2020 04:51:43 +0000 https://kinonoteblog.com/?p=2143   こんにちは、 キノ(@zB75pWavnhDTIxr)です。 前回の続きをしていきます。↓   DAY15. 『Bootstrapを使ってビジネスLP制作③』 DAY16. 『Bootstrapを...

The post 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

]]>  

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

前回の続きをしていきます。↓

【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS

2019年6月6日

 

DAY15. 『Bootstrapを使ってビジネスLP制作③』

DAY16. 『Bootstrapを使ってビジネスLP制作④』



DAY15はちょうど折り返し地点です。

動画の59:00まで

長いですね。

でも、踏ん張りどころです！

 

前回と同じクリエイターなので、要領は分かっていると思いますが

あえてここでいっておきます。

キノ

英語は無視していいと！

 

 

動画の59:00～最後まで

前回と今回でBootstrapは完璧に理解しました。

LPを２本作ったんですよ！

キノ

しかも、手打ちで！これは誇っていい！

（実際は、①Bootstrapの公式を見て、コピペする。

②用途に合わせて自分が作ったclassやidを付与してアレンジしていきます）

 

DAY17. 『HTML5/CSS3/Bootstrap4の復習』

復習です！

ココ、大事なところです。

でも、ちょくちょく休憩していいですよ。難所はもう越えたので！

ここまでよく頑張りました！

Bootstrap Editor

Bootstrapを慣れるために、Bootstrap Editorをおすすめします。

これは、Bootstrap に慣れるために使えるツールです。

セーブやダウンロードできるので、自分が作った型を保存するのに便利！

 

Bootstrap Editorのメリット

・日本製ツールだから分かりやすい！

・インストールやログインなし！

・セーブやダウンロードできる！

・自分のエディターで動作確認する前に試し打ちができる

Bootstrapの本はこの1冊で十分！

さらにBootstrapを極めたい人はこちら↓

Ｂｏｏｔｓｔｒａｐ４フロントエンド開発の教科書 ウェブ開発の知識とコツをしっかりマスター /技術評論社/宮本麻矢
posted with カエレバ
楽天市場
Amazon

終わりに

 

お疲れさまでした！

これでBootstrapは完璧です。

いつでも公式サイトを見て慣れてください。

Bootstrap公式

 

こちらもおすすめ↓

 

Skill Hacks　評判

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

]]> https://kinonoteblog.com/programming/30days-bootstrap-2/feed 0 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS https://kinonoteblog.com/programming/30days-bootstrap https://kinonoteblog.com/programming/30days-bootstrap#respond Thu, 06 Jun 2019 04:00:06 +0000 https://kinonoteblog.com/?p=893   こんにちは、 キノ(@zB75pWavnhDTIxr)です。   11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。 個人的にBootstrap編は楽し...

The post 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

]]>  

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

 

11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。

個人的にBootstrap編は楽しかったです（英語抜きにすれば）。

というのも僕はBootstrapを以前から学んでいるんですよ↓。

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

 

少年A
なんでBootstrapを勉強するんだ？

 

それはですね

Bootstrapを学んでおけば、ボタンとか、ナビバーとかが簡単に実装することができるからです。

プログラマーやエンジニアが

余計な負担をかけずにコーディングをしたいと思っています。

そんなとき、Bootstrapを使えば負担が急激に減るでしょう。

 

詳細は下記に↓

 

 

Bootstrapってなんなの？

 

さて、そもそもBootstrapとは何でしょうか？

元々はあのTwitter社が開発したCSSフレームワークです。

 

フレームワークとは

ボタンを思い浮かべてください。

皆さんが思い浮かべているボタンは、デザインが変わっているだけで、

基本的な機能は大きな違いはないと思います。

 

「ボタンがあってそれを押すと何かが起動する」って感じです。
こんな皆さんが思っている当たり前なことをHTMLで１からコーディングするのって面倒くさいですよね。

フレームワークはそれを解決してくれるありがたいものなんです。

「ボタンがあってそれを押すと何かが起動する」
この「ボタンがあってそれを押す」ところをCSSを使わずに実装することができます。

フレームワークは以下の言い換えることができます。

フレームワーク
骨組み、テンプレート、雛形、….etc

どうでしょうか。イメージつきましたでしょうか？

 

テンプレートがもうすでにあって、僕たちはテンプレートに装飾するだけでいいんですよ。

Bootstrapは数あるwebフレームワークの中で最も選ばれているフレームワークです。

DAY11. 『Bootstrapの基本を学ぼう』

DAY12. 『Bootstrapでレイアウトを作ろう 前編』

DAY11. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍

ドットインストールで『Bootstrap 4入門』を観て勉強しましょう！

ドットインストールはProgateよりも教材数が多く、

無料の枠でも学べることが多いので今後もお世話になると思います。

ブックマークを推奨します！

 

次はGridレイアウトです。

現在では、パソコンじゃなくスマートフォンやタブレットで見る人が増えました。

Gridレイアウトはスマートフォンやタブレットの幅に合わせてくれるものです。

これも、Bootstrapで簡単に作れちゃうんです。

 

初心者がよくやるミス

 

CSSとBootstrapを読み込む時、

必ずCSSは下に置くこと、

なぜならどのプログラム言語やマークアップ言語でも、上から下に読み込むからです（これを順次処理と呼びます）。

例として、僕はCSSはタイトルの下に配置して置くと決まっています。

 



　　　　　　　　　　　　　　　　　　（中略）
　　
　　 sample　file
　　

 

これがもし逆ならCSSがBootstrapに上書きされてしまいます(これを順次処理といいます)。

基本的にCSSは下に配置して置くのが無難です。

DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①

DAY14. 『Bootstrapを使ってビジネスLP制作②



３日間続いたドットインストールで『Bootstrap 4入門』レッスン#16〜#22クリアです！！

 


YouTubeで英語の動画を観てコーディングです。


DAY13. 動画の39:00

DAY14.最後まで

 

少し長いですが、

ただ観たままコーディングするだけなので（英語は無視で、じゃないと疲れます）、

「海外でも、同じなんだ」という感想を持っていただければこの課題は完了です。

 

急に理解できなくても、大丈夫です。

使っていくうちに慣れていきますから。

終わりに

お疲れ様でした。

containerクラスとrowクラス、text-centerクラスはよく使うので自分でググって理解するのをおすすめします。

Bootstrapは、

「あるクラスは既に修飾されたものがあって、自分がCSSに何も書かなくてもいいんだ！」という理解で大丈夫です。

 

では、また

ここまで読んでくれてありがとうございました。

次回はこちら↓

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

2020年5月21日

こちらもおすすめ↓

Skill Hacks　評判

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

]]> https://kinonoteblog.com/programming/30days-bootstrap/feed 0