creatersnest

レスポンシブのサイトを作るなら覚えておきたいメディアクエリの書き方


以前、ウェブを閲覧する媒体はPCのみでした。
しかし、スマートフォンや、タブレット、携帯用ゲーム機など
様々な媒体でウェブを閲覧出来るようになりました。

それに伴い、媒体毎に表示されるデザインが異なる
スマートフォンやタブレットなどに特化したページを
表示するというのが最近主流となっています。

サーバ側でユーザーエージェントを判別し
媒体に合うデザインのページへリダイレクトを行うことが以前、主流となっていましたが
その場合、同じ内容のページなのにも関わらず、異なる複数のURLが存在してしまうという問題を抱えています。

ですが、今回の題名でもある「レスポンシブデザイン」という手法と「メディアクエリ」による方法により、
その問題を解決出来ます。
今回は、その手法、メリット、そもそもレスポンシブデザインとは、メディアクエリとは、
といった事を、一つ一つ解説していきます。

そもそも「レスポンシブデザイン」とは?

「レスポンシブデザイン」とは、

  • 表示された端末ごとに表示内容を、デザインや機能の自由度は下がってしまうが、最適な状態にして表示を行うことが出来る
  • 更新作業の簡略化や、更新漏れの防止が期待出来る
  • 検索エンジンやアクセス解析時、内容が重複した複数の異なるURLが発生しなくなるため、管理が楽になる
引用:レスポンシブデザインとは|RWD|responsive design – 意味/解説/説明/定義 : IT用語辞典

というメリットがある、「手法」です。
「レスポンシブデザイン」を使用することにより、様々な環境、状態などから、最適な状態を判別し
ユーザに閲覧しやすいページを提供することが出来ます。

Twitterなど、多数の有名なサイトでも、「レスポンシブデザイン」が採用されており、様々な媒体での
最適な閲覧を可能としています。

 

 

「メディアクエリ」とは?

「メディアクエリ」とは、CSSで「レスポンシブデザイン」を実現するための方法です。
このメディアクエリを使用することにより、幅、高さ、向き、解像度などを条件にどのスタイルシートを使用するか
どのデザインを適用するか、などを判定させることが、可能です。

ですが、CSS2、CSS3というバージョンの違いにより、今までは「媒体」という

  • 一般的な画面
  • プロジェクタ
  • プリンタ
  • テレビ
  • 又は全ての環境か

これらのみとなる、ごく限られた判別しか出来ませんでした。
ですが、現在はCSS3が主流となり、

  • 最低幅
  • 最大幅
  • 最大高さ
  • 最低高さ
  • 画面の向き

などの、様々な条件要素を使用することにより、多種多様な端末を対応することが出来るようになりました。

以前はユーザーエージェントから判別し、特定のアドレスへリダイレクトさせることしか出来なかったことが、現在はCSSのみで、完結出来るようになりました。

そこで今回は、「どのスタイルシートを適用させるか」、「スタイルシート内のどのデザインを適用させるか」を、それぞれ解説していきます。

 

どのスタイルシートを適用させるか

どのスタイルシートを適用させるか、指定を行うにはlinkタグで、media要素を使用します。
例えば、一般的な画面にはこのスタイルを適用したい、という場合はこのように指定します。

これは、メディア要素に、”screen”という条件要素を追加することにより、一般的な画面の場合、このスタイルを使用する、という命令を表しています。

どのスタイルシートを適用させるか、指定させる場合のメリットは、

  • チーム開発時に、スタイルシート別のため、編集作業の効率化が求められる
  • 別々のスタイルシートのため全てのスタイルシートを読み込む必要はなく、最低限のデータ通信量となる

しかし、デメリットもあり、

  • 複数のスタイルシートを管理する必要がある

という問題もあります。
そのため、この方法で作成を行う場合、ベースとなるスタイルシートを作成し、それを基として各端末用のスタイルシートを作成する、という方法を使用するべきです。

 

スタイルシート内のどのデザインを適用させるか

先ほどのように、例として一般的な画面にのみ、スタイルを適用したいという場合は、このように指定します。

 

この条件式で囲っている範囲内の全てのスタイルシートは、その条件下でのみ、反映されます。

このメディアクエリを使用した場合、一つのファイルで管理することになるため、ファイルサイズが膨大化してしまう、という問題がありますが、非常に書きやすく、規模にもよりますが、編集しやすいため、小規模のプロジェクトにはおすすめです。

メディアクエリで使用可能な条件要素について

さて、長々とメディアクエリについて、メリットやデメリットについて、説明してきましたが、条件として使用可能な要素はまだまだあります。
その中でも主流な物をいくつか解説を入れて、ご紹介します。

 

幅を条件としたい

幅の最低値(それ以上である場合の条件)を指定する場合は、「min-width」を使用します。
最低値を条件として指定するメリットは、「それ以上の値の場合」を条件とすることが出来ることです。
そのため、PC向けのページを作成などに重宝されます。その場合は、基本となる768pxを指定すると良いでしょう。

また、幅の「最大値」を指定することも可能です。その場合は、「max-width」を使用します。
「最大値」を使用するメリットは、それ以下である場合、という判定を行うことが出来るため
スマートフォンなど、画面解像度が小さい端末などの判定に使用されます。
その場合、もしiPhone 4の判定を行いたいのであれば、640pxと指定すると良いでしょう。

 

高さを条件としたい

ヘッダメニューなどを画面に付ける場合、画面の幅によってはヘッダメニューにより見えなくなってしまいます。
そのような事態を解消するために、「高さ」を条件とすることにより、スマートフォンなどのモバイル端末でも
コンテンツを閲覧しやすく出来ます。

高さの「最低値」を指定することにより、「それ以上である」という条件を付ける事により、PCの場合にのみ、ヘッダメニューを表示するということが可能となります。
その場合は「min-height」を使用してください。

高さの「最大値」を指定した場合、「それ以下である」という条件を付けることが出来ます。それにより、スマートフォンなどのモバイル端末の場合にのみ、特定要素の表示を非表示にするなどといった事が可能です。
もしそのような事を行うのであれば、「max-height」を使用してください。

 

画面の向きを条件としたい

画面の幅により、サブメニューを常時表示するか否かなど、画面の向きを条件としたい場合などがあるのではないでしょうか。
そのような場合でも、画面が縦であるか、横であるかという条件を指定出来る条件要素が提供されています。
ちなみに、この条件は、「高さが幅と同じかそれ以上か、それ以下か」という条件分岐により、「画面の向き」という条件要素が使用出来るよう、提供が行われています。

また、この条件要素で使用されている「orientation」という名前の由来は、英語の「方位」という意味を表しています。

画面で縦である場合を条件式として指定する場合は、「orientation=portrait」を使用してください。
この条件要素を使用したメディアクエリを作成した場合、画面が縦でかつ、その他の条件もクリアしている場合、指定されているスタイルが反映されます。

画面が横である場合を条件式として指定する場合は、「orientation=landscape」を使用してください。
こちらの場合も同じく、画面が横になった際、その他の条件もクリアしている場合に限り指定されているスタイルが反映されます。

さて、これらの条件ですが、勿論複数の条件での一致ということも行うことが出来ます。
その場合、例として縦状態で閲覧されている場合のiPhone 4を判定する条件式は、次の通りとなります。

この条件式は、画面が「一般的な画面」であり、「最大の高さ」が960pxでかつ、画面が縦であることを判定しています。

このように複数の条件要素が全て合致した場合、スタイルを反映させるということも可能です。

今回は例として、iPhone 4の仕様に基づいた条件式で行いましたが、組み合わせ次第では多種多様な端末に対応することが出来ます。
それこそ、「縦画面専用ページ」や「横画面専用ページ」を作り出すことも可能です。

 

 

まとめ

レスポンシブデザインを使用することにより、端末に最適なページ表示の提供や、更新作業の簡略化を望むことが出来、検索エンジンの複数URLのインデックス化を防ぐなど、様々なメリットがあります。
また、メディアクエリについても、様々な条件があり、多様な端末を識別・スタイルの切り替えが可能です。

今回、条件式などは主流なものだけ、解説しましたが、他にも多数あります。
更に詳しい情報を参照したい場合、Google Developerや、その他海外サイト、掲示板など、メディアクエリや、Javascriptを使用した例など、様々なものを解説しているページがあります。
それらを見てみると、新たなアイデアを発見出来るかもしれません。

また、「メディアクエリで使用可能な条件要素について」の最後で述べているように、条件式を少し買えるだけで、多種多様な端末に対応することが出来ます。
この機会に、是非触ってみてはいかがでしょうか。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleシームレスな木目のフリーパターン素材30個