本当に簡単な例から学ぶレスポンシブコーディング

「レスポンシブウェブデザイン」が流行りだしてからずいぶん経ちますね。一時は「一過性の流行りかな？」と思っていたのですが相変わらず需要は多いみたいです。

レスポンシブコーディングに関しては苦手意識を持っている人も多いようですが、根本的な仕組みはものすごく単純で、後はそれを応用して行くだけですので実際に手を動かしながら勉強すればすぐ身につくかと思います。

そこで今回はレスポンシブコーディングの中でも単純な基本パターンをいくつかご紹介したいと思います。

基礎知識

まずは以下のサンプルを見てください。

サンプル

このサンプルを開いた状態でブラウザの幅を縮めたり広げたりすると色が変わりませんでしたか？

この変化はレスポンシブサイトを作るために必須である「メディアクエリ」の機能を利用し行っています。

実際にどのようなCSSを書いたかというと以下のとおりです。

/***********************************************************************
ブラウザの幅が768px以上ならここの記述が有効になる
**********************************************************************/
@media only screen and (min-width: 768px) {
  body {
    background: #000000;
  }
}
/***********************************************************************
ブラウザの幅が767px以下ならここの記述が有効になる
**********************************************************************/
@media only screen and (max-width: 767px) {
  body {
    background: #ff0000;
  }
}

キモは

@media only screen and (~) {
}

の部分です。この部分が「メディアクエリ」と呼ばれているものです。

「メディアクエリの括弧内に書いた条件を満たしている時のみ、記述したCSSが有効になる」というような効果を持っています。

括弧内に書ける条件は色々あるのですが、主に使うのは「min-width」と「max-width」です。

「min-width: ~px」と書くと「ブラウザの幅が~px以上」の時にCSSが有効になり、「max-width: ~px」と書くと「ブラウザの幅が~px以下」の時にCSSが有効になります。

なのでブラウザの幅が767px以下の時に背景が赤くなって、768px以上の時に黒くなったわけですね。

レスポンシブはこのメディアクエリの「ブラウザの幅によって特定のCSSを有効/無効にする」という特徴が全てで、あらゆるレイアウトの変化をこの特徴を利用して実現します。（もちろん実現できない変化も多いですが…）

実例

それでは、先ほどの基礎知識を踏まえた上で実際の例を見ていきましょう。

これから先の例は、レスポンシブサイトでも簡単な「PCレイアウト」と「SPレイアウト」のみのタブレットレイアウトが無いパターンでご紹介したいと思います。
（実際の案件でもこのパターンが多いです。）

具体的には「ブラウザの幅が768px以上でPCレイアウト」「ブラウザの幅が767px以下でSPレイアウト」「PCレイアウトのコンテンツの幅は960pxなので、768~959pxで横スクロールバーが出る」パターンです。

パターン①「PC: 写真左+テキスト右」⇔「SP: 写真上+テキスト下」

サンプル

一番よく見るのがこのパターンです。PCサイトでは写真とテキストを横並びにして、SPサイトだと縦並びにしているパターンですね。

これは以下の様なHTML/CSSを書いています。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: left;
    width: 460px;
  }
  .row .txt {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

PCレイアウトはよくあるfloatを使った横並びパターンですね（「floatがまだよくわからない」という方はこちらの記事がオススメです）。

先ほどの説明の通り

@media only screen and (min-width: 768px) {
  ~
}

で囲まれているCSSは「ブラウザの幅が768px以上」のときのみ有効なので、「ブラウザの幅が767px以下」の時はfloatの指定もwidthの指定も無かったことになります。

なのでSPレイアウトでは写真とテキストが横並びにならず、縦にならんでいるわけです。

パターン②「PC: 写真右+テキスト左」⇔「SP: 写真上+テキスト下」

さて、次は先ほどと似ていますが、PCレイアウトの時の写真とテキストの並びが逆のパターンです。

サンプル

この場合のHTML/CSSは以下のようになります。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right;
    width: 460px;
  }
  .row .txt {
    float: left;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

このレイアウトはさっきのパターンをちょっとだけ弄れば実現出来るのですが、どこを弄ったかわかったでしょうか？

正解はPCレイアウトにおける.photoと.txtの「float」の部分です。

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right; /* ここと */
    width: 460px;
  }
  .row .txt {
    float: left; /* ここ！ */
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

上のようにfloatのleft、rightの記述をさっきのパターンと逆にするだけで出来てしまいます。

パターン③「パターン①のちょっと複雑なバージョン」

実際のパターンでは、写真とテキストだけでなく、次のように「写真+写真の説明」と「見出し+テキスト」が並んでいるようなパターンも出てきます。

サンプル

HTML/CSSは以下のようになっています。

<div class="row clearfix">
  <div class="leftCol">
    <p class="photo"><img src="~" alt=""></p>
    <p class="note">画像の説明</p>
  </div>
  <!-- /.leftCol -->
  <div class="rightCol">
    <p class="leading">見出し文見出し文見出し文</p>
    <p class="txt">テキストテキストテキスト</p>
  </div>
  <!-- /.rightCol -->
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .leftCol {
    float: left;
    width: 460px;
  }
  .row .rightCol {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .leftCol {
    margin-bottom: 20px;
    text-align: center;
  }
}

パターン①では.photoと.txtに直接floatを与えていましたが、今回は少々複雑なので以下のように「leftCol,rightCol」という枠を作り、それにfloatを与えています。

ぱっと見て少々複雑に見えるパターンでも、実際は今回のようにパターン①の応用で出来るものが多くあります。

また、今回は下のように、幅によらない共通のスタイルはメディアクエリを使わず、普通にCSSを書くことでどの幅でも反映されるようにしています。

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

パターン④「PC: テーブル ⇔ SP: 縦並び」

サンプル

最後に、これもよくあるテーブルレイアウトのレスポンシブコーディングをご紹介したいと思います。

テーブルはPCレイアウトで使ったものをそのままSPレイアウトでも使ってしまうと、かなり窮屈になってしまうことが多々あります。

そこで今回のように、SPレイアウトでは縦並びにすることで解決する方法をよくとります。

HTML/CSSは以下のとおりです。

<table class="sampleTbl">
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
</table>
<!-- /.sampleTbl -->

/***********************************************************************
ブラウザの幅によらない共通のCSS
**********************************************************************/
.sampleTbl th {
  background: #f0f0f0;
  font-weight: bold;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .sampleTbl th,
  .sampleTbl td {
    padding: 10px;
    border: 1px solid #cccccc;
  }
  .sampleTbl th {
    width: 70px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .sampleTbl {
    display: block;
  }
  .sampleTbl tr,
  .sampleTbl th,
  .sampleTbl td {
    display: block;
  }
  .sampleTbl tr {
    border-bottom: 1px solid #cccccc;
  }
  .sampleTbl tr:first-child {
    border-top: 1px solid #cccccc;
  }
  .sampleTbl th,
  .sampleTbl td {
    padding: 5px;
  }
}

PCレイアウトでは特別なことをせず、普通にテーブルのコーディングをしているだけです。

注目してもらいたいのはSPレイアウトのスタイルです。

とくに何もしなければSPレイアウトでも普通のテーブル見た目になってしまうのですが、「table,tr,th,td」に「display: block」を指定することで縦並びにしています。

/* display: blockを指定して縦並びにしている。 */
.sampleTbl {
  display: block;
}
.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
}

デフォルトだとtable要素は「display: table;」、tr要素は「display: table-row;」、th,td要素は「display: table-cell;」が設定されており、それによっていつものテーブルの見た目になっているのですが、それを「display: block;」によって上書きすることで縦並びにしています。

このパターンは非常によく使うのでぜひ覚えておいてください！

IE9では注意！

先ほどのtableをSPレイアウトで縦並びにするテクニックですが、IE9では対策が必要です。

IE9だとdisplay: blockだけでは足りず、下のようにスタイルを与える必要があります。

.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
  float: left;
  width: 100%;
}

IE9ではなぜか「float」を設定しないとblock要素として認識されず、さらにfloatだけだと幅が短くなってしまうので「width: 100%」を指定する必要があります。

以上

レスポンシブはマークアップエンジニアだけでなく、デザイン専門のデザイナーでも基本的な仕組みとパターンは知っておかないとコーディングで実現不可能なデザインが出来上がってしまいます。
苦手意識を持っている人が多いようですが、実際にやってみるとそれほど難しいものでもないので、一度是非手を動かして挑戦してみて下さい！

以上、たにっぱでした〜