はじめに

このシリーズでは数回に渡り、レスポンシブ・ウェブデザインの考え方や、その考え方に沿ったHTML／CSSコードを、ピクセルグリッドが実際に使用したものを例を紹介していきます。

この記事は主にマークアップを行うエンジニアを対象に、レスポンシブ・ウェブデザイン採用時に必須となる高度なCSSの設計知識の向上を目的とします。

レスポンシブ・ウェブデザインの考え方

ご存知の通り、いわゆるレスポンシブ・ウェブデザイン（以降RWD）は、Webブラウザの特性（主に画面サイズ）に応じて、CSSなどを切り替えるという手法です。

マルチデバイス対応のためには、端末（PCやスマートフォンなど）に応じた完全な「HTMLの出し分け」と、今回話題にしている「RWD」があります。

「RWD」は「HTMLの出し分け」と異なり、ひとつのHTMLを利用します。そのため、パフォーマンスやUIの完全な最適化を行うことはできません。しかし、複雑なバックエンドの仕組み（CMS、コンテンツの出し分けやそれに伴うリダイレクトなど）の準備がなくても、フロントサイドのみでマルチデバイス対応ができるという特徴があります。

メリット

• 複雑なバックエンドの仕組みがなくても、フロントエンドのみで対応が可能
• HTMLの出し分けに比べ、管理しなくてはならないリソースの数や容量を抑えられることが多い
• 画面表示内容を主にスクリーンのサイズを基準に最適化するので、基本的なCSSが実装されている未知のデバイス*に対しても、自動的に対応できる

デメリット

• パフォーマンスをデバイスごとに最適化できない
• 高度なCSSの設計知識が必要

「HTMLの出し分け」と「RWD」はどちらを採用するにしても一長一短なのです。ですので、どちらを採用すべきかをコンテンツの性質から判断できるといいでしょう。

「RWD」はどのように実装するか

ご存知の通り「RWD」を実現するには、主にCSSのMedia Queriesというテクノロジーを利用します。また、CSSだけでは実現できない場合には、JavaScriptを併用します。

CSSのコードの配置

広く知られている方法はいくつかあります。

• CSSファイル自体を分ける方法
• @media規則で1ファイル内にメディア特性単位に書く方法
• @media規則で1ファイル内にパーツ単位で書く方法

それぞれの方法をコードで例示してみましょう。

方法1：CSSファイル自体を分ける方法

この方法は管理が大変で積極的にはおすすめできません。一度作ったら二度とメンテナンスしないというサイトは皆無です。メンテナンスの際に、ファイルごとコード分割されてしまったらコード検索しづらく、大変な思いをします。

<link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
<link rel="stylesheet" href="tablet.css" media="(max-width:768px) and (min-width: 321px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:320px)">

方法2：@media規則で1ファイル内にメディア特性単位に書く方法

この方法も管理が大変でおすすめできません。たとえば以下のようなコードになるのですが、変更が入るたびに該当するコード探す（検索する）手間が、分割した分だけ発生してしまいます。

@media(min-width:769px){
    .pageHeader{/*...略...*/}
    .pageMain{/*...略...*/}
    .pageSub{/*...略...*/}
    .pageFooter{/*...略...*/}
}
@media(max-width:768px) and (min-width: 321px){
    .pageHeader{/*...略...*/}
    .pageMain{/*...略...*/}
    .pageSub{/*...略...*/}
    .pageFooter{/*...略...*/}
}
@media(max-width:320px){
    .pageHeader{/*...略...*/}
    .pageMain{/*...略...*/}
    .pageSub{/*...略...*/}
    .pageFooter{/*...略...*/}
}

方法3：@media規則で1ファイル内にパーツ単位で書く方法

この方法がもっとも管理しやすくおすすめです。私自身も開発時にはこの方法を用いています。ただし方法2に比べるとコード量が相対的に増え、ファイル容量は少し大きくなってしまいます。デプロイ時には容量を軽減するための処理を併用するとよりよいでしょう。

/* pageHeader */
.pageHeader{/*...略...*/}
@media(max-width:768px){
    .pageHeader{/*...略...*/}
}

/* pageMain */
.pageMain{
    float:left;
    /*...略...*/
}
@media(max-width:768px){
    .pageMain{
        float:none;
        /*...略...*/
    }
}
/*...略...*/

パーツ単位で書く方法のコツ

特性（主にスクリーンサイズ）の単位でコードをまとめてしまうと、同じ箇所（classやidなど）をコントロールするスタイルが離れた場所に配置されることになります。たとえば、あるひとつのパーツのスタイルを調整するとき、複数のファイルにまたがり該当箇所を探す必要があります。うっかり検索ミスをしてしまうと、容易に調整漏れが発生する可能性もあります。

一方で、パーツ単位でまとめておけばそれはありません。パーツ単位の区切りとして上手くコメントを使い、パーツ単位でCSSのコードをまとめておくといいです。

もうひとつのコツとして、デスクトップ向けの記述は@media規則の外に出しておき、その上で、その他のデバイス（タブレットやモバイル）向けに上書きをして、デスクトップ向けのスタイルを流用することです。この理由は次回にご紹介します。

まとめ

この記事では「RWD」を実現するCSSにどのような実装方法があるか、代表的なものを概観しました。次回は「@media規則で1ファイル内にパーツ単位で書く方法」を、具体的なコード例を見ながら解説したいと思います。