Twitter Bootstrap利用時にスマートフォンで見てもグリッドが効く様にしてみた

みなさん初めまして。ソフトウェア開発部の丹です。

主にHTML/CSS/JS等を書いています。

Twitter Bootstrapで制作したサイトをスマートフォンで表示した際、通常グリッドは使えなくなるのですが、それを可能にする方法を紹介したいと思います。

そもそもTwitter Bootstrapって何？

Twitter謹製のCSSフレームワークです。

グリッドと呼ばれる横並びレイアウトが簡単に出来たり、よく見るボタンや機能が予め搭載されているCSSです。

最近はJavaScriptも追加され、折り畳みを始めとするよくある機能が簡単に使えます。

–Twitter Bootstrap

さっそくグリッド対応させてみる

/**
 * GridSystem for Mobile Display
 */
@media only screen and (max-width: 767px) {

    /* 画面両サイドの余白調整 */
    body {
        width: 100%;
        padding:0;
    }

    .container-fluid{
        padding-left:0; padding-right: 0;
    }

    /* GRID  */
    [class^="row"] > [class*="span"]{
        float: left;
        margin-left: 2.564102564%;
    }
    [class^="row"] > [class*="span"]:first-child {
        margin-left: 0;
    }
    [class^="row"] > .span12 {
        width: 100%;
    }
    [class^="row"] > .span11 {
        width: 91.45299145300001%;
    }
    [class^="row"] > .span10 {
        width: 82.905982906%;
    }
    [class^="row"] > .span9 {
        width: 74.358974359%;
    }
    [class^="row"] > .span8 {
        width: 65.81196581200001%;
    }
    [class^="row"] > .span7 {
        width: 57.264957265%;
    }
    [class^="row"] > .span6 {
        width: 48.717948718%;
    }
    [class^="row"] > .span5 {
        width: 40.170940171000005%;
    }
    [class^="row"] > .span4 {
        width: 31.623931624%;
    }
    [class^="row"] > .span3 {
        width: 23.076923077%;
    }
    [class^="row"] > .span2 {
        width: 14.529914530000001%;
    }
    [class^="row"] > .span1 {
        width: 5.982905983%;
    }
}

上記コードを保存したCSSをbootstrap-responsive.cssを読み込んだ後に読込むだけです。

追記してもいいです。

簡単な解説

そもそも何故スマートフォンではグリッドが効かないのか。

bootstrapのオリジナルソースに書かれていません。 PC表示を前提としているので、バナーのように大きな画像を小さくするのは変になる可能性があると思ったのでは無いでしょうか。

mediaqueriesの767px

これはスマートフォン横向けした時まで対応する幅になります。

これ以上大きくすると、タブレットの縦向けの大きさになります。

width を 横幅一杯にする?

body {
    width: 100%;
    padding:0;
}

.container-fluid{
    padding-left:0; padding-right: 0;
}

それぞれのプロパティで画面左右の余白を調整出来ます。

上記の場合だと、左右の余白を完全に取ります。

グリッド設定

[class^="row"]でrowで始まるclassを指定し、その中の各.spanのwidthをそれぞれ設定しています。

リキッドレイアウトになりますが、スマートフォン向けの場合はリキッドの方が色々都合が良いですよ。

便利です

慣れたらとても便利なので、是非一度使ってみて下さい。