Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る #CSS

プログラマの永遠の悩み。デザイン。
とりあえず何か作らないといけない時のためのメモ。

やりたいこと

Bootstrapでティザー等、最低限度のフロント画面を作る方法をとりあえずまとめておきたい。
基本レイアウトを決めておけば、全体のデザインやパーツ、パーツをデザイナさんにお願いしやすい。
別にFoundationでいいのですが、管理画面はBootstrapベースのAdminLTEで作るので、ノウハウを極力一元化しておきたい。

作るもの

とりあえずこんなやつ。いちおうデモサイトも。
英語やマット系で作るとそれなりにかっこ良くなり、実データ（日本語）を適用した際のギャップに凹むのでとりあえず、ゴリゴリの日本語かつ普通の写真で作る。

全体の配色やカルーセル画像をデザイナさんにお願いするような流れとする。

また、スマホ？サイズの場合は、メニューが隠れる（collapse)ようにし、カルーセルの文字キャプションを非表示にしたり、画像等は一列に並ぶようにしたりします。

なぜか、Safariでは、横幅が400?以上小さくならない。スマホをチェック簡易するにはchrome等がいいみたい。

作る

ひな形

Bootstrapの素の状態のHTML。CSSとしては、

bootstrap
fontawesome
オリジナルCSS(org.css)

を読み込んでいる。、また、bodyの最後で、JSとして、

jquery
bootstrap

を読み込んでいる。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="org.css" rel="stylesheet" media="screen">
</head>
<body>

<!-- ここに書いていく -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

各ライブラリはどんどん更新されるので、バージョンは必要に応じて変更する（これは2015年8月2日現在）。

TOPナビゲーション

Bootstrapを難しくしているのは、ナビゲーションだと思う。個人的にはここが一番つかみにくいです。
普通、画面は上（nav）から作って行くので、最初に最も高い壁に遭遇します。

まずはHTML部。

<!-- top nav -->
<nav class="navbar navbar-default">

    <div class="container"><!-- 無くても良い -->

        <div class="navbar-header">

            <!-- logo img -->
            <a class="navbar-brand" href="">
                <img src="img/logo.png" id="logo-img">
            </a>

            <!-- toggle -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- top menu -->
        <div class="collapse navbar-collapse" id="top-nav">

            <!-- main navbar -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="">サービス</a>
                </li>
                <li>
                    <a href="">サポート</a>
                </li>
                <li>
                    <a href="">事例紹介</a>
                </li>
                <li>
                    <a href="">会社概要</a>
                </li>
                <li>
                    <a href="inquiry.html">お問い合わせ</a>
                </li>
            </ul>

            <!-- right navbar -->
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href=""><i class="fa fa-sign-in"></i> ログイン</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- end container -->
</nav>
<!-- end nav -->

このような構造になっている。

いちおう別の図（わかりにくい）。

そしてメニュー部のCSS。改変は最低限度にしています。

/*TOPメニュー*/

.navbar{
    border-radius: 0;
    border: none;
    background-color: #003355; /* ベース基調となる濃い青 */
}

#logo-img{
    height: 20px;
}

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

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

カルーセル

絵がスライドする部分。ごちゃごちゃ書いているが、そんなにややこしくはない。
カルーセル名(id)とindecatorやcontrolのdata-target名をちゃんと合わせるとか。
HTML部。

<!-- top image(carousel) -->
<div id="main-carousel" class="carousel slide" data-ride="carousel" data-interval="5000">

    <!-- indicator -->
    <ol class="carousel-indicators">
        <li data-target="#main-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#main-carousel" data-slide-to="1"></li>
        <li data-target="#main-carousel" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/img01.jpg">
            <div class="carousel-caption">
                <h3>昨日は何をしてましたか？</h3>
                <p>ここには、いろいろと説明書きを書きます。何を書きましょうか。</p>
                <a class="btn btn-success" href="">詳細を見る！</a>
            </div>
        </div>
        <div class="item">
            <img src="img/img02.jpg">
            <div class="carousel-caption">
                <h3>今日は何しますか？</h3>
                <p>ここには、いろいろと説明書きを書きます。何を書きましょうか。</p>
                <a class="btn btn-danger" href="">注文する!</a>
            </div>
        </div>
        <div class="item">
            <img src="img/img03.jpg">
            <div class="carousel-caption">
                <h3>明日は何をしますか？</h3>
                <p>写真がごちゃごちゃしていると文字が読みにくいですが、あえてそのまま。</p>
                <a class="btn btn-info" href="">問い合わせる!</a>
            </div>
        </div>
    </div>

    <!-- side control -->
    <a class="left carousel-control" href="#main-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#main-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>
