【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」などの基本的なコードが定義済みになっていますので、定義済みの内容を利用すれば制作も素早く進みそうです。

関連記事

森のなかま藤枝様WEBサイトの制作

ペレットストーブ・木質燃料の販売の「森のなかま藤枝」様のWEBサイトの制作いたしました。 ペレットショップ「森のなかま」は、2002年から地域の環境や自然、森林、エネルギーに関わる仲間があつまり活動してきた「静岡森林エネルギー研究会」の店舗として2015年に浜松市天竜区に開...続きを読む

2018.11.30WEBサイト制作

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー

魚時会館おさかな亭様WEBサイトの制作

藤枝市にある『魚時会館おさかな亭へ』様のWEBサイトの制作いたしました。魚時会館おさかな亭様は、藤枝駅より徒歩3分。昭和8年創業の老舗魚屋の目利きによる上質な海鮮料理、和食など静岡名物や料理を提供しおります。静岡県藤枝市で宴会・出前・法事・仕出し弁当のことなら魚時会館おさかな...続きを読む

2018.09.04WEBサイト制作

【フォト】第41回金比羅山・瀬戸川桜まつり

2019年3月25日(月)~4月7日(日)に開催された第41回金比羅山・瀬戸川桜まつり。藤枝市の中心を流れる瀬戸川沿いの両岸と金比羅山は、約800本以上ものソメイヨシノがあり、桜の名所として知られています。今年の桜の開花は4月に入ってからが満開でした。今回撮影したのは、夕暮れの瀬...続きを読む

2019.04.15フォトギャラリー

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー