問題
解決策
- headタグ内で「<meta name="viewport" content="width=device-width">」を設定する。
- cssでメディアクエリを設定し、PC用とモバイル用のcssを作成する。
レスポンシブ対応
レスポンシブ対応は今や主流の方法であり、Google側も推奨しています。
レスポンシブ対応にするための基本的な手順は以下の2点です。
- headタグ内で「<meta name=”viewport” content=”width=device-width”>」を設定する。
- 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 | 全てのタイプが対象となります。 |
---|---|
印刷時、印刷プレビュー時に対象となります。 | |
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
コメント