<!-- end carousel -->

構造は、

こんな感じ。別視点の図。

HTMLの構造図の方がわかりやすいかな。

CSS部。
あまりいじりたくないのですが、carousel-captionの文字に影が付くのとか消しています。

/* カルーセル */
.navbar{
    /* トップメニュー下のマージンを除去 */
    margin-bottom: 0;
}

.carousel-inner img{
    width: 100%;
}

.carousel-caption{
    text-align: right;
    /* Bootstrapぽくて、バタ臭いので消す */
    text-shadow: none;
}

コンテンツ部分

ややこしいところはありません。box的な表示をpanelを使用して行うということくらいでしょうか。
頭のテキスト部をrowに入れていますが、一行だと特にrowに入れる必要もありません。ここでは後々の分割を考慮して、rowに入れています。

HTML部。

<!-- content -->
<div id="content">
    <div class="container">

        <!-- title -->
        <h2 class="title">サンプルレイアウトにようこそ！</h2>

        <!-- text -->
        <div class="row">
            <div class="text-box col-sm-12">
                Bootstrap3.xによるサンプルレイアウトをテストしてみました。英語ベースで作ると日本語化した時のギャップにショックをうけるので、日本語ベースでサンプルを作ってみました。やはり、使用する写真と言語にりかなり印象が変わりますね。あと、ボタンとかを入れるととたんにBootstrapっぽくなります。。。
            </div>
        </div>

        <!-- photo box -->
        <div class="row">
            <!-- cell -->
            <div class="col-sm-4">
                <div class="panel panel-deafult">
                    <div class="panel-header">昨日の出来事</div>
                    <div class="panel-body">
                        <div class="img-box">
                            <img src="img/img01.jpg" class="box-img">
                        </div>
                        <div>
                            ここには、いろいろと説明書きを書きます。何を書きましょうか。 
                            <a href="" class="btn btn-default btn-sm">more</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- cell -->
            <div class="col-sm-4">
                <div class="panel panel-deafult">
                    <div class="panel-header">今日の出来事</div>
                    <div class="panel-body">
                        <div class="img-box">
                            <img src="img/img02.jpg" class="box-img">
                        </div>
                        <div>
                            ここには、いろいろと説明書きを書きます。何を書きましょうか。
                        </div>
                    </div>
                </div>
            </div>
            <!-- cell -->
            <div class="col-sm-4">
                <div class="panel panel-deafult">
                    <div class="panel-header">明日の出来事</div>
                    <div class="panel-body">
                        <div class="img-box">
                            <img src="img/img03.jpg" class="box-img">
                        </div>
                        <div>
                            ここには、いろいろと説明書きを書きます。何を書きましょうか。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end content -->

CSS部。
特に難しい部分はありません。imgを上位divで囲み、widthを100%にしてあるあたりくらいでしょうか。

/* コンテンツ */

.title{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text-box{
    margin-bottom: 20px;
}

.panel{
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 2;
}

.panel-header{
    text-align: center;
    padding-top: 10px;
    height: 40px;
    background-color: #ccc;
    color: #333;
}

.panel-body{
    height: 180px;
}

.img-box{
    text-align: center;
    margin-bottom: 10px;
}

.box-img{
    width: 100%;
}

footer部分

HTML部。
何かあるとするとinlineをclearfixでリセットしているあたりでしょうか。

<!-- footer -->
<div  id="footer">

    <!-- footer nav -->
    <ul class="navbar-nav list-inline">
        <li class="first">
            <a href="">運営会社</a>
        </li>
        <li>
            <a href="">関連会社</a>
        </li>
        <li>
            <a href="">利用規約</a>
        </li>
        <li>
            <a href="">社会貢献</a>
        </li>
        <li style="width:100px;">
            <a href="">お問い合わせ</a>
        </li
    </ul>

    <!-- clear fix -->
    <div class="clearfix"></div>
    <!-- sns icons -->
    <ul class="sns-icon list-inline">
        <li>
            <i class="fa fa-twitter fa-3x"></i>
        </li>
        <li>
            <i class="fa fa-facebook fa-3x"></i>
        </li>
        <li>
            <i class="fa fa-github fa-3x"></i>
        </li>
    </ul>
    <!-- copy right -->
    <div class="copy">
        <span>Copyright &#169; 2015 All Rights Reserved.</span>
    </div>
</div>
<!-- end footer -->

CSS部。

/* フッター */

#footer{
    margin-top: 20px;
    text-align: center;
    padding: 40px 0;
    background-color: #003355;
}

