Bootstrapを乱用したホームページを作ってみた

自分のホームページのデザインがイマイチだったので，何か簡単にいい感じのデザインにしたいと思ってBootstrapを使ってみることにしました．
今回はその際に参考になった色々をメモっときたいと思います．

Bootstrapとは

そもそもBootstrapとはWikipediaさんによると

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク

だそうです．
まあ簡単に言うと，決められたclassを指定するだけで，サイトに自動的にデザインが適応される素晴らしいアイテムなんです．ちなみに，Twitterの会社が作っているというのは有名な話．

導入

Bootstrapの公式サイトから「Download Bootstrap」をポチポチすると，zipファイルがダウンロードされます．それを自分の開発したいところで解凍してやります．

こんな感じ．後はこれらを適応したいHTMLなどにリンク付けてやるだけです．

参考になったサイト

個人的に参考になったサイトをあげておきます．

• ドットインストール
  だいたいの必要な知識を得ることができます．
• Bootstrapの使い方
  全ての内容を網羅しているわけではないですが，Bootstrapを使っていて，「このclass，何て書くんだったっけ〜？」ってなったときに素早く自分の知りたい内容を調べることができました．情報がよくまとまっていて，デモもたくさんあるのでわかりやすいです．
• Bootstrapの公式サイト
  英語ですが，意外とテンプレや例が豊富なので使ってみるといいかもしれません．

できたもの

これです．

利用したBootstrapの機能は，

• ヘッダー
• スライド
• パネル
• テーブル
• グリッドシステム

など．正直なところスライドとかそんなに必要性ないんですけど面白くて入れてしまいました．
スマホで見るとこんな感じ．

簡単にレスポンシブデザインができちゃうんです．
今までBootstrapをいうものの存在は知っていたのですが，あまり詳しく知りませんでした．今回の件で「めっちゃ便利やん！！」となったのでしばらくBootstrap信者になってそうです．