メディアクエリとは
CSSの記述によって、画面幅に合わせたスタイルシートを適用させる事ができる手法です。
例えば、「横幅が640pxまでの画面であればこのスタイルシートを使う」といったことが容易にできます。
HTMLの大幅な改修が必要なく、ほぼCSSの改修のみで済みます。
1.「viewport」の設定
viewportは様々なデバイスにおける表示領域のことです。
何も指定しない場合、スマホで表示したときに、PCと同じサイズで表示するので、 文字が小さくなり見にくくなります。
HTMLの[head]タグ内にmetaタグを記述して、 表示領域の幅を合わせることにより、小さくなるのを防ぎます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ↓↓↓↓ これを追加 ↓↓↓↓-->
<!-- inital scale -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- ↑↑↑↑ これを追加 ↑↑↑↑-->
</head>
※「HTMLの横幅はデバイス(スマートフォン等端末)の横幅に従います。
表示倍率の初期値は1.0です」といった内容になります。
2.CSSのスタイルシートをスマホ用、PC用と分ける ※分けなくても良いです
既存のPC用のCSSを複製してスマートフォン用のCSSのベースを作成します。
(この時点ではCSSの中身は同一です)
そして、HTMLのCSSを指定する箇所の記述を変更します。
<!-- StyleSheet -->
<!-- (min-width: 640px)画面幅640pxを超える場合のPC用CSS。-->
<link rel="stylesheet" media="(min-width: 640px)" href="common/styles/style_pc.css">
<!-- (max-width: 640px)画面幅640pxまでのスマートフォン用CSS。-->
<link rel="stylesheet" media="(max-width: 640px)" href="common/styles/style_mobile.css">
3.「メディアクエリ」をCSSに記述する
スマホ用CSSとPC用CSSそれぞれのメディアクエリの記述を追加します。
それぞれのCSS内全体を下記メディアクエリの表示で囲います。
1行目にメディアクエリの記述、最終行にその閉じる記述を追加します。
「@media」と書いてメディクエリの宣言をします。
()に画面サイズの指定をします。
/* PC用CSS */
@media (min-width: 640px) {
/* 通常のCSS */
}
→「最小の幅が640pxの時」640px以上の画面サイズのときに適用
/* スマートフォン用CSS */
@media (max-width: 640px) {
/* 画像を自動的に画面サイズにあわせて縮小表示*/
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
→「最小の幅が640pxの時」640px以上の画面サイズのときに適用
文字のサイズや、余白を調整したCSSを記述します。
カラムも縦並びになるよう記述できます。(それはまた今度)
また、このように、デバイスの画面サイズによってスタイルが切り替わる ポイントとなるサイズを、
「ブレークポイント」といいます。
今日はここまで。