問題 × 解決策

レスポンシブ対応にする基本的な方法

問題

レスポンシブ対応にするためには?

解決策

  1. headタグ内で「<meta name="viewport" content="width=device-width">」を設定する。
  2. cssでメディアクエリを設定し、PC用とモバイル用のcssを作成する。

 

レスポンシブ対応

レスポンシブ対応は今や主流の方法であり、Google側も推奨しています。
レスポンシブ対応にするための基本的な手順は以下の2点です。

  1. headタグ内で「<meta name=”viewport” content=”width=device-width”>」を設定する。
  2. cssでメディアクエリを設定し、PC用とモバイル用のcssを作成する。

① headタグ内で「<meta name=”viewport” content=”width=device-width”>」を設定する。

このmetaタグの「viewport」は「表示領域」を示します。
そして「width=device-width」は、「幅を、表示しているデバイスのサイズに合わせる」設定を行ってくれるようになります。

<meta name="viewport" content="width=device-width">

これにより、どのデバイスで見ても、サイトの見え方が統一されるようになります。

② cssでメディアクエリを設定し、PC用とモバイル用のcssを作成する。

メディアクエリは、css3で登場した、サイトを表示する環境(メディアの種類や画面サイズ等)に応じて、適用するcssを切り替える機能です。
この機能を使用することで、PCでのcss、スマートフォンでのcss、タブレットでのcss…という風にcssを切り替えることができます。

メディアクエリの設定方法

メディアクエリの設定方法は以下の2つが代表的です。

  • css内で設定する。
  • 外部cssの呼び出し時のlinkタグ内で設定する。

1. css内での設定方法

css内でのメディアクエリの記述は以下のようになります。

@media all/*メディアタイプ*/ and/*論理演算子*/ (min-width: 768px)/*メディア特性*/ {
	...
}

メディアタイプ

メディアタイプは、端末のタイプを示します。
以下の4つから設定できます。

all 全てのタイプが対象となります。
print 印刷時、印刷プレビュー時に対象となります。
screen 画面が対象となります。
speech 音声合成が対象となります。

メディア特性

メディア特性とは、そのメディアの持つ設定や環境等を示します。
このメディア特性は括弧で囲む必要があります。

論理演算子

論理演算子は、2つのメディア条件を使ったりする等、より細かな設定を可能にしてくれます。
以下の4つから設定できます。

and 複数のメディアタイプ、メディア特性を組み合わせて、対象とすることができます。
ただし、andで繋げた全ての条件に当てはまらないと対象になりません。
not 対象から除外することができます。
only クエリ全体が完全に一致した場合のみに対象となります。
,(コンマ) 複数のメディアタイプ、メディア特性を組み合わせて、対象とすることができます。
andとは違い、,(コンマ)で分けられた条件のいずれかに当てはまれば対象となります。

PCとモバイルを切り替えるメディアクエリの記述例

@media all and (min-width: 768px) {
	/* PCの場合の記述内容 */
}
@media only screen and (max-width: 767px) {
	/* モバイルの場合の記述内容 */
}
  • ブレイクポイントを768pxとした場合の記述です。

2. 外部cssの呼び出し時のlinkタグ内で設定する。

linkタグ内でのメディアクエリの記述は以下のようになります。

<link rel="stylesheet" href="style.css" media="all(メディアタイプ) and(論理演算子) (min-width: 768px)(メディア特性)">

PC用とモバイル用で別々のcssを呼び出す際のメディアクエリの記述例

<link rel="stylesheet" href="pc.css" media="screen and (min-width:768px)"> <!-- PC用のcssの呼び出し -->
<link rel="stylesheet" href="sp.css" media="screen and (max-width:767px)"> <!-- モバイル用のcssの呼び出し -->
  • ブレイクポイントを768pxとした場合の記述です。

参考ページ

【viewportを理解して正しいレスポンシブデザインを設定しよう | tree】
https://tree-file.com/web-design/understanding-viewport-for-responsive-webdesign/

【レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ】
https://sole-color-blog.com/blog/71/

【メディアクエリの使用 – CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

【メディアクエリ(Media Queries)とは – IT用語辞典 e-Words】
http://e-words.jp/w/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

1 × 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