#footer .navbar-nav{
    float: none;
    width: 420px;
    margin: 10px auto;
}


#footer .navbar-nav>li{
    text-align: center;
    width: 80px;
    font-size: 12px;
}

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

.sns-icon{
    margin-top: 30px;
}

.sns-icon li{
    padding-left: 20px;
    color: #fff;
}
.sns-icon li:hover{
    color: #aaa;
}

.copy{
    margin-top: 20px;
    color: #fff;
    font-size: 12px;
}

スマホ対応

ひとまず@media (max-width: 767px)をスマホ(xs)として定義します。

768px => はPC用を使います。

content部の頭の見出し分が大きいので1行に収まるように小さくします。
imgを100%にしてあるので、横が（むしろ）伸びた際に、縦が崩れるので、320pxに固定し、センタリングするようにします。
carouselのキャプションはボタン以外消すことにします。
panelのbottomに20pxマージンを取ります。
footerのメニューは全体的に小さくしています（一部折り返す）。

/* for smart phone */
@media (max-width: 767px){

    .title{
        font-size: 18px;
        font-weight: bold;
    }

    .panel{
        /* 最大を300pxに固定する */
        width: 320px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    #footer .navbar-nav{
        /* footer menuのトータル幅を調整 */
        width: 340px;
    }

    #footer .navbar-nav>li{
        /* メニュー幅を小さく*/
        width: 60px;
        font-size: 10px;
    }

    .carousel-caption > h3{
        visibility: hidden;
    }

    .carousel-caption > p{
        visibility: hidden;
    }
}

基本以上です。

おまけ

ティザーとかだと問合せ画面だけは必要になるので、いちおう作っておきます。
こんなやつ。

formは禁じ手のinline styleのみで調整しています。いろいろ試しましたがといらえずテストサイトではこの方法が一番かと。
というわけで、HTML（content部のみ）。

いちおう、form部はrowで2:10でカラムを分けてインデントしています。

<!-- content -->
<div id="content">
    <div class="container">

        <!-- title -->
        <h2 class="title">お問い合わせ</h2>

        <div class="row">

            <!-- マージン用 -->
            <div class="col-sm-2">
            </div>

            <!-- form用 -->
            <div class="col-sm-10">

                <p>お手数ですが、下記項目に入力の上、お問い合わせ下さい。よろしくお願いします。</p>

                <!-- form -->
                <form action="" method="post" style="margin-top:40px;">

                    <div class="form-group">
                        <label>お名前</label>
                        <input type="text" name="name" class="form-control" placeholder="名前">
                    </div>

                    <div class="form-group has-error">
                        <label>メールアドレス</label>
                        <input type="text" name="email" class="form-control" placeholder="メール">
                        <span class="help-block">メールアドレスを確認して下さい。</span>
                    </div>

                    <div class="form-group">
                    <label>お住まいのエリア</label>
                        <select name="area" class="form-control">
                            <option value="関東">関東</option>
                            <option value="関西">関西</option>
                        </select>
                    </div>

                    <p><b>性別</b></p>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" name="gender" value="1" id="man">男
                        </label>
                    </div>

                    <div class="radio-inline">
                        <label>
                            <input type="radio" name="gender" value="2" id="woman">女
                        </label>
                    </div>

                    <div class="form-group" style="margin-top:20px;">
                        <label>お問い合わせ内容</label>
                        <textarea class="form-control" rows="3"></textarea>
                    </div>

                    <div class="checkbox" style="margin-top:40px;">
                        <label>
                            <input type="checkbox"><b>規約に同意します。</b>
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary" style="margin:20px;">問合せを送信</button>

                </form>
            </div>
        </div>

    </div>
</div>
<!-- end content -->

追記

navbarの背景を透明にする。

最近は、navbarを透明にするのが流行っているみたいなので、追加します。
いろいろやり方はありますが、とりあえず簡単な方法を。
ただ、この方法は、固定navbarだと動くか怪しいかも。

navbarの背景をrgba()で透明度を加える。
画像（カルーセル）のz-indexを-1（親より下）にし、margin-top:-50pxとかとする。

HTMLは変更無し。cssだけ。

/* 部分追加 */
.navbar{
    border-radius: 0;
    border: none;
    /*background-color: #003355;*/
    background-color: rgba(0,51,85,0.6);
}

/* 全追加 */
#main-carousel{
    margin-top: -50px;
    z-index: -1;
}

参考サイト

特にお世話になったサイト。

http://designup.jp/bootstrap3-3min-create-90/ ここは素晴らしいです。
https://ja.monaca.io/ ご存知Monacaのサービスサイト。参考になります。