【めちゃくちゃ便利!】初めての Bootstrap

どうも、昨日はWordPressでブログ作れてめちゃくちゃテンション上がってるどせぜんです。

前日は生活習慣の乱れを正すために早く寝て、今日6時に起きるというおじいちゃんみたいなことしましたが、僕は元気です。

さて、SkillHacks 4日目、やってきました。

Bootstrapってなんだ?

今日はBootstrapっていうやつをやりました。そもそもBootstrapっていうのは、CSSのフレームワークで、正直なくても色々できます。

前回まではHTMLを記述していて、タグやクラスやidを割り当て、それに対応させたデザインをCSSでその都度書いていたました。しかし、Bootstrapには予めデザインが記述されているCSSがあり、Bootstrapを使えばHTMLを書いている最中にクラスやidの割り当て方でデザインを作れる、というものでした。

簡単に言えば、今まではネジや金属の板などからロボットを作り上げていってたものを、Bootstrapを使うことによって、頭、腕、胴体、足、みたいにまとまったパーツを使って作れるようになったってことです。普通に時間短縮エグい。

しかし、予め用意されているものを使うので、細部までこだわりたいとか考える人は自分でCSSファイルを書けばいいと思います。

しかしBootstrapの公式サイトには本当にいろんなフレームワークがあって、特に拘らなければ色々なサイトが作れるんだなってテンション上がります。

Bootstrapを使ってみた



Bootstrapを使うには、公式サイトにあるBootstrapのCSSの読み込みを行い、BootstrapのJavaScriptを読み込み、そのJavaScriptを動かすためのjQueryを読み込む必要があります。(あんまよくわかってない)


しかしとりあえず上記の必要なものをHTMLファイルで読み込むだけで、色とりどりのボタンや登録フォームなど、めちゃめちゃ手軽にデザインをする事ができます。




Bootstrapを使う際にちょっと注意しなければいけないのは、色の指定方法とかですね。

Default(白) Primary(青) Success(緑) Info(水色) Warning(黄色) Danger(赤)

てな感じで、ボタンの色とか指定したりする時はこんな感じで指定するみたいです。これは決まってます。

あとは、PC画面とスマホ画面での画面サイズの違いでデザインが変わるように、画面を12分割してるってとこもコンテンツのサイズ指定の時に役立ちます。



こんな感じで、今まで学んできたことをより手軽にできる方法がBootstrapということでした。ザコいのだったら量産できそうな気がすごいしてきました。迫さんすごい。

あと、WordPressでも初期設定の時とかにCSSとかHTMLの知識をちょこちょこ使ったので、SkillHacksすげえってなりました。なんか何もわからずデザイン入れてる感がなくて、理解しながらデザインを見られるので、とても面白いです。



明日からはいよいよRubyという言語を学んでいきます!!
普通にSkillHacks楽しいぞ。なんで今までやってなかった俺。


あ、あとコロナウイルスは胃酸で死ぬみたいなので、水分をこまめに取りましょう。
皆さんも、手洗いうがいをしっかりとして、お体を大事にされてください。



では、また。


〜Skill Hacksが気になった方〜

-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座