レスポンシブなサイトの仕組み解説と、左サイドバーのレスポンシブレイアウトをつくるお手軽レシピ

レスポンシブな左サイドバーをどうやってつくるのよという、自分のなかで一瞬だけ話題沸騰だったことがあったのを思い出したのでご紹介。

簡単に説明するためにこのサイトの旧トップページで説明します。
見てもらえばわかると思いますが、2カラムの右サイドバーという構成になっています。

FireShot-Pro-Screen-Capture-007-natrium51g-www_natrium51g_com(1)

左にコンテンツがあって、右にすこし幅の狭いサイドバー。
これを右にコンテンツで、左にサイドバーという形にしたいと。

ちなみにbootstrapで現在のトップページのレイアウトをつくる場合は

こんな感じでHTMLを組んであげればいいわけです。とてもカンタンで、なにひとつ難しいことはない。

これだけ見ると、コンテンツを右にしてサイドバーを左にしたいなら単純に逆にすればいいじゃない、普通はそう考えると思います。というかそれであっています。レスポンシブにしない限りは。

そうなんです。問題はレスポンシブ対応をどうするかという点にあります。

レスポンシブデザインの仕組み

レスポンシブデザインでサイトをつくるには、レスポンシブなサイトでなにが起きているのかを知らないと始まりません。ということでレスポンシブなサイトの基本を見てみましょう。

まず、レスポンシブとはなにか。
カンタンに言ってしまえばユーザのサイト表示環境にあった見せ方をすることをいいます。よく解説なんかで出てくるのが、パソコンとタブレット端末とスマートフォンではデバイスのディスプレイサイズが異なるからそれぞれにあった見せ方をしましょうという説明です。

fig01-600x249(1)

これを実現するためにレスポンシブなサイトでは一定の幅毎にサイトのレイアウトを変えて、小さい画面でも見やすい環境を提供している訳です。このサイトのトップページでブラウザの横幅を小さくしてみればわかりやすいと思います。

具体的にはCSSのメディアクエリーというもので、このサイズならサイトの横幅はこれ、このサイズならこれという具合に、サイズごとにスタイルを切り替えることで実現します。

しかし、横幅毎にすべてのレイアウトを定義しなおすなんてことはさすがにやってられません。そのため多くのサイトで実際に取られているやりかたは、一定のサイズ毎にカラムを落とすというやりかたです。
一昔前にはあちこちで見られた、「レイアウトが崩れてサイドバーが下に落っこちちゃってるよ」とか言われた、あれです。あれを故意におこします。

では、どうやって故意にサイドバーを落とすのか。ここでもキーになるのは横幅です。
たとえば、サイトの横幅を750pxに設定してあるサイトがあるとします。このサイトを2カラムにして500pxと300pxのボックスを横に並べると合計800px。当然750pxに収まりません。すると収まりきらなかった後ろのボックスが下に回り込んで縦に並ぶことになります。

FireShot-Pro-Screen-Capture-008-natrium51g-www_natrium51g_com(1)

これが「レイアウトが崩れてサイドバーが下に落っこちちゃってるよ」の原理です。

ほとんどのレスポンシブなサイトでは、内部のボックスサイズを変えずに、表示領域にあわせてサイト全体の横幅を小さくしたり大きくしたりすることで、ユーザーに見てもらいたい優先順位の低いボックスをあえて下に回り込ませることをしていると理解すればいいでしょう。

小さい画面でサイトを見たときに延々と長いサイドバーをスクロールしないと本命のコンテンツが見れないなんてアホくさいですからね。

左サイドバーのレスポンシブレイアウトをつくる

ここでようやく本題に入ります。

上でも説明したとおり、レスポンシブにカラムを落とす仕組みでは、サイトの横幅を超えて入りきらないボックスが下に回り込むようになっています。当然最初に入っているボックスはそのままで、後に入れようとしたボックスが落ちる。

冒頭で紹介した例でいくと

後に追加されているsidebarが落ちることになるワケです。

しかし、やりたいことは左のカラムにサイドバーを持ってくること。何も考えずに左のカラムにサイドバーをもってくれば、レスポンシブなサイトの仕組みではサイドバーが上に残ってコンテンツが落ちてしまいます。
これでは本命のコンテンツを見るまでにサイドバーを延々と見ることになってしまい、レスポンシブにして見やすさに配慮した意味がありません。

ではどうやってレスポンシブなサイトで左サイドバーをつくるのか。固定レイアウトなら問題なく実現できる左サイドバーのレイアウトは、レスポンシブなサイトではひと手間が必要になってきます。

今回の解決方法は二種類

レスポンシブサイトでの代表的な左サイドバー対策は二種類。

ひとつめは大胆にもサイドバー自体を消しちゃうというやりかた。ある意味潔くて好感がもてる。

やりかたはカンタン。メディアクエリーをつかって、一定のサイズ以下になったらサイドバーにdisplay: noneを指定するだけ。

この方法ならサイズが小さくなったらサイドバーを消してしまうだけなのでHTML的にサイドバーを左に書こうが、右に書こうが関係ない。サイドバーだけではなく、トップメニューとかロゴとかいろんなところでつかうことができるやりかた。
ただし、サイドバーに重要なナビゲーションが含まれていて、ここからでしか表示できないコンテンツがあるとか、著しくユーザビリティが落ちる場合は使えない方法かなと。

ふたつめはfloatで見た目上のボックスを入れ替えるやりかた。仕組みがわかれば汎用性が高い。

まずは考え方として一番小さいサイズの時の表示を基本に考える必要がある。
なんども言っている通り、レスポンシブサイトの場合は後に入れようとしたボックスが下に落ちる仕組みになっているから、HTMLとしては先にコンテンツを書いて、その後にサイドバーという構成でつくるのは外せない。

ただ、このままではサイドバーが右にきてしまうので、大きなサイズの時はこれをfloatで左に無理やりもってくるようにすればいい。つまり、HTML的には左コンテンツ、右サイドバーだけど、実際の見た目はCSSで左サイドバー、右コンテンツにするというやりかた。

具体的には、大きいサイズの時はsidebarに float: left 、contentに float: rightを指定するだけ。clearfixを考慮して overflow: hidden も指定してやればさらに良し。
あとは小さいサイズの時に横幅一杯までボックスを指定してあげれば出来上がり。

ほらカンタン。お手軽な時短レシピ。

ちなみにせっかくbootstrapで解説してんだからbootstrapの場合も説明すると、bootstrapではspan1とかspan2とか言ってるspan*には最初から float: left が指定してありまして、ボックスの位置を入れ替えるなら span* と一緒に pull-rightというクラスを指定してやればOKです。

こんな感じ。こちらもやはり個別に overflow: hidden を指定してあげるとなお良しかなと。

レスポンシブサイトの左サイドバー対応は探せばもっとあると思いますが、これ以上探すのは正直めんどくさいので他にもあれば教えてください。

エントリーのまとめ

最近はテーマとかプラグインをつくるよりエントリーを書いてる時間のほうが長くなってきている気がしてならないので、ちょっと時間配分を考えないと意味がわからんことになってしまいそうです。

まあそんなことは置いておいて、スマートフォンとかタブレットが主流になって、意味のわからない独自仕様のガラケーが駆逐されつつあり、モバイルの回線スピードもあがる一方な現状はクリエイターにとってやりやすい環境ができているような気がします。

これからはレスポンシブなサイトはあたりまえになってますし、難しいことではないのでレスポンシブの仕組みは覚えておいて絶対損はありません。

このエントリーをみて一ミリくらいでもためになったという人が増えたら幸いです。

だれかの役にたててたらいいなー。