読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Bootstrapのカラム逆転(順序変換)を実装する際に気をつけたいところ

Bootstrap RWD

 タイトルで何を行っているのかよくわからない、という方は、まず例からご覧下さい。参照して欲しいのは、CSS · Bootstrap Grid のなかの「Column ordering」の部分。あるいは、この記事を通して見ていただきたいfiddleのページを作ったので以下をご覧下さい。

Reversing Columns in Bootstrap 3 - JSFiddle
 要は、Bootstrapのグリッドを使っている時に、モバイル時だけサイドバーをまず上に持ってきたい(あるいはその逆)、というケースがあって、そのための方法が「カラム逆転(順序変換)」です。サイドバーに広告があるけれどモバイル時に下に来たんじゃクリックされなくて困る、というケースに対処できる重要なBootstrap 3の機能です。
 しかし、これが以外と厄介なのです。しかもBootstrapオフィシャルの例は、簡潔すぎてあまり参考にならない。というわけでここではもう少し踏み込んだ形で説明します。
 該当のページのスニペットをコピペします。

<div class="row">
   <!--こちらはデスクトップの右側に9カラム分で現れ、スマホでは先(上)に来ます-->
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <!--一方、こちらはデスクトップ時には左側に3カラム分で現れ、スマホでは後(下)に来ます-->
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

 Bootstrapのサイトでこのスニペットに該当するデモを見て、あるいはこのマークアップとコメントを見て、何か気づいた方は鋭いです。そして、これが「カラム逆転(順序変換)」の一番落とし穴になる部分です。
 それは、右側に現れる9カラム分のブロックが、先にマークアップされている、ということです。そして、その上で、col-md-9とcol-md-push-3されています。つまり、マークアップの順序的には、モバイルがベースになっているのです。ここで、Bootstrap 3のサイトのランディングページに掲げられた文言に注目してみましょう。
f:id:sthmdnss:20141021204137p:plain
 mobile first とあります。Bootstrapでサイトを作って行く時、必ずしもモバイルファーストで作っていく必要も無いし、通常、Bootstrapもモバイルファーストで構築するように強制することはないのですが、この「カラム逆転(順序変換)」においてはmobile firstにせざるを得ない、というわけです。
 もしかしたら後半に続くかもしれません。日本語の修正も必要かもしれませんが、ここで一旦終わりにします。