レスポンシブ・ウェブデザインの基本

まずは、「レスポンシブ・ウェブデザイン」の概要と作り方を簡単に押さえておきましょう。CSS3のMedia Queries(メディアクエリ)という記述方法を使います。

レスポンシブ・ウェブデザインの簡単な作り方

「レスポンシブ・ウェブデザイン」とは、閲覧者の画面サイズに応じて適用するスタイルを分けることで、閲覧者の端末に合ったデザインでウェブページを表示させる方法です。PC用・スマートフォン用など、端末の種類に応じた専用ページを用意することなく、単一のページですべての端末に対応させられるため、手間が少なくメンテナンス性の高いウェブサイト運営ができます。

出典: レスポンシブ・ウェブデザインの簡単な作り方 [ホームページ作成] All About

Media Queriesで、画面サイズ別にCSSを切り替える方法

Media Queriesは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の細かな条件に応じて、適用するスタイルを振り分けられるCSS3の機能です。スクリプトを用いることなく、サイトをパソコンで見るときやスマートフォンで見るときなど、閲覧環境別のデザインを簡単に適用できます。

出典: Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About

モバイルファーストでCSSを記述する方法

あらゆる端末(画面サイズ)に適用できる「1つのCSSソース」を記述したい場合は、「モバイルファースト」という考え方でデザインを設計しておくと楽です。

モバイルファーストでデザインする際のCSSの書き方

モバイルファーストでデザインを設計する際のCSSの書き方を解説。外部のフレームワーク等は使わずに、自力で1から全てを記述する場合の書き方をご紹介致します。シンプルな共通デザインを先に記述し、諸々のデザインを後で付け足す「モバイルファースト」なら、総記述量を減らしやすい上に、更新の手間も少なくて済みます。

出典: モバイルファーストでデザインする際のCSSの書き方 [ホームページ作成] All About

古いブラウザ用のCSSを先に書くレガシーファースト

モバイルファースト設計でCSSを記述すると、古いブラウザ(特にIE8以下)では常にモバイル版デザインが表示されてしまいます。そう割り切っても良いのですが、モバイル版でもCSS3の新しい記述方法を使っているなら、古いブラウザでは表示が崩れてしまうこともあります。その対処方法として(モバイル版の記述よりも前に)「古いブラウザ用のデザイン」を先に記述する「レガシーファースト」なCSSの記述方法をご紹介。

出典: 古いブラウザ用のCSSを先に書くレガシーファースト [ホームページ作成] All About

レスポンシブCSSで使うブレイクポイントの決め方

レスポンシブ・ウェブデザインを採用してCSS(スタイルシート)を記述するためには、「ブレイクポイントをどう設定するか?」を決める必要があります。モバイル端末とPC環境の境界を何pxに設定するか、迷うことも多いのではないでしょうか。そこで、「代表的な端末の画面幅」と「最近の画面解像度シェア」の2点を参考にして、ブレイクポイントを選定する方法をご紹介致します。

出典: レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About

描画領域のサイズに合わせて画像の表示サイズを自動調整

様々な画面(ウインドウ)サイズの環境に対応したいとき、調整方法に困りがちなのが「画像の表示サイズ」です。閲覧者の環境に合った表示サイズに自動調整する仕組みも押さえておきましょう。

ウインドウ幅に合わせて画像サイズを変化させる方法

CSSだけを使って、表示領域の横幅に合わせて画像サイズを(縦横比を維持したまま)変化させる方法を解説。レスポンシブ・ウェブデザインを採用したページや、「描画領域の横幅全体に画像を広げて掲載したい」場合に活用できます。

出典: ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About

1枚の背景画像をブラウザの画面全体に広げる方法

1枚の大きな画像(解像度の高い写真など)を、ブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が必ず(縦横比を維持したまま)画面全体を覆うように表示。スクリプトは不要で、数行のCSSだけで簡単に実現できます。

出典: 1枚の背景画像をブラウザの画面全体に広げる方法 [ホームページ作成] All About

メニューや表組みを、狭い画面でも使いやすくする

横方向に広がらざるを得ない要素として「横向きに配置したメニューバー」や「列数の多い表」などがあります。これらにレスポンシブ・ウェブデザインを適用し、狭い画面でも見やすくする方法も知っておくと便利です。

幅広でメニューバー、幅狭ではプルダウンに変化させる

ウェブサイトのナビゲーションメニューを、「広い画面」では「メニューバー」の形に、「狭い画面」では「プルダウンメニュー」の形に自動で切り替える仕組みの作り方をご紹介。ul要素とli要素で作る「リスト」から「プルダウンメニュー」を自動生成してくれるスクリプト「tinynav.js」を活用すると、とても簡単です。

出典: 幅広でメニューバー、幅狭ではプルダウンに変化させる [ホームページ作成] All About

幅が狭い画面では表を展開! stacktable.jsの使い方

横長のtableを、狭い画面でも見やすく自動展開してくれる「stacktable.js」の使い方を解説。ページを様々な画面サイズに対応させたい際に困るのが「横長の表」の扱いです。狭い画面だと、列幅が極端に狭くなって読みにくくなります。そこで便利なのが「stacktable.js」スクリプト。指定サイズより狭い画面では、表を行単位で展開(分解)してくれます。

出典: 幅が狭い画面では表を展開! stacktable.jsの使い方 [ホームページ作成] All About

tableレイアウトをCSSだけでレスポンシブ化する方法

table要素を駆使して作られた「テーブルレイアウト」なウェブページを、CSSだけでレスポンシブ化する方法を解説。表のセルを作るtd要素などに対してdisplayプロパティを適用すれば、HTML上では表のままで、表を崩す(表ではないように見せる)ことも可能です。特に値「inline-block」を指定すれば、表に似た表示のまま列数を画面幅に合わせて自動変化させることもできます。

出典: tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About

広ければ広いなりに、狭ければ狭いなりに、空間を有効活用する配置方法

画面が広くても狭くても、表示可能な領域全体を有効に活用する掲載方法もあります。

Masonryでサイズの異なるBOXを隙間なくタイル状に整列

大きさの異なるブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動で整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、短い記述で使えるようになりました。

出典: Masonryでサイズの異なるBOXを隙間なくタイル状に整列 [ホームページ作成] All About

画面サイズがどうでも「1画面ずつ」デザインする方法

画面(ウインドウ)の「横幅」いっぱいに何かを表示するスタイルは簡単に作れますが、「高さ」いっぱいに何かを表示したい場合には、若干の工夫が必要です。そのデザイン方法も押さえておきましょう。

1画面ずつスクロールして進むウェブページを簡単作成

企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。

出典: 1画面ずつスクロールして進むウェブページを簡単作成 [ホームページ作成] All About

番外:サイトを分離するのも1つの方法

モバイル環境への対応方法は、何も「レスポンシブ・ウェブデザイン」だけではありません。PC版サイトとモバイル版サイトとを別々に用意する方法もあります。その際は、自動振り分け機能を用意しておくと便利でしょう。

PC版とスマートフォン版サイトを自動振り分けする方法

スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をご紹介。

出典: PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About