レスポンシブデザインとは

HTML・CSS・JavaScript

Webサイトでは必須のデザインとなったレシポンシブルデザインですが、その代表的なメディアクエリの使い方をご説明します。

レスポンシブデザインとは

現在Webサイトを見る方法はパソコンのみではなく、スマートフォンやタブレットなど様々な機器があります。

またディスプレイのサイズも一様ではなく、フルハイビジョンや4K、スマートフォンなどの小さいサイズなど多岐にわたります。

そのため構築するWebサイトはすべての機器、画面サイズに合わせてWebページのレイアウトを変更する必要があります。

こういった様々な環境に合わせてレイアウトを変更するレイアウト(デザイン)をレシポンシブデザインといいます。

CSS3から追加された機能を使って、レスポンシブデザインのWebサイトを実現していきます。

CSS3の記述方法

@media文とメディア特性を使用し、Webサイトを見ている画面幅を判別します。

@media メディアタイプ and メディア特性{セレクター{プロパティ:値;}}
例:@media screen and ( min-width: 1920px ){ main{ width: 80%; } }

@media文ではメディアタイプを指定します。メディアタイプには、screen、print等がありますが、例ではscreenを使用し、Webサイトを見ているのが画面であることを判別しています。

メディア特性では、画面の幅、高さ、解像度などを指定できます。例では接頭辞min-を使用し、「最小画面幅1920px」を表しています。

接頭辞はmin-だけでなく、max-も使用可能です。(例:max-width: 1000px 「最大画面幅1000px」)

すなわち例文は、画面サイズが1920px以上のときにmainのwidthを80%にするという意味です。

またスマートフォンやタブレットの画面拡大表示にも、この@media構文を使えば対応することができます。

方法としては、スマートフォンなどのデバイスピクセル比率(拡大比率)を判別し、それに対してページレイアウトを変更します。使用するメディア特性はresolutionです。

例:@media screen and( min-resolution : 1.25dppx ) { p { font-size : 25px; } }

メディア特性resolutionによって、デバイスピクセル比率を取得し、ある特定条件の場合にレイアウトを変更するように記述します。(例では、デバイスピクセル比率1.25倍のときにpを25pxにします。)

1つの方法として紹介しましたが、上記のような方法を使い、多種多用な現代の機器にも対応したWebサイトを構築することができるようになります。

上へ
inserted by FC2 system