レスポンシブWebデザインのコーデングにあたって

デバイスごとにCSSを用意する

繰り返しになりますが、レスポンシブ、Webデザインは、PC、タブレット、スマートフォンなどの複数デバイスに対応させる制作手法です。複数の異なる画面に応じて、ページのレイアウトやデザインをCSS側で調整して、Webサイトの表示を切り替えます。

新デバイスへの対応も容易

このような手法を選択しなければいけない背景としては、前出のマルチデバイス化が大きく関係しています。複数のインターネット閲覧ツールがあるので、スマートフォンを車ll!に据えながらも、タブレットやPCユーザーを取りこぼすわけにはいかないのです。

ひょっとすると、そのうちに新しいツールが開発されるかもしれません。現状では空想の範鴎でしかありませんが、スマートフォンの画面の大きさを調整できるようになったり、通信環境がさらに発達したりすれば、PCとモパイルのよい部分だけを取った画期的なツールが登場する可能性もあります。かつて「ゲーム&ウオッチ」という任天堂の2画面折り畳み式の携市型ゲームが流行りましたが、たとえば、「通常の利用では1画面、PCのように利用したいときは4画面」などのデバイスが生まれるかもしれません。これは何の根拠もない他愛ない話ですが、今後もし新しい規格の画面が出てきた場合でも、CSS記述の調整だけなら、どんなデバイスであろうとも、即座に対応しやすいという長所があります。

HTML側での作業は多くない

勘違いされがちなのですが、CSS3のメディアクエリを利用するからといって、HTML5で作らなければいけない、なんてこともありません。スマートフォン/タブレット/PC用と3つのパターンを作成する場合は、次のような順序でCSSを記述します。原則、HTML側での作業はあまり多くは発生しません。