CSSメディアクエリとViewPortによるレスポンシブデザインの作り方

CSSメディアクエリとViewPortを使ったレスポンシブデザイン

PCやタブレット用のレイアウトとスマートフォン用のレイアウトをそれぞれ分けて画面表示しているホームページは多いと思います。
 

そこで今回はCSSのメディアクエリとViewPort(ビューポート)という機能を利用してレスポンシブデザインを作る方法についてご紹介します。
 

PC・タブレットとスマートフォン用にレイアウトを分けるレスポンシブデザイン

 
 

もくじ

以下は本記事のもくじです。
 

  1. 1. メディアクエリとViewPortを使ったレスポンシブデザイン
    1. 1-1. CSSメディアクエリを使って横幅サイズで場合分けする
    2. 1-2. headタグにViewPortの設定を記述する
  2. 2. まとめ


 
それでは説明していきます。
 

1. メディアクエリとViewPortを使ったレスポンシブデザイン

1-1. CSSメディアクエリを使って横幅サイズで場合分けする

PC用の画面とスマートフォン用の画面を切り替えたい人は多いと思います。
 

PC用画面とモバイル端末での画面表示を分ける方法の一つに、CSSのメディアクエリという機能を利用した設定方法があります。
 

まずは表示例をあげてみます。
 

■PC・タブレット画面などを想定した768px以上で横並びになり、スマホ画面を想定した767px以下で縦並びになる例です。

 
 

■上記を実際にブラウザで表示した例です。

 
 

■上記のHTMLコード

 

メディアクエリの使い方

使い方は簡単で、CSSファイル(外部スタイルシートや内部スタイルシート)で下記のように記述します。
 

@media screen and (サイズの設定 横幅〇〇以下や□□以上など){
セレクタ{
CSSプロパティ:CSS設定値;
}
(※通常のCSSの書き方と同じです)

}

 

(※)screenは必須ではありませんが、ここでは記載しています。おまじない的に書いておくとよいでしょう。
参考:●media属性を使った媒体別のスタイルシート
 

サイズの設定は具体的には以下のように書くことができます。

横幅が〇〇px以下という設定をする場合は、(max-width:〇〇px)

例. @media screen and (max-width:767px){

}
 

横幅が□□px以上という設定をする場合は、(min-width:□□px)

例. @media screen and (min-width:768px){

}
 

横幅が□□px以上〜〇〇px以下という設定をする場合は、 (min-width: □□px) and (max-width: 〇〇px)

例. @media screen and (min-width: 768px) and (max-width: 1200px){

}
 

 

なお、表示を変化する境界値をブレイクポイントと言います。
 

ブレイクポイントの設定値はいろいろな考え方がありますが、有名なレスポンシブデザインのCSSフレームワークであるBootStrap(ブートストラップ)では、下記のような基準にしています。
 

Extra small devices
(とても小さいデバイス
例. スマホ)
Small devices
(小さいデバイス
例.タブレット)
Medium devices
(中くらいのデバイス
例. PC)
Large devices
(大きいデバイス
例. PC)
横幅<768px 横幅≥768px 横幅≥992px 横幅≥1200px

 

考え方・書き方は人によって色々ですが、上記を基準にタブレットをスマホ画面に含める場合は、たとえば下記のように場合分けすることができます。

/* 横幅サイズによらない共通のCSSはここに書くことができる */
….
/* スマホ・タブレット用のCSSはここに書く */
@media screen and (max-width:991px){

}
/* PC用のCSSはここに書く */
@media screen and (min-width:992px){

}

 

スマホ用、タブレット用、PC用で分ける場合は、下記のように場合分けできます。

/* 横幅サイズによらない共通のCSSはここに書くことができる */

/* スマホ用のCSSはここに書く */
@media screen and (max-width:767px){

}
/* タブレット用のCSSはここに書く */
@media screen and (min-width:768px) and (max-width:991px){

}
/* PC用のCSSはここに書く */
@media screen and (min-width:992px){

}

 

下記は、スマホ用・タブレット用・PC用にCSSメディアクエリを利用して作成したレスポンシブデザインの例です。

 

なお、width以外にもresolution(解像度)やdevice-width(画面の幅、高さ)などで分ける方法もありますが、ここでは割愛します。
 
 

1-2. headタグにViewPortの設定を記述する

スマートフォンなどのモバイル端末用にメディアクエリの設定と合わせて、headタグに下記のviewportの記述をしておきましょう。
 

 

iphone6などのスマートフォンは本来360px前後ですが、viewportの設定がない場合はiphone6などのスマートフォンはデフォルトで980pxで描画する仕様になっています。
 

そのため、スマートフォン用のサイズでCSSを設定しても思ったように機能しなくなってしまいます。
 

ViewPortの記述がない状態のスマホ画面

viewportの記述がないパターン。横幅が980pxで描画されていて小さく見える

viewporの記述がないパターン。横幅が980pxで描画されていて小さく見える

 

そこで、下記のようにviewport=device-width,initial-scale=1と記述することでデフォルトの980pxで描画するのではなく、本来の360px前後での描画になるため、スマートフォン用のサイズで設定したCSSが意図するように機能するようになります。
 

ViewPortの記述がある状態のスマホ画面

viewport=device-width, initial-scale=1のパターン。横幅が375pxで描画されている

viewport=device-width, initial-scale=1のパターン。横幅が375pxで描画されている

 

device-widthはデバイスの本来の横幅サイズで、initial-scale=1は拡大倍率の初期値という意味です。
 

とりあえずは、一旦はおまじないとして書いておくと良いと思います。
 
 

2. まとめ

今回は、CSSのメディアクエリを利用したレスポンシブデザインの設定方法とViewPortについて説明しました。
 

このやり方を利用することで下記のようにPC用の画面とスマートフォン用の画面を切り替えることができるようになります。
 

PC・タブレットとスマートフォン用にレイアウトを分けるレスポンシブデザイン
 

今回は以上になります。
 

最後までご覧いただきありがとうございました。

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

大阪堀江の個人事業主向けWebスクール Webst8 バナー

『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。

『これから自分でホームページを作成したい』

『今のホームページを自分で更新できるようにしたい』

『ホームページでブランディング・集客・売上アップしたい』

といった方はぜひ当Webスクールにお問い合わせください。

Webst8の詳細はこちら

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