「スマートフォン対応のホームページ作成」

　パソコン用に制作したホームページは、そのままでもスマートフォンで閲覧できます。ただし、そのまま何もしていないと全体が縮小されて表示されますので、テキストを見やすい状態で読むには、見たい箇所を拡大するなどの操作が必要となります。

　そこで、ユーザーが拡大などの操作をしなくても見やすい状態で表示されるように、スマートフォン向けに異なるレイアウトを用意しているサイトも多くあります。パソコンとスマートフォントとで異なるレイアウトにするためには、プログラムでパソコンかスマートフォンかを判別してスマートフォン専用に作成した別のページを表示させる方法と、メディアクエリーという機能を使用してパソコンとスマートフォントとで読み込ませるCSSを切り替えてそれぞれに適したレイアウトで表示させる方法の2種類があります。

　メディアクエリー（http://www.w3.org/TR/css3-mediaqueries/）はCSS3の機能ではありますが、その仕様は2012年の段階ですでに確定したものとなっており、すでに広く利用されはじめています。たとえば、メディアクエリーはlink要素やstyle要素のmedia属性として次のように記述することができ、CSSを適用させる対象を「表示領域の幅」などによって振り分けることが可能となっています。

【例】media="screen and (min-width: 500px) and (max-width: 1000px)"