読者です 読者をやめる 読者になる 読者になる

IT omoe

ITのこと知らないんですけどIT関連のことを気ままに綴ります

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

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

Bootstrapとは

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

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

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

導入

Bootstrapの公式サイトから「Download Bootstrap」をポチポチすると,zipファイルがダウンロードされます.それを自分の開発したいところで解凍してやります.
f:id:ottosan84:20161005115334p:plain:w400
こんな感じ.後はこれらを適応したいHTMLなどにリンク付けてやるだけです.

参考になったサイト

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

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

できたもの

これです
f:id:ottosan84:20161005164417p:plain:w600
利用したBootstrapの機能は,

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

など.正直なところスライドとかそんなに必要性ないんですけど面白くて入れてしまいました.
スマホで見るとこんな感じ.
f:id:ottosan84:20161005165450j:plain:w200
簡単にレスポンシブデザインができちゃうんです.
今までBootstrapをいうものの存在は知っていたのですが,あまり詳しく知りませんでした.今回の件で「めっちゃ便利やん!!」となったのでしばらくBootstrap信者になってそうです.