WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

CSSメディアクエリーによるレスポンシブWebデザインの基本

   

HTML CSS

出典:http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png

最近のホームページなどのWebデザインは、HTMLは切り替えず、画面サイズの条件に応じて適用するCSSだけを切り替えることで、端末に適したレイアウトを実現する手法の「レスポンシブWebデザイン」が主流です。

そのやり方をメモして忘れないように。

スポンサード リンク

レスポンシブWebデザインで必要な2つの作業

レスポンシブWebデザインを実現するためには、以下の2つの作業を行う必要があります。
それぞれの詳細な内容は、次項で見ていきます。

  • ビューポート(viewport)のメタタグを設定する
  • メディアクエリーを使用してCSSを切り替える

ビューポート(viewport)のメタタグを設定する

まずは、ビューポート(viewport)のメタタグの設定から。

スマートフォンやタブレットのブラウザがWebページを表示する際に、パソコン向けに作られたページがかなり小さく表示されることがあります。
これは、ブラウザによって、そのページがパソコン向けの固定幅(iOSの場合は980px)で作られていると仮定して一度描画した後、端末の画面サイズに合わせて縮小表示するようになっているからです。

ビューポート(viewport)のメタタグを設定すると、この横幅を仮定して描画し、それを縮小表示するという処理をキャンセルし、デバイスの幅に合わせて描画させることができます。

その書式はこちら。

ここで設定している項目の「width」はビューポートの横幅で、「device-width」を指定することで、ブラウザによるパソコン向けの固定幅ではなく、デバイスの幅に合わせて描画できます。
そして、「initial-scale」は、拡大縮小のスケールの指定で、「1.0」を指定することでデフォルトの拡大縮小をなしにしています。

メディアクエリーを使用してCSSを切り替える

続いて、メディアクエリーを使用したCSSの切り替え。

CSS内でメディアクエリー「@media…{}」を記述することで、画面幅によって条件分岐させて、適用するスタイルを切り替えることができます。

その書式はこちら。

「max-width」で「480px」が指定されており、画面幅の最大値が480px、つまり、画面幅が480px以下の場合に、その中のスタイルが適用されます。

「max-width」以外にも、以下のような値が設定できますが、基本的によく使用するのは画面幅の「max-width」、「min-width」になります。

  • 「max-width」…画面幅が指定サイズ以下のとき
  • 「min-width」…画面幅が指定サイズ以上のとき
  • 「max-height」…画面高さが指定サイズ以下のとき
  • 「min-height」…画面高さが指定サイズ以上のとき
  • 「orientation:portrait」…画面幅が高さ以下の場合(端末を縦に持っている場合)
  • 「orientation:landscape」…画面幅が高さ以上の場合(端末を横に持っている場合)

また、条件は複数指定することもできます。

そして、HTMLのlinkタグで指定し、画面幅によって読み込むCSSを変更することもできます。
しかし、1つのスタイルシート内で分岐させて記述する方が分かりやすいと思います。

メディアクエリーのサンプルと閾値

続いて、メディアクエリーのサンプル。

CSSは、基本的に後ろにあるスタイルが前のスタイルを上書きすることになり、優先されます。
そして、スタイルはPC用の表示を基本として共通のスタイルとして定義し、その後スマートフォン用に条件分岐させてスタイルを定義し、必要であればタブレット用も条件分岐させます。
そうすることで、無駄な記述を少なくできます。

レスポンシブWebデザインでよく使用するスタイルに「display」があります。
「div」タグにクラス名をつけておき、「display: none;」、「display: block;」を使用し、スマートフォンの場合は非表示にするといったことができます。

なお、スマートフォン、タブレットを条件分岐させる閾値ですが、スマートフォンは「480px」あたり、タブレットは「780~900px」あたりとしているところが多いです。

最後に

レスポンシブWebデザインの基本は、以上です。
WordPressテーマでも、今では多くのテーマでレスポンシブWebデザインが基本となっています。
そのため、カスタマイズする際には基本をしっかり知っておく必要がありますね。

 - HTML/CSS