レスポンシブデザインとは？スマートフォン対応の基本
パソコンでもスマートフォンでも、見やすく表示されるホームページ。
その多くは「レスポンシブデザイン」という作り方で作られています。
この記事では、レスポンシブデザインとは何か、仕組みと作るときの基本を解説します。
1.画面に合わせて見た目を変える
レスポンシブデザインとは、1つのホームページを、見る端末の画面の大きさに合わせて、配置や大きさを自動で変えて表示する作り方です。
| 作り方 | 特長 |
|---|---|
| レスポンシブデザイン | ページは1つ。画面の大きさに合わせて見た目が変わる。更新は1か所で済む |
| パソコン用とスマートフォン用を別に作る | それぞれに合わせて作れるが、更新を2か所でする必要がある |
今は、更新の手間が少なく、URLも1つで済むレスポンシブデザインが、多くのホームページで使われています。
2.レスポンシブデザインが選ばれる理由
スマートフォン、タブレット、パソコンなど、ホームページを見る端末の画面の大きさはさまざまです。端末ごとにページを作るのは大変ですが、レスポンシブデザインなら、1つのページでどの端末にも対応できます。
また、Googleは、ホームページの作り方として、レスポンシブデザインをすすめています。スマートフォン対応が必要な理由は、スマートフォン対応のホームページが必要な理由で解説しています。
レスポンシブデザインは、1つのページで、どの端末でも見やすく表示するための作り方です。
3.仕組みと、作るときの基本
1. viewport の指定
ページの最初に、スマートフォンでも画面の幅に合わせて表示するための指定を入れます。これがないと、スマートフォンでパソコンの画面がそのまま縮んで表示されます。
<meta name="viewport" content="width=device-width, initial-scale=1">2. メディアクエリで切り替える
CSSのメディアクエリを使い、画面の幅に合わせてデザインを切り替えます。詳しくは、CSSのメディアクエリとは？で解説しています。
@media (max-width: 600px) {
.menu { display: none; }
}3. 幅を固定しない
画像や箱の幅を、決まった大きさ（px）で固定せず、画面の幅に合わせて伸び縮みするように指定します。
img {
max-width: 100%;
height: auto;
}よくある崩れ
| 崩れ | 考えられる原因 |
|---|---|
| 横にはみ出して、左右に動く | 画像や表、長い英語の文字列の幅が固定されている |
| 文字が小さすぎる | viewport の指定がない、文字の大きさが小さい |
| ボタンが押しにくい | ボタンが小さい、ボタンどうしが近すぎる |
確かめ方
自分のスマートフォンで実際に開くのがいちばん確実です。パソコンのブラウザの開発者向けの機能を使うと、いろいろな画面の大きさで確かめられます。
4.よくある質問
今のホームページは、レスポンシブデザインですか？
パソコンのブラウザの幅を狭くしてみて、配置が変われば、レスポンシブデザインの可能性が高いです。スマートフォンで開いて、拡大しなくても読めるかも確かめましょう。
古いホームページを、レスポンシブデザインにできますか？
作りによっては直せますが、大きく作り直す必要があることもあります。
タブレットにも対応できますか？
画面の幅に合わせて切り替えるため、タブレットにも対応できます。切り替える幅の決め方によって、見え方が変わります。
WordPressのテーマは、レスポンシブデザインですか？
今のテーマの多くは対応しています。古いテーマを使っている場合は、確かめましょう。
5.まとめ
レスポンシブデザインは、1つのページを、画面の大きさに合わせて見やすく表示する作り方です。
- viewport の指定を入れる
- メディアクエリで、画面の幅に合わせて切り替える
- 画像や箱の幅を固定しない
- 実際のスマートフォンで、はみ出しや読みにくさを確かめる
まずは、パソコンのブラウザの幅を狭くして、自分のホームページの見え方が変わるか確かめてみましょう。CSSの単位については、CSSのvw・vh・rem・emの違いとは？で解説しています。
スマートフォンでの表示の崩れや、作り直しで迷っている場合は、浅草Web屋にご相談ください。