ホームページ作成/装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

レスポンシブWebデザインの簡単な作り方(3ページ目)

レスポンシブWebデザインとは、ユーザの画面サイズやブラウザのウインドウサイズに応じて適用CSSを分けることで、閲覧環境に合ったデザイン・レイアウトでウェブページを表示するデザイン方法のことです。レスポンシブWebデザインのメリットやデメリットなどの基本から、CSSソースのサンプル、簡単に作れるフレームワークやテンプレートを紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

フレームワークやテンプレートを使ってレスポンシブWebデザインを作る

レスポンシブWebデザインは、自力でCSSソースを書かなくても各種フレームワークを活用したりテンプレートを流用したりすることで簡単に作れます。以下に、レスポンシブWebデザインを簡単に作成できるフレームワークやテンプレートを3種類ほど紹介しておきます。

Bootstrap
Bootstrapは、Twitterの開発者によって作られたオープンソースのフレームワークです。アイコンやボタンなど、ウェブページを作る上で便利なコンポーネントが豊富に含まれており、レスポンシブWebデザインに対応したグリッドレイアウトを使ったページも簡単に作れます。
 
フレームワーク「Bootstrap」で提供されているテンプレート群

フレームワーク「Bootstrap」で提供されているテンプレート群


Bootstrapはフレームワークなので多数のパーツを含んでいます。それらを自由に組み合わせて活用する方法が主な使い方ですが、Examplesページには上図のようにテンプレートとして使える作成例も公開されています。望みのレイアウトに近いテンプレートがあれば、そのHTMLソースをコピーして使うことで手軽にページを作成できるでしょう。

Pure
Pureは、Yahoo! Inc.が公開しているフレームワークです。Bootstrapよりも機能が少ない代わりに、わずか18KB程度の軽量なCSSを読み込むだけで使えます。レスポンシブWebデザインに対応したグリッド機能のほか、ウェブページでよく使われる基本的な要素(ボタン・フォーム・表組みなど)の整ったデザインが用意されています。
 
フレームワーク「Pure」で提供されているテンプレート群

フレームワーク「Pure」で提供されているテンプレート群


Pureもフレームワークなので多数のパーツを含んでいます。Layoutsページでは上図のようにテンプレートとして使える作成例が公開されており、それぞれの一式をZIP形式でダウンロードできます。このテンプレートをベースにすれば、手軽にページを作成できるでしょう。

HTML5 UP!
フレームワークではなく、テンプレートそのものを専門に配布しているウェブサイトも多数あります。例えば下図の「HTML5 UP!」では、レスポンシブWebデザイン対応のテンプレートが40種類以上配布されています。フレームワークのように自力でパーツを組み合わせるのではなく、最初から整ったデザインが作られたテンプレートなので、気に入ったデザインがあればそのまま流用できて楽でしょう。
 
レスポンシブWebデザイン対応テンプレートを配布している「HTML5 UP!」

レスポンシブWebデザイン対応テンプレートを配布している「HTML5 UP!」


レスポンシブWebデザインはCSSソースが複雑になりがちですが、上記のようなフレームワークを活用すれば、ベースになるCSSだけは簡単に作成できます。また、完成されたテンプレートをそのまま流用する形なら、レスポンシブ以外の部分も含めたページデザイン全体を手軽に用意することもできます。ぜひ活用してみて下さい。
 

1ページで様々な端末に対応できるレスポンシブWebデザイン

今回は、HTMLは共通のまま、CSSを切り替えるだけで様々な端末(デバイス)に対応できるレスポンシブWebデザインについて簡単にご紹介いたしました。PC用サイトやスマートフォン用サイトなどのように閲覧環境別の専用サイトを用意するよりも、ウェブサイトの作成や更新作業が楽になります。これから新しくウェブサイトを作る場合はもちろん、既存サイトを改修する際にも、レスポンシブWebデザインを採用できないか検討してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます