レスポンシブデザインとは？スマホ対応の基本を解説
当サイトではアフィリエイト広告を利用しています。
はじめに
Web制作を勉強していると、「スマートフォンにも対応させましょう」と言われることがあります。
しかし、実際にHTMLとCSSを書いてみると、PCではきれいに表示できていても、スマートフォンで見るとレイアウトが崩れてしまうことがあります。
私自身も、Noah Labを制作する中で、PCとスマートフォンでは同じレイアウトをそのまま使えない場面が何度もありました。
最初は、PC版を作ってから最後にスマートフォン用のCSSを追加すればいいと思っていました。ところが、実際に作ってみると、ヘッダーや記事一覧、サイドバー、文字サイズ、余白など、さまざまな部分を画面サイズに合わせて考える必要があることが分かりました。
そこで今回は、一般的な説明だけではなく、実際に制作しているNoah Labを例にしながら、レスポンシブデザインの基本とスマートフォン対応について紹介します。
レスポンシブデザインとは？
レスポンシブデザインとは、PC・タブレット・スマートフォンなど、異なる画面サイズに合わせてWebサイトのレイアウトを調整する考え方です。
同じWebサイトでも、画面の大きさによって表示方法を変えることで、文字を読みやすくしたり、ボタンを操作しやすくしたりできます。
例えば、PCでは記事カードを3列に並べていても、スマートフォンでは1列に変更することがあります。
PC
[ 記事1 ][ 記事2 ][ 記事3 ]スマートフォン
[ 記事1 ]
[ 記事2 ]
[ 記事3 ]このように、レスポンシブデザインは単純にPCサイトを小さくすることではありません。
画面サイズに合わせて、レイアウトや文字サイズ、余白、画像などを調整し、どの端末でも使いやすい状態にすることが大切です。
なぜスマートフォン対応が必要なのか
現在のWebサイトは、PCだけでなくスマートフォンからも閲覧されます。
そのため、PCで見たときにきれいなデザインになっていても、スマートフォンで操作しにくかったり、横にはみ出したりすると、使いにくいサイトになってしまいます。
例えば、次のような問題があります。
- 文字が大きすぎる
- 画像が画面からはみ出す
- 横並びのカードが狭くなる
- ボタンが押しにくい
- サイドバーが本文を圧迫する
- 横スクロールが発生する
そのため、Webサイトを作るときは、最初からスマートフォンでの表示も考える必要があります。
Noah Labではどのようにレスポンシブ対応している？
ここからは、実際に制作しているNoah Labを例にして説明します。
Noah Labでは、スマートフォンとPCで同じHTML構造を使いながら、CSSによってレイアウトを変えています。
例えば、ヘッダー、記事一覧、記事詳細ページ、フッターなど、それぞれの場所で画面サイズに合わせた調整を行っています。
基本的な考え方としては、スマートフォンのような小さい画面では内容を縦方向に並べ、画面が大きくなったら横方向のスペースを利用してレイアウトを広げています。
実例① ヘッダーをスマートフォンとPCで切り替える
Noah Labのヘッダーでは、スマートフォンとPCでナビゲーションの表示方法を変えています。
スマートフォンの場合
┌────────────────────────┐
│ Noah Lab 検索 ☰ │
└────────────────────────┘
スマートフォンでは、画面幅が限られているため、ナビゲーションを常に表示するのではなく、ハンバーガーメニューを使っています。
PCの場合
┌────────────────────────────────────┐
│ Noah Lab 検索 ナビゲーション │
└────────────────────────────────────┘
PCでは画面幅に余裕があるため、ナビゲーションを表示しています。
つまり、PCのナビゲーションを単純に小さくしているわけではありません。
画面サイズに合わせて、操作方法そのものを変更しています。
CSSではどうするのか
実際のテーマではもう少し複数のクラスを使っていますが、考え方を簡単にすると次のようになります。
.header-nav {
display: none;
}
.header-menu {
display: block;
}
@media (min-width: 768px) {
.header-nav {
display: flex;
}
.header-menu {
display: none;
}
}このように、@mediaを使うことで、画面幅が変わったときの表示を切り替えられます。
実例② 記事一覧をPCでは3列、スマホでは1列にする
Noah Labの記事一覧では、PCでは複数のカードを横に並べ、スマートフォンでは1列に並べる設計にしています。
PCの場合
[ 記事カード ][ 記事カード ][ 記事カード ]
スマートフォンの場合
[ 記事カード ]
[ 記事カード ]
[ 記事カード ]
PCの広い画面では3列にすると一覧性が高くなります。
一方、スマートフォンで3列のままにすると、カード1枚あたりの幅が狭くなり、タイトルや画像が見づらくなります。
そこで、スマートフォンでは1列に変更しています。
CSSの例
.article-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 767px) {
.article-list {
grid-template-columns: 1fr;
}
}ここではdisplay: grid;を使ってカードを並べています。
PCでは3列、スマートフォンでは1列というように、画面幅によって列数を変更しています。
実例③ 記事カードの幅を画面に合わせる
記事カードを作るときには、カードそのものの幅についても考える必要があります。
例えば、スマートフォンの画面よりも大きな固定幅を指定してしまうと、カードが画面からはみ出してしまうことがあります。
そこで、画面の幅に合わせて縮小できるようにします。
.article-card {
width: 100%;
max-width: 100%;
}width: 100%;を使うことで、親要素の幅を基準に表示できます。
また、画像にもレスポンシブ対応が必要です。
img {
max-width: 100%;
height: auto;
}これによって、画像が親要素より大きくならないようにしながら、元の比率を保って表示できます。
実例④ 記事詳細ページのサイドバーを切り替える
Noah Labの記事詳細ページには、記事本文の横にサイドバーを配置しています。
PCの場合
┌──────────────────────┬─────────────────┐
│ │ │
│ 記事本文 │ サイドバー │
│ │ │
│ │ ・目次 │
│ │ ・関連ページ │
│ │ ・カテゴリー │
│ │ ・ポピュラー │
│ │ │
└──────────────────────┴─────────────────┘
PCでは画面幅が広いため、本文とサイドバーを横に並べています。
スマートフォンの場合
┌───────────────┐
│ │
│ 記事本文 │
│ │
├───────────────┐
│ サイドバー │
│ ・目次 │
│ ・関連ページ │
│ ・カテゴリー │
└───────────────┘
スマートフォンでは横幅が狭いため、本文の下にサイドバーを配置しています。
このように、同じサイドバーでも画面サイズによって配置を変更しています。
CSSの考え方
.layout-with-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
}
@media (max-width: 767px) {
.layout-with-sidebar {
grid-template-columns: 1fr;
}
}PCでは「本文＋サイドバー」の2列にし、スマートフォンでは1列に変更しています。
実例⑤ トップページの文字サイズと余白を調整する
レスポンシブ対応で変更するのは、カードやサイドバーだけではありません。
トップページのメインビジュアルでは、画面サイズに合わせて文字サイズや余白も調整する必要があります。
Noah Labのトップページでは、
ゆるり、学んで、つくって。
のあのWeb制作、
のんびり成長記録。という内容を表示しています。
PCでは画面幅に余裕があるため、大きめの文字を使えます。
一方、スマートフォンで同じ文字サイズを使うと、見出しが何行にも折り返されてしまったり、周囲の要素との間隔が狭くなったりすることがあります。
そのため、画面幅に合わせて文字サイズや余白を調整します。
.hero-title {
font-size: 40px;
}
@media (max-width: 767px) {
.hero-title {
font-size: 28px;
}
}実際のNoah Labでは、ほかのスタイルと組み合わせながら全体のバランスを調整しています。
実例⑥ フッターの並び方を変更する
フッターもレスポンシブ対応しています。
スマートフォン
ロゴ
↓
ナビゲーション
↓
SNS
↓
コピーライト
PC
ロゴ ナビゲーション
SNS
コピーライト
スマートフォンでは縦方向に並べ、PCでは横方向の空間を利用して配置しています。
このような調整にもFlexboxなどのレイアウト機能を利用できます。
レスポンシブ対応でよく使うCSS
ここまでNoah Labの実例を見てきましたが、実際の制作ではいくつかのCSSプロパティを組み合わせてレスポンシブ対応を行います。
width
width: 100%;要素の幅を親要素に合わせたいときなどに使います。
max-width
max-width: 1200px;画面が大きくなっても、要素が広がりすぎないように最大幅を設定できます。
box-sizing
* {
box-sizing: border-box;
}widthに対してpaddingやborderを含めて計算しやすくするために使われます。
私自身も制作中に、要素の幅を指定しているのに画面からはみ出してしまうことがありました。
その原因を調べていく中で、幅だけを見るのではなく、paddingやborderも含めてサイズを考える必要があると分かりました。
display: flex
.box {
display: flex;
}要素を横並びや縦並びにするときに便利です。
例えばPCでは横並び、スマートフォンでは縦並びにすることができます。
.box {
display: flex;
}
@media (max-width: 767px) {
.box {
flex-direction: column;
}
}display: grid
.article-list {
display: grid;
}記事カードの一覧など、複数列のレイアウトを作るときに便利です。
@media
@media (max-width: 767px) {
/* スマートフォン用のCSS */
}画面幅などの条件に応じてCSSを切り替えるために使います。
レスポンシブ対応でpositionにも注意する
レスポンシブ対応をしていると、position: absolute;を使った要素の位置がスマートフォンでずれることもあります。
例えば、メインビジュアルの画像の上にタイトルを重ねる場合、次のような構造を使うことがあります。
.hero {
position: relative;
}
.hero-title {
position: absolute;
top: 50%;
left: 50%;
}PCではちょうどいい位置でも、スマートフォンでは画像の大きさや縦横比が変わるため、タイトルがずれて見えることがあります。
そのため、positionを使っている部分も、スマートフォンで実際に確認することが大切です。
実際にNoah Labを作って困ったこと
PCではきれいなのにスマートフォンでははみ出した
Web制作を始めたころは、PC画面で表示がきれいになっていれば完成に近いと思っていました。
ところがスマートフォンで確認すると、要素が画面の外にはみ出していることがありました。
そこで、widthだけではなくpaddingやborder、親要素の幅なども確認するようになりました。
この経験から、レスポンシブ対応では「その要素だけ」を見るのではなく、周囲の要素との関係を見ることが大切だと分かりました。
横並びのカードがスマートフォンで見づらくなった
PCでは複数のカードを横に並べると見やすくても、スマートフォンで同じ配置にするとカード1枚あたりの幅が狭くなります。
そのため、スマートフォンでは1列にすることで、画像や文章を見やすくしました。
positionで配置した要素がずれた
absoluteを使って画像の上に文字を配置すると、PCではきれいに見えていても、スマートフォンでは文字の位置が変わってしまうことがありました。
画面幅が変われば画像の大きさも変わるため、それに合わせて文字の位置やサイズも見直す必要があります。
PCではちょうどいい余白がスマートフォンでは広く感じた
大きな画面では十分に見やすかった余白でも、スマートフォンでは余白が大きすぎるように感じることがあります。
例えばPCでは64pxの余白を使っていても、スマートフォンでは32px程度に調整することがあります。
.section {
padding-block: 64px;
}
@media (max-width: 767px) {
.section {
padding-block: 32px;
}
}このように、レスポンシブ対応では「幅」だけではなく「余白」も重要な要素になります。
レスポンシブ対応は最後に追加するだけではない
私自身、最初は「PC版を完成させてからスマートフォン対応をすればいい」と考えていました。
しかし、Noah Labを実際に制作していく中で、レスポンシブ対応は最後に追加する作業だけではないと感じるようになりました。
例えば記事一覧を作るときも、最初から「PCでは3列、スマートフォンでは1列」と考えておけば、HTMLやCSSを組み立てるときに迷いにくくなります。
記事詳細ページでも、「PCでは本文とサイドバーを横に並べ、スマートフォンでは本文の下にサイドバーを置く」と最初に考えておけば、レイアウトを作りやすくなります。
つまり、レスポンシブ対応は完成後に考えるのではなく、サイトの構造を考える段階から意識しておくことが大切です。
Noah Labのレスポンシブ対応まとめ
| 部分 | スマートフォン | PC |
|---|---|---|
| ヘッダー | ロゴ・検索・ハンバーガー | ロゴ・検索・ナビゲーション |
| 記事一覧 | 1列 | 3列 |
| 記事詳細 | 本文 → サイドバー | 本文 ＋ サイドバー |
| フッター | 縦方向 | 左右に配置 |
| 文字サイズ | 画面に合わせて調整 | 大きめに設定 |
| 余白 | 狭めに調整 | 広めに設定 |
スマートフォン対応で確認したいこと
Webサイトを制作したら、スマートフォンで実際に確認することも大切です。
私がNoah Labを制作するときに確認しているポイントをまとめると、次のようになります。
- ヘッダーが崩れていないか
- ハンバーガーメニューが正常に使えるか
- 検索ボタンを押しやすいか
- 記事カードが画面からはみ出していないか
- 画像が大きすぎないか
- 見出しが不自然に折り返されていないか
- 本文が読みやすいか
- ボタンが押しやすいか
- サイドバーが適切な位置に移動しているか
- フッターが崩れていないか
- 横スクロールが発生していないか
特に、PCのブラウザだけで確認して終わりにするのではなく、実際のスマートフォンでも確認することで、気づける問題が増えます。
初心者がまず覚えておきたいレスポンシブCSS
| CSS | 役割 |
|---|---|
width | 要素の幅を指定する |
max-width | 最大幅を指定する |
width: 100% | 親要素に合わせて幅を広げる |
max-width: 100% | 親要素より大きくならないようにする |
box-sizing | 要素のサイズ計算を扱いやすくする |
display: flex | Flexboxで配置する |
flex-direction | 横方向・縦方向を切り替える |
display: grid | Gridでレイアウトを作る |
grid-template-columns | 列数や列幅を指定する |
@media | 画面サイズなどの条件でCSSを切り替える |
font-size | 文字サイズを調整する |
padding | 内側の余白を調整する |
margin | 外側の余白を調整する |
まとめ
レスポンシブデザインは、PCで作ったWebサイトを単純に小さくすることではありません。
画面サイズが変わっても、読みやすく、操作しやすく、レイアウトが崩れないように調整することが大切です。
Noah Labを制作する中でも、ヘッダー、記事一覧、記事詳細ページ、サイドバー、フッター、文字サイズ、余白など、さまざまな部分でスマートフォンとPCの違いを考える必要がありました。
私自身も最初は、レスポンシブ対応を「最後にスマートフォン用CSSを追加する作業」と考えていました。
しかし、実際に制作してみると、HTMLの構造やレイアウトを考える段階から、スマートフォンではどう見えるのかを意識しておくことが大切だと分かりました。
これからWeb制作を始める場合は、PCだけで完成させようとするのではなく、最初から「スマートフォンではどうなるか」を考えながらHTMLとCSSを組み立ててみると、レスポンシブデザインへの理解も深まりやすいと思います。
Related
