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

CSS

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

2017年9月29日

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

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

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

 


 


 

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

メディアクエリと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は拡大倍率の初期値という意味です。
 

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


 

まとめ

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

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

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

今回は以上になります。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

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

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.