【Bootstrap】テンプレートを使い作成するレスポンシブサイト

bootstrap-responsive-site-design

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。

テンプレートデータのダウンロード

『Bootstrap』は、こちらの公式サイトからダウンロードができます。基本セットの他に、ドキュメント、HTMLのサンプルソースなどが公開されています。

ライセンスについて

『Bootstrap』は、『Apache 2 license and is copyright 2013 Twitter. 』とされています。

「Apache 2 license」については、全ファイルへのライセンス表示は必要なく、リファレンスのみでよい。また、頒布される二次的著作物が同じライセンスで提供されたり、フリーソフトウエア、オープンソースソフトウェアとして頒布されることを要求しない。要求するのは、ユーザーがそのソフトウェアにApache Licenseのコードが使われていることを知らせる文言を入れることだけである。ライセンスされたファイルそれぞれに元々ある著作権と特許権の記述はそのまま保持し、修正がある場合は、その旨を追加記述をする。

wikipediaより一部引用:http://ja.wikipedia.org/wiki/Apache_License

ダウンロードした『Bootstrap』のる著作権と特許権の記述はそのままにして、可変なく使用すればOKというライセンスみたいですね。

ダウンロードファイル

『Bootstrap』は、以下のファイルで構成されています。HTMLのページデータは含まれていないので、サンプルテンプレートなどを参考に独自で構築します。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

制作の注意点

『Bootstrap』は、古いInternet Explorerの互換モードではサポートされていないので、最新のレンダリングモードで表示できるように配慮が必要です。

※「IE=edge」と指定することで、Internet Explorer 8 に対して、利用できる最も互換性の高いモードを使用するよう指示できます。

<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >

『Bootstrap』のレスポンシブ対応は、主に「max-width」や「min-width」の横幅で識別しているので、「max-width」や「min-width」の表示対応ができていないIEのバージョンでは機能しなくなってしまいます。

古いInternet Explorerでもレスポンシブ対応させたい場合は「Respond.js」などを合わさせて導入すると「max-width」や「min-width」などの表示を補うことができます。

HTMLサンプルページ

公式サイトでサンプルページのソースが公開されています。一般的なサイトのレイアウトをはじめ、画像のスライド、ナビゲーションなどサンプルソースを組み合わせるだけでもサイトを構築することができます。

グリッドレイアウト

『Bootstrap』のバージョン3からは、グリッドによってレスポンシブサイトのレイアウトを作成することができます。

Extra small devices
携帯電話
Small devices
タブレット
Medium devices
デスクトップPC
Large devices
デスクトップPC
ブラウザ表示幅 768px未満 768px~991px 992px~1199px 1200px以上
container最大幅 auto 750px 970px 1170px
Class名称 col-xs-** col-sm-** col-md-** col-lg-**
カラム数 12
カラム最大幅 auto 60px 78px 95px
カラム余白 30(左右に15pxの余白)
入れ子表示 有効
オフセット表示 無効 有効
カラム表示順 無効 有効

クラス指定で端末毎に対応する「col-xs-**」、「col-sm-**」、「col-md-**」、「col-lg-**」をそれぞれ振り分けます。「**」の値が合計で「12」になるように設定をします。

下記のサンプルの場合、768px未満は「1コラム」、768px~991pxは「3コラム」、992px~1199pxは「4コラム」、1200px以上は「6コラム」となります。


  <div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">コラム</div>
      </div>
    </div>

コーディング

グリッドシステムを基本レイアウトとして、「Typography」、「Tables」、「Buttons」、「Images」、「icon」などの基本的なコードが定義済みになっていますので、定義済みの内容を利用すれば制作も素早く進みそうです。

関連記事

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

モバイル端末の画面サイズまとめ

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機...続きを読む

2015.02.06HTMLコーディング

カフェオールドソーコ様WEBサイト制作

富士市でモチモチの生パスタと焼きたてワッフルを楽しむことができる『カフェ オールドソーコ』様のWEBサイトを制作いたしました。手書きのメニューや店内に描かれた可愛らしいイラストにあわせてWEBサイトでもイラストを沢山用いて、ワクワク感を感じられるデザインをいたしました。 ...続きを読む

2015.02.14WEBサイト制作

【JavaScript】jQuery画像スライダーのライブラリまとめ

WEBサイトのトップページなどでよく見る画像がスライダーする仕組み。jQueryライブラリと組み合わせで機能するスライダー用のライブラリをまとめてみました。 Easy Slider 左右の矢印、数字ボタンによるナビゲーションがあるシンプルな画像スライダーです。 ...続きを読む

2015.02.10HTMLコーディング

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング