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

関連記事

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

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

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

2019.05.14フォトギャラリー藤枝

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション

【Win10】Office 2016 の一部が英語表記になり戻らない

Microsoft Office 2016 を Windows10 の環境で利用していたところ、いつの間にか、画面の一部が英語になってしまいました。リボンなどのUI部分ではなく、作業中にポップアップされる操作画面のごく一部の日本語が英語になるという半端な状態です。 修正...続きを読む

2021.01.24Windows10パソコンの使い方

【WP】シンプルなショッピングカートを導入できるプラグイン「WP−OliveCart」

今回紹介するプラグイン「WP-OliveCart」は、WordPressでショッピングカートを追加することができるプラグインです。無料版と有料版の2つがあり、国産プラグインで、日本語に対応したプラグインになっております。無料版では「ショッピングカート機能」「商品管理機能」、有料版...続きを読む

2018.11.19WordPress