フレームワークやテンプレートを使ってレスポンシブWebデザインを作る
レスポンシブWebデザインは、自力でCSSソースを書かなくても各種フレームワークを活用したりテンプレートを流用したりすることで簡単に作れます。以下に、レスポンシブWebデザインを簡単に作成できるフレームワークやテンプレートを3種類ほど紹介しておきます。■Bootstrap：
Bootstrapは、Twitterの開発者によって作られたオープンソースのフレームワークです。アイコンやボタンなど、ウェブページを作る上で便利なコンポーネントが豊富に含まれており、レスポンシブWebデザインに対応したグリッドレイアウトを使ったページも簡単に作れます。
フレームワーク「Bootstrap」で提供されているテンプレート群
Bootstrapはフレームワークなので多数のパーツを含んでいます。それらを自由に組み合わせて活用する方法が主な使い方ですが、Examplesページには上図のようにテンプレートとして使える作成例も公開されています。望みのレイアウトに近いテンプレートがあれば、そのHTMLソースをコピーして使うことで手軽にページを作成できるでしょう。
■Pure：
Pureは、Yahoo! Inc.が公開しているフレームワークです。Bootstrapよりも機能が少ない代わりに、わずか18KB程度の軽量なCSSを読み込むだけで使えます。レスポンシブWebデザインに対応したグリッド機能のほか、ウェブページでよく使われる基本的な要素(ボタン・フォーム・表組みなど)の整ったデザインが用意されています。
フレームワーク「Pure」で提供されているテンプレート群
Pureもフレームワークなので多数のパーツを含んでいます。Layoutsページでは上図のようにテンプレートとして使える作成例が公開されており、それぞれの一式をZIP形式でダウンロードできます。このテンプレートをベースにすれば、手軽にページを作成できるでしょう。
■HTML5 UP!：
フレームワークではなく、テンプレートそのものを専門に配布しているウェブサイトも多数あります。例えば下図の「HTML5 UP!」では、レスポンシブWebデザイン対応のテンプレートが40種類以上配布されています。フレームワークのように自力でパーツを組み合わせるのではなく、最初から整ったデザインが作られたテンプレートなので、気に入ったデザインがあればそのまま流用できて楽でしょう。
レスポンシブWebデザイン対応テンプレートを配布している「HTML5 UP!」
レスポンシブWebデザインはCSSソースが複雑になりがちですが、上記のようなフレームワークを活用すれば、ベースになるCSSだけは簡単に作成できます。また、完成されたテンプレートをそのまま流用する形なら、レスポンシブ以外の部分も含めたページデザイン全体を手軽に用意することもできます。ぜひ活用してみて下さい。
1ページで様々な端末に対応できるレスポンシブWebデザイン
今回は、HTMLは共通のまま、CSSを切り替えるだけで様々な端末(デバイス)に対応できるレスポンシブWebデザインについて簡単にご紹介いたしました。PC用サイトやスマートフォン用サイトなどのように閲覧環境別の専用サイトを用意するよりも、ウェブサイトの作成や更新作業が楽になります。これから新しくウェブサイトを作る場合はもちろん、既存サイトを改修する際にも、レスポンシブWebデザインを採用できないか検討してみて下さい。【関連記事】
