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

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

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

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

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

2.メディアクエリで画面サイズ別にCSSを切り替える方法

メディアクエリ(Media Queries)とは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の細かな条件に応じて、適用するスタイルシートを切り替えられるCSS3の機能です。スクリプトを用いることなく「パソコンなどの広い画面で見るとき専用のCSS」・「スマートフォンなどの狭い画面で見るとき専用のCSS」のように閲覧環境別のデザインを簡単に用意できます。

出典: メディアクエリで画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About

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

環境別にCSSソースを分割する方法だと保守が面倒です。あらゆる端末(画面サイズ)に適用できる「1つのCSSソース」を作りたい場合には、モバイルファーストという考え方でCSSを設計しておくと便利です。

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

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

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

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

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

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

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

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

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

HTML+CSSだけで、表示領域の横幅に合わせて画像サイズを変化させる方法を解説。レスポンシブ・ウェブデザインを採用したページや、画面サイズに合わせて自動で画像を(縦横比を維持したまま)拡大縮小させたい場合に活用できます。

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

6.画像を自動リサイズさせる際に、拡大縮小しすぎを防ぐCSSの書き方

画像の表示サイズを自動で閲覧環境に合わせたい場合に遭遇する、ちょっとした問題を解決するためのCSS記述方法をご紹介。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端に拡大されたり縮小されたりするのは避けたい」など。

出典: 画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS [ホームページ作成] All About

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

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

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

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

横向きに配置したメニューバーや、列数の多い表などは、画面の大きなPCやタブレットでなら問題なく閲覧できるでしょう。しかし、画面の小さなスマートフォンでは見づらくなる可能性があります。そのような要素でも、レスポンシブ・ウェブデザインを適用すれば見やすさを維持できます。

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

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

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

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

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

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

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

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

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

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

閲覧者の画面が広くても狭くても、表示可能な領域全体を自動で有効に活用できるよう掲載する方法もあります。

11.Masonryの使い方:サイズの異なるBOXをタイル状に整列

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

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

画面サイズがどうでも、1画面ずつ見せる方法

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

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

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

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

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

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

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

スマートフォン利用者を自動的に「スマホ用サイト」へ誘導できるよう、「アクセス者の端末(環境)に応じて閲覧先を自動で切り替える機能」を作ってみましょう。「.htaccess」ファイルを使ってサーバ側でアクセス先を自動振り分けし、スマートフォンユーザだけをリダイレクトする方法を解説。

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