【めちゃくちゃ便利！】初めての 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すげえってなりました。なんか何もわからずデザイン入れてる感がなくて、理解しながらデザインを見られるので、とても面白いです。