Bootstrapとは

目的

Bootstrapとはなんなのかをまとめる

この記事のターゲット

• Bootstrapと言う言葉を聞いたことはあるがなんなのかわからない方
• Bootstrapで具体的に何ができるか知りたい方
• CSSでいちいち設定を行うのが面倒な方
• Webページ作成時間を短縮したい方
• Webページを作ってみたいがheaderのイメージが決まらな方
  ※実際の詳しいBootstrapの使い方はたくさんの先駆者の皆さんが取り上げているので自分は詳しくはまとめないことにする
  ※本記事を読んで｢ふーん、Bootstrapってこんな感じのものなんだなー、使ってみようかなー｣となっていただければ幸い

Bootstrapを簡単に言うと

• よく使う設定が既に定義されている便利なもの。
• いちいちCSSファイルで背景色などを設定しなくても良い。
• かっこいい見た目のリストを作れるテンプレートが沢山ある。
• Bootstrapの公式サイトからプレビューを見た上でテンプレートをコピー出来る
• ただ、全ての設定が定義されてる訳では無いので自分でもCSSを書く必要がある

使ってみよう

こちらからBootstrapの日本語リファレンスをのぞいてみよう

1. 新規ファイルとして「index.html」という名前のファイルをPCの任意の場所に作成する。
2. 「index.html」を エディタで開く。
3. ドキュメント → 中央付近に記載のある「スターターテンプレート」に記載されているHTMLファイル用のテンプレートをコピーしてエディタで開いた「index.html」に張る。
4. 保存して「index.html」をダブルクリックする。
   ※この時エディタは開いていてもOK
5. ブラウザ画面が起動し「Hellow, World!」と表示されたことを確認する。
6. エディタで開いた「index.html」のbody要素の中のh1要素にclassを作成しクラス名を「bg-primary」とする
7. 保存して「index.html」をダブルクリックする。
8. ブラウザ画面が起動し「Hellow, World!」と表示されている背景色が青色に変化する。

※このほかのBootstrapでの設定は日本語リファレンスで閲覧可能である。
※背景色などの設定はドキュメント → 左側のサイドバーのユーティリティ → 左側のサイドバーのColorsから確認できる

まとめ

1. Bootstrapの設定を反映したいときはクラス名で指定する。
2. ドットインストールやQiitaでもより細かい使い方やテクニックがまとめられている。
3. Bootstrapを活用することにより素早いコーディングか可能となる。