Bootstrapについて - プログラミング素人の勉強記録

BootstrapとはCSSのフレームワークであらかじめ枠組みやスタイルなどがある程度決まっているライブラリです。

以前作ったホームページはCSSでデザインを1から書いてましたが、Bootstrapを使うと大元となる部分が用意されているため、格段に早く見栄えが整ったページがデザインできるとのこと。

非常に便利ですね。

またBootstrapはレスポンシブデザインに対応しているという点でも便利です。
レスポンシブデザインとはスマホやタブレット、デスクトップなどそれぞれの画面サイズに合わせて横並びにしたり縦並びにしたりを自動的に調節してくれるデザインです。

通常デスクトップ用とスマホ用のデザインは別々に作らなきゃいけないがBootstrapなら手軽に出来てしまいます。

これは本当に便利だ…

Bootstrapを使うためにはまずHTMLでBootstrapを読み込んであげる必要があります。

Bootstrapのホームページでファイルをダウンロードして所定のディレクトリに保存します。

次にHTMLのhead部分に以下の文を追加します。

<head>
    <meta charset="uft-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>うさげのカレーサイト</title>
    <meta name="description" content="様々な種類のカレーについて紹介しているサイトです。">
        <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
</head>

ちなみに「meta name="viewport" content="width=device-width, initial-scale=1"」はレスポンシブデザインを使うために必須のmetaタグだそうです。

ここのポイントとしてBootstrapのJavaScriptよりも先にjQueryを読み込みます。

そうしないとBootstrapのJavaScriptが作動しなくなってしまいます。

これでBootstrapを使う準備が整いました。

基本的なデザインの仕方としてはそれぞれのタグに適用させたいデザインのクラスをつけるだけです。

例えば

<p class="h1">あいうえお</p>
<p class="h2">ABCD</p>

という風にすると一般的に「h1」タグや「h2」タグを使ったように見出しが作れます。

ではコンテンツのレイアウトをしてみます。

Bootstrapでは横幅を12等分したグリッドシステムというものを利用してレイアウトしていきます。
例えば8：3の２カラムや、3：3：6の３カラムのページなども作成できます。

グリッドシステムを利用する流れとして

・container（コンテナ）クラスまたはcontainer-fluidクラスでレイアウトしたいコンテンツを囲む
・コンテナの中で１行にまとめたい部分をrowタグで囲む
・col-[prefix]-[数字]クラスでカラムの設定をする

「container」はページの基礎シートとなる要素でBootstrapの各要素はコンテナの中に記述します。
ページ全体を囲むとページが真ん中に来ます。
またウィンドウを縮めたりするとわかりますが、横幅に合わせて段階的に横幅が変動します。

「prefix」の値は4種類ありそれぞれの画面の大きさに沿ったものを指定するとその画面以下になったときにレイアウトが変更されます。
この切り替わりのポイントをブレイクポイントといいます。

・「xs」…スマホサイズ（767px以下）
・「sm」…タブレットサイズ（767px～991px）
・「md」…PCサイズ（992px～1119px）
・「lg」…大画面PCサイズ（1200px以上）

例としてタブレットサイズ以上で8：4の２カラムで表示する場合以下になります。

<div class"container">
    <div class="row">
        <div class"col-sm-8">あいうえお</div>
        <div class"col-sm-4">かきくけこ</div>
    </div>
</div>

結果として左に8の幅で「あいうえお」と、その右に4の幅で「かきくけこ」とレイアウトされます。

また、カラムとカラムの間に空白を入れることもできます。

<div class"container">
    <div class="row">
        <div class"col-sm-8">あいうえお</div>
        <div class"col-sm-4 col-sm-offset-4">かきくけこ</div>
    </div>
</div>

こうすることで4の幅で左に「あいうえお」、間に4の幅の空白ができて再び4の幅で「かきくけこ」と表示されます。

このほかにも表のデザインをしたりボタンのデザイン、ナビゲーションのデザイン、Javascriptを使って動きをつける等様々なことが簡単に実現できます。
こちらのサイトにBootstrapの要素や使い方がいろいろ載っているので参考にしてみます。
http://www.tohoho-web.com/ex/bootstrap.html

ひとまずこれから以前作ったホームページをBootstrapを使ってデザインしてみたいと思います。