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

関連記事

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【WP】オリジナルショートコードの作り方

WordPressでは、shortcodes(ショートコード)という簡単な記述で、事前の用意された処理コードを実行することができます。 ショートコードを作成する ショートコードの作成はPHP関数の基本的な必要になりますが、オリジナルのショートコードは簡単に作成すること...続きを読む

2015.02.24WordPress

【お名前.com】ドメインの申請が完了できなくなってしまった-解決方法-

WEBサイト(ホームページ)を新しく公開するときは、URLとなるドメインが必要になります。ドメインを取得するために、「お名前.com」のサービスを利用することが多いのですが、申込中にエラーが発生しました。 「お名前.com」で新しいドメインを申込した際に、『カートの内容が変...続きを読む

2018.07.23WEBサイト制作お名前.comドメイン

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

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

2019.05.14フォトギャラリー藤枝

ウェブサイトの制作を頼むときに知っておきたい専門用語

お店や会社のホームページを持ちたいと思うとき、制作できる方や制作会社を探しますが、説明される内容や掲載されている内容に専門用語が多く、難しいと思う方もいらっしゃると思います。今回は、ホームページの制作でよく出てくる専門用語を解説したいと思います。 ウェブサイトの制作は実際の...続きを読む

2018.02.09WEBサイト制作レンタルサーバ