Bootstrap3でさくっとレスポンシブ化してみる

2013-11-08

誰でも簡単にレスポンシブサイトを作ることができるBootstrap。前回の記事ではBootstrap3を使ってCacooで作ったのワイヤーフレームから簡単なWebサイトを制作しました。

Botstrap3でサクッとWebサイトをつくってみる

今回はそのWebサイトをレスポンシブレイアウトに最適化していきたいと思います。Bootstrapを使えばクラス名を指定するだけで簡単にレスポンシブ化も可能なのですが、実際には少し修正が必要な場合があります（デフォルトのスタイルを変更した場合など）。

前回作ったwebサイトも少し修正したいところがあるので、ここで完成するまでの修正作業を行いたいと思います。

制作したWebサイトをレスポンシブ化する

では前回作ったサイトをチェックしてみましょう。

全体的には問題ないのですが、一部修正が必要な箇所があります。

ナビメニューの崩れ
画像ボックスの幅

ナビメニューはこのようにPCサイズのメニューがそのまま出てきているので、これをテーブルのように縦に並ぶように修正。

画像ボックスはwidthが100%になっているため横に長く伸びてしまうところを修正していきます。

ナビメニューの崩れを修正する

ナビメニューはBootstrap3のデフォルトのメニューを使用したいので、PCサイズのメニューが出てこないように修正すればOK。これは単純に@mediaでPCサイズのスタイルを囲ってやるだけで解決します。

さらに元は濃いグレーだったものが、真っ白になってしまうため配色も変更しておきます。ちなみに@mediaはmin-widthで指定した幅以上に適用、max-widthは指定した幅までに適用するとなります。

/*  nav
/--------------------------------- */
@media (min-width: 768px){ /* xsサイズでの崩れ防止 */
    .navbar {
        border-radius: 0;
    }

    .navbar-nav {
        float: none;
        width: 400px;
        margin: 10px auto;
    }

    .navbar-nav>li {
        text-align: center;
        float: left;
        width: 80px;
        border-right: 1px solid #000;
    }
    .navbar-nav>li.first {
        border-left: 1px solid #000;
    }

    .navbar-nav>li>a {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .navbar-default {
        background-color: #7E7E7E;
        border:none;
    }

    .navbar-default .navbar-nav>li>a {
        color: #fff;
    }

}

/* navスタイリング */
@media (max-width: 768px){
    .navbar-default {
        border-color: #7E7E7E;
    }

    .navbar-header {
        background-color: #7E7E7E;
    }

    .navbar-default .navbar-toggle {
        border-color: #FFF;
    }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: #FFF;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #FFF;
    }
    .navbar-default .navbar-toggle:hover > .icon-bar,
    .navbar-default .navbar-toggle:focus > .icon-bar {
        background-color: #7E7E7E;
    }

    .navbar-default .navbar-brand {
        color: #FFF;
    }

}

画像ボックスを最適化する

画像ボックス（パネル）はモバイルサイズになると横幅いっぱいに広がってしまうため、幅を固定して表示させたいと思います。案件によっては可変幅でOKという場合も多いので、ケースバイケースで変更します。

やりかたは指定したいところにwidthでサイズを記述して、中央に寄せるようにすればOK。

@media (max-width: 768px){
    .panel{
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

Bootstrap3で簡単レスポンシブ化

ナビもパネルもこちらの意図通りに修正できました。もちろんBootstrapを使用していなくても、@mediaを駆使して各画面サイズごとにパネルやメニューの表示非表示を変えることができます。が、Bootstrapならクラス名を指定するだけで解決する場合が多いため作業量は大幅に短縮できるでしょう。

この後はデザイナーさんからいただいた画像を必要な場所に貼付けたり、配色の変更をしたりといった作業になります。

ここまでBootstrap3を使ってワイヤーフレームからWebサイトを作り、さらにレスポンシブ化へ修正まで行ってきました。Bootstrapを使うと、ちょっとした修正だけで簡単にレスポンシブ化が可能になるので是非使ってみて下さい:)

こちらの記事も一緒にどうぞ。

Bootstrap3.0でlg（ラージ）サイズだけ使いたくない場合の設定方法
 Bootstrap3.0のドロップダウンをマウスオーバーで使用する方法
 Bootstrap3.0　レスポンシブを使わず固定幅で使う方法