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

本記事は広告が含まれる場合があります CSS

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

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

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

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

 

 

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

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


 

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

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

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

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

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

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

 
 

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


 
 

■上記のHTMLコード

 
 

メディアクエリの使い方

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

 

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

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

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

 

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

 

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

 
 

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

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

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

 

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

 

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

 

下記は、スマホ用・タブレット用・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を個別指導】
Webスクール<「WEBST8」

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


 

まとめ

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

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

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

今回は以上になります。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

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

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

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

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS