【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

たった3行から!サイドバーを圧倒的に見やすくする「半固定化CSS」3つ【追記あり】

たった3行から!サイドバーを圧倒的に見やすくする「半固定化CSS」3つ【追記あり】

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

今回はレスポンシブサイトでやらかしてしまいがちな「残念なサイドバー」と、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)

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

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

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

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

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

記事公開後、失恋.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%;
}

となります。

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+