いつの間にか開発に異動した岡本です。

今回はレスポンシブサイトでやらかしてしまいがちな「残念なサイドバー」と、CSS3行だけでできる対応法について紹介したいと思います。

レスポンシブサイトで起こりがちな「残念なサイドバー」

まずはこの画像をご覧ください。

バナーは小さすぎて文言が読めず、カテゴリなどのテキストは不自然な改行をしている。

こんなちょっと「残念なサイドバー」を持つサイトを見たことはありませんでしょうか？

レスポンシブデザインのサイトでは、ブラウザサイズによってこのように「残念なサイドバー」が発生することがままあります。

帯に短し襷に長し、肥大化するサイドバー用CSS

多くの場合、「残念なサイドバー」が登場する原因は「小さいサイズのブラウザが考慮されていないこと」です。

「スマホ向け」と「PC向け」のようなレスポンシブというよりはアダプティブなサイトデザインでは、iPhone6PlusやXperia Z Ultraのような「スマホ以上タブレット未満の端末（いわゆるファブレット端末）」に対応することが困難となります。

先ほどのような見難い・使いにくいサイドバーが出来上がってしまった時の対応策としては、「崩れたブラウザサイズ向けのCSSを追加する」という方法が一般的ではないかと思います。

しかしそれでは小さな崩れを見つける度にCSSが追加され、次第に管理が困難なソースができあがってしまいます。そこでお勧めしたいのは、「サイドバーを半固定化する」という方法です。

発想の転換：「サイドバーを半固定化する」

「半固定化サイドバー」ではサイドバーの横幅に最小値を設定し、それ以上小さくならない様にCSSで調整します。

サンプルコード（HTML)

<div class="container">
  <div class="main-content">
    メインコンテンツ（横幅70%）
  </div>
  <div class="side-content">
    サイドバー（最小値250px、横幅30%）
  </div>
</div>

メインコンテンツとサイドバーのマークアップがこのようなものの場合、CSSは次のようになります。

サンプルコード（CSS)

/*基本設定*/
.main-content{
    width: 70%;
    float: left;
}
.side-content{
    width: 30%;
    float: left;
}

/*追加するコード*/
.main-content{
    max-width: -webkit-calc(100% - 250px);
    max-width: calc(100% - 250px);
}
.side-content{
    min-width: 250px;
}

*追加するコードがわかりやすいように分割していますが、実際に利用される際はまとめて使って頂いても問題なく動作します。

min-widthでサイドバーの最小値を設定しつつ、max-widthに「calc」というCSS3のプロパティを用いることでサイドバー用の250pxを常に確保できるようにしています。

もちろんmin-width:250pxが適用されるまでのサイズでは、基本設定の70%:30%の比率でコンテンツが展開します。

サンプル（jsdo.it）

さらにメディアクエリでスマホ用のレイアウトを追加したものがこちらです。

追加コードはたったの３行！今すぐお試しを

先ほどのサンプルを見ていただくとわかるように、半固定化サイドバーを実装するために必要なコードはCSSたったの3行です。

いちいちメディアクエリを追加して調整するよりも遥かにカンタンで、サイドバーの視認性も確保しやすい方法ですのでぜひお試しください。

[追記]CSS3を使わないで実装する方法２つ

記事公開後、失恋.jpのkaitoさんより、「もっとカンタンにできるよ」とコメントを頂きました。

CSS3のcalcを使わずに半固定化するコードがこちらです。
【HTML】

  <div class="side-content-simple">
    サイドバー（最小値250px、横幅30%）
  </div>
  <div class="main-content-simple">
    メインコンテンツ（横幅70%）
  </div>

HTMLではサイドバーとメインコンテンツの順番が先ほどとは逆になります。

【CSS】

.main-content-simple{
    overflow: hidden;
}
.side-content-simple{
    min-width: 250px;
    width: 30%;
    float: right;
}

そしてCSSはサイドバー部分にfloat:rightとwidthの設定をするだけ。

calcを使用するとIE8以前などの一部ブラウザに対応できなくなるデメリットがありますので、対応ブラウザの条件によってはこちらの方が素直に動作してくれそうです。

ついでに：table-cellでも実現可能

ちなみにdisplay:table-cellを使用した実装も可能です。
この場合のコードは
【HTML】

<div class="container table">
  <div class="main-content-table">
    メインコンテンツ（横幅70%）
  </div>
  <div class="side-content-table">
    サイドバー（最小値250px、横幅30%）
  </div>
</div>

【CSS】

.container.table{
    display: table;
    width: 100%;
}
.main-content-table{
    display: table-cell;
    width: 70%;
}
.side-content-table{
    min-width: 250px;
    width: 100%;
}

となります。

全部盛りサンプルはこちら
３種類とも同じ表示結果になりますので、サイトの状況にあわせて使い分けて頂ければと思います。

モバイルファーストラボ　編集部