01 レスポンシブホームページ基本講座

2020年11月4日2024年2月15日

URLをコピーしました！

レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。

meta viewportビューポートの設定は必須

meta viewport？メタビューポート？って何ですか？

パソコンで見ているホームページをスマートフォンで見ると横と縦が小さくなって全体が表示されます。これだと文字を見るためにピッチアウトしてみなければなりません。ビューポートはスマートフォン最適化です。

meta 要素は、UTF-8以外にも使うんですね

そうですね。他にもいろいろありますよ。
今回はmeta要素に　name 属性を書いて　そこにviewport指定を書きます。width=device-widthは、スマホの横幅に合わせる
initial-scale=1 初期の表示倍率。スマホのそのままの倍率って意味です

Viewportとは？

レスポンシブウェブサイトには、下記のmeta要素にname属性を使ったviewport指定が必須です。

<meta name="viewport" content="width=device-width, initial-scale=1>

viewport(ビューポート）とは、ディスプレイの表示領域のことを指しています。その表示領域を、content属性に値を記述することで、表示領域を指定します。meta要素のviewport指定がないと、下記のようにPCサイトを縮小した状態がスマートフォン上で表示されてしまいます。viewport指定することで、スマートフォン最適化のページを閲覧することができます。

下図は、左は、viewport指定がない場合で、右がviewport指定がある場合です。（メディアクエリの指定はされています）

content属性

content属性にはディスププレイの横幅の値を指定したり、柔軟なサイズに対応できる「width=device-width」の指定があります。

下記のような記述だと、横幅が375pxのディスプレイ表示領域となります。但しこの状態だと、375px固定となりますのでGoogleにおいては非推奨設定になっています。

<meta name="viewport" content=”width=375″>

そのため、フレキシブル＝柔軟なディスプレイ画面に対応するためには、各端末のディスプレイ画面の幅に合わせる必要があります。その場合、content属性の値にwidth=device-widthと指定します。

<meta name="viewport" content="width=device-width, initial-scale=1>

width=device-width

width=device-widthは、その時使用しているディスプレイの表示領域の幅、端末の幅に合わせるという意味があります。

initial-scale=1

初期のズーム倍率であるinitial-scale=1を指定します。

メディアクエリ

メディアクエリとは、CSSで指定をする際に、ブラウザで表示される画面サイズに合わせて、スタイルシートを切り替える記述をさします。HTMLが１つで、CSSが各デバイスごとに存在し、そのCSSをブレイクポイントを使って「ここからここまで」の範囲指定を行います。

media

メディアごとに指定が必要な時代では、外部スタイルシートを読み込む際に、media属性を使って、スクリーン＝PC用　プリント＝プリンター用のCSSを書いて指定していました。

<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">

その後、media属性の値に　指定するCSSにスマホサイズを指定するようになりました。

<link rel="stylesheet" href="css/media_480.css" media="screen and (max-width:480px)">

media属性の値が、スクリーンであることと、なおかつ最大480px までの画面（iphoneのver6/7/8ぐらい）のみのスタイルシートとなります。ただ、これだと480pxまでのCSSを作成する他に、480pxから768px用などのように複数のcssにわけて作成するので非効率です。

そのため、一般的には、CSSファイル内で、メディアクエリを設定するようになりました。

@media を使う

HTML側では、media属性でデバイスのサイズを指定することなく、cssの読み込みだけ行います。

CSS側では、下記のように、@media screen and (min-width:480px) という @media を使ったメディアクエリの指定を使います。

/*media の指定がない場合*/
p {
 color:red;
}
/*　画面サイズが480pxからはここを読み込む　*/
@media screen and (min-width:480px) { 
   p {
     color:blue;
   }
}
/*　画面サイズが768xから1024pxまではここを読み込む　*/
@media screen and (min-width:768px) and ( max-width:1024px) {
  p {
     color:yellow
   }
}

何も指定がないサイズの時は文字の色が赤
480pxから767pxまでは文字の色が青
768pxから1024pxまでは文字の色が黄色
という指定方法になりました。このpx の値をブレイクポイントといい、デバイスに合わせたブレイクポイントを指定します。

screenは省略可

@media screen のscreenはディスプレイである・・・ということを指しているので、特に記述がなくても大丈夫です。またモバイルファーストで記述することの多いレスポンシブでは、下記のようにスマートフォンサイズの際は、メディアクエリ内には記述せず、スマートフォンでも大きめなサイズ（プラスやiPadMin）はこの表示で、タブレット(iPad 第一世代）からはこの表示で、12〜13インチのパソコンではこの表示、15インチのノートパソコンからはこの表示、デスクトップのような大画面の場合はこの表示、といった記述を使うこともできます。

//スマートフォン(576pxup　iPhoneプラスやiPadMin)以上
@media (min-width: 576px) { ... }
// タブレット(iPad 第一世代　768px　up)以上
@media (min-width: 768px) { ... }
// 12〜13インチのパソコンdevices以上
@media (min-width: 992px) { ... }
//15インチ以上のパソコン以上
@media (min-width: 1200px) { ... }
//デスクトップなどの大画面以上
@media (min-width: 1400px) { ... }