レスポンシブデザインの基本と作り方を徹底解説

ホネ吉: WEBデザイナーの卵です

こんにちは、ホネ吉です。
今回は近年よく聞くようになった「レスポンシブデザイン」の基本と作り方について解説します。
レスポンシブデザインについては本サイトで掲載されている「レスポンシブデザインとリキッドデザイン！そもそもの違いって？」の記事にも記載されていますので併せてお読みください。

レスポンシブデザインとは？

レスポンシブデザインとは状況(デバイス・画面サイズなど)に応じ最適に表示されるよう設計されたデザインのことです。
1つのhtmlファイルでパソコン(PC)、スマホ(SP)、タブレットどそれぞれのデバイスに合わせた表示に切り替えられるので下記のようなメリットがあります。

Googleが推奨している

レスポンシブデザインの最大の利点はGoogleが推奨している事です。
これは推奨であり必須ではないのですが、2019年7月以降の新規サイトではMFI(モバイルファーストインデックス)がデフォルトになった事もあり、
PC・SPでコンテンツの内容に大きな差違が生まれにくいレスポンシブデザインに於いて大きなメリットだと。

ユーザーが共有・リンクしやすい

URLが1つになるのでWebサイトを閲覧しているユーザーに共有されやすくなります。
パソコンや携帯電話が欠かせないものとなっている現代において、LINEやTwitterなどSNSで気軽に共有できるのはユーザーにとって非常に重要な点の1つです。

更新・メンテナンスが容易

レスポンシブデザインではHTMLファイルが1つのため、掲載情報の更新・修正作業が1度で済みます。
デバイス毎にHTMLファイルがわかれている場合、修正や更新の作業をHTMLファイルの数だけ行わないといけないので手間がかかります。

レスポンシブデザインの作り方

それではレスポンシブデザインの作り方をご説明します。

ビューポート(viewport)を設定

レスポンシブデザインに対応させるためにはまずビューポート(viewport)を設定します。
viewportとはそれぞれのデバイスに合わせて表示する大きさを調整するコードでheadの中に記載します。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

メディアクエリの設定

次にメディアクエリを設定します。メディアクエリとは状況に応じて適用するCSSを変更するコードでウインドウ幅だけでなくアスペクト比、印刷時など色々な状況に応じたものを設定することができます。

CSSファイル内に記述する

1つはCSSファイル内に記述する方法です。下記のように記述すると1つのCSSファイル内で複数のウインドウ幅に対応したCSSを指定できます。

/*ウインドウ幅が768px以上の時に適用*/
@media screen and (min-width :768px){
	body{
		background: #ff0000;
	}
}

/*ウインドウ幅が768px以上の時に適用*/
@media screen and (min-width :768px){
	body{
		background: #0000ff;
	}
}

HTMLファイルのlinkタグで設定

もう1つはHTMLファイルのlinkタグにmedia属性を設定し読み込むCSSを切り替える方法です。

<head>
<link rel="stylesheet" media="(min-width: 768px)" href="pc.css">
<link rel="stylesheet" media="(max-width: 767px)" href="sp.css">
</head>

上記の場合は
①768px以上⇒pc.cssを読み込み
①767以下⇒sp.cssを読み込み
となります。

どちらの方法でもレスポンシブ対応は可能ですが、後者の場合CSSファイルの読み込みが発生してしまうのでその分HTTPリクエストの回数が増えページの読み込みが少し遅くなってしまいます。また、CSSは上から順に処理されていくため、誤って上書きしないように記述順には注意が必要です。

まとめ

いかがだったでしょうか？レスポンシブデザインはあらゆる画面サイズに対応できるため、モバイルファーストが加速している現在において最も有効な手段です。
仕組みさえわかればそれほど難しいものではありませんが、ユーザーが見やすいレイアウトにするためには注意してデザインしましょう。

コラム