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

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

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

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

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

 

 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

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

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

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

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

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

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

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

 
 

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

 
 

■上記のHTMLコード

 
 

メディアクエリの使い方

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

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

}

 

(※)@media screen and (max-width:xxx)のように、「screen and」という記述をしている場合もありますが必須ではありません。ここでは省略しています。
参考:●media属性を使った媒体別のスタイルシート
 

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

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

例. @media (max-width:599px){

}
 

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

例. @media (min-width:601px){

}
 

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

例. @media (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 (max-width:991px){

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

}

 

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

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

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

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

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

}

 

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

 

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

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は拡大倍率の初期値という意味です。
 

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

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

まとめ

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

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

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

今回は以上になります。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

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

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

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

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 スタンダート48時間コースとプロフェッショナル80時間コースから選択して受講できます。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

松本慶

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

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

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

メルマガ登録はこちら

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