Bootstrap3でさくっとWebサイトを作ってみよう

Pocket

CSSフレームワークの中でも人気のあるBootstrap。最近3.0にアップデートされさらに使いやすくなっていますね。

Bootstrapが真価を発揮するのはレスポンシブサイトの制作時。ちょこっとクラス名を付け足すだけで、簡単にレイアウトを作ることができます。

Bootstrapのようなフレームワークを知るまではレスポンシブレイアウトってものすごく敷居が高いと思っていたのですが、このBootstrapのおかげで簡単に構築することが可能になっています。

この記事ではワイヤーフレームからさくっとレスポンシブレイアウトを作成する方法を紹介します。が、その前にまずはPCサイズのレイアウトを完成させてからそれをレスポンシブ化していくことにします。少し長くなったのでレスポンシブ化はこちらの記事で紹介しています。データのダウンロードもできるので是非ご覧下さい。

Bootstrap3でさくっとレスポンシブサイトを作ってみよう

まずはBootstrapをダウンロード

初心者のためのBootstrap3のはじめ方
Bootstrap3はこちらのBootstrapの公式サイトからダウンロードすることができます。今回は省略しますが、ダウンロードから初期設定までの詳しい方法は以下の記事で紹介しています。

初心者のためのBootstrap3.0のはじめ方

ちなみに、今回はBootstrap3を使いましたが、ほかにも簡単にレスポンシブデザインを作れるCSSフレームワークがあります。こちらの記事も参考にしてみて下さい。

レスポンシブデザインを簡単に作れるCSSフレームワーク15選

ワイヤーフレームを用意

ワイヤーフレームもしくはデザインカンプが既に出来上がっているものと想定して作業を進めます。ワイヤーフレームの作成の際にPhotoshopやIllustrator以外でよく使うのが、こちらのWebサービス。ドラッグドロップだけで簡単に作ることができます。

cacoo
cacooのワイヤーフレムでレスポンシブサイトを作る
今回はこちらで公開されているデフォルトのワイヤーフレームを使ってBootstrapでレスポンシブ化してみたいと思います。こちらのワイヤーフレームはPNGやPDFで書き出すことが可能なのでとりあえずPNGで書き出しておきます。
Bootstrapでレスポンシブサイトをつく作ろう

PCサイズのコーディング

ここではPCサイズとモバイルサイズのレイアウトを作成します。各サイズのコードを同時に書いていくこともできますが、ここではわかりやすくするためPCサイズからコーディングし、その後モバイルサイズへ対応させていくことにします。

ヘッダーのコーディング

ではまずヘッダーから作っていきましょう。ワイヤーフレームのレイアウトでは中央にロゴが配置されており、その下にナビがあります。特に難しいことはせずそのままコーディングしていきます。ロゴには画像を使っても良いのですが単純なデザインならCSSだけでなんとかなりますね。
bootstrapでレスポンシブサイトを作ってみる

ナビはBootstrapの公式サイトにあるコンポーネントページからコピペして必要な所以外を削除。

<div id="header">
    <div class="logo">
        <h1>LOGO</h1>
    </div>
    <!-- /logo -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand visible-xs" href="#">Menu</span>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="first">
                        <a href="#">MENU</a>
                    </li>
                    <li>
                        <a href="#">MENU</a>
                    </li>
                    <li>
                        <a href="#">MENU</a>
                    </li>
                    <li>
                        <a href="#">MENU</a>
                    </li>
                    <li>
                        <a href="#">MENU</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- /nav -->
</div>
<!-- /header -->

/* ------------------------------------- /
/   Header
/* ------------------------------------- */
#header {
    padding-top: 20px;
    background-color: #eee;
}
 
/*  logo
/--------------------------------- */
.logo{ / センタリング */
    text-align: center;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
 
.logo h1 { /* 丸とフォントのスタイリング */
    margin: 0;
    padding-top: 38px;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 26px;
    color: #7E7E7E;
    background-color: #fff;
}
 
/*  nav
/*--------------------------------- */
.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 #555;
}
.navbar-nav > li.first {
    border-left: 1px solid #555;
}
 
.navbar-nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
}

Bootstrapを使ったカルーセルのコーディング

ではキャッチの部分。ここは1枚の画像でもよいですが、せっかくBootstrapを使っているのでCarouselというコンポーネントを使います。左右にボタンがついており、押すと次の画像が出てくるという単純なスライダーになっています。ここも公式のコードをコピペしてきて、ほぼそのまま使用しました。

そのまま配置するとnavとcarouselの間にスペースが空いたので、margin-bottomに0を追記。スライダーの画像はwidth100%で画面いっぱいに表示させます。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/slide-1.jpg" alt="slide-1">
            <div class="carousel-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
        </div>
        <div class="item">
            <img src="img/slide-2.jpg" alt="slide-2">
            <div class="carousel-caption">A dolorem et ipsa doloremque tempore placeat voluptates repellat repudiandae autem? Eius, </div>
        </div>
        <div class="item">
            <img src="img/slide-3.jpg" alt="slide-2">
            <div class="carousel-caption">explicabo corporis eveniet ipsum velit labore quas voluptatum exercitationem fugit. </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- /carousel -->

/*  nav
/--------------------------------- */
.navbar {
    margin-bottom: 0; / 追記 */
}
 
/*  carousel
/*--------------------------------- */
.carousel-inner img{
    width: 100%;
}

BootstrapのGridでコンテンツを配置

次はボディ部分のコンテンツをコーディングしていきます。コンテンツは以下のようになっています。

  • 1カラムの見出しタイトル
  • 2カラムのテキストボックス
  • 3カラムのパネルボックス
  • フルワイドの背景とセンタリングされたボタン

このようにBootstrapのグリッドの練習をするにはうってつけのレイアウトとなっていますね。Bootstrap3のグリッドレイアウトの基本は「初心者のためのBootstrap3.0のはじめ方」で紹介しているのでチェックしてみて下さい。

ここではタブレットサイズを作らないためPC画面のレイアウトはsmサイズからとします。それぞれのボックスをrowで囲んでcol-sm-xのようにクラスを指定するだけで簡単にレイアウト可能です。こういうところがBootstrapのようなフレームワークの良いところですね。

<div id="content">
    <div class="container">
        <h2 class="title">H2 TITLE HERE</h2>
        <!-- /title -->
        <div class="row">
            <div class="text-box col-sm-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, libero, quaerat, doloremque pariatur amet minima nihil enim temporibus doloribus dolorem neque sit quo id voluptas voluptate praesentium magnam? Unde, provident.sunt esse dolores dolorum deleniti asperiores commodi beatae ad veritatis voluptates dignissimos. Possimus!sunt esse dolores dolorum deleniti asperiores commodi beatae ad veritatis voluptates dignissimos. Possimus! </div>
            <div class="text-box col-sm-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, iste, nesciunt, sapiente incidunt consequatur placeat voluptate sequi sunt esse dolores dolorum deleniti asperiores commodi beatae ad veritatis voluptates dignissimos. Possimus!sunt esse dolores dolorum deleniti asperiores commodi beatae ad veritatis voluptates dignissimos. Possimus!sunt esse dolores dolorum deleniti asperiores commodi beatae ad veritatis voluptates dignissimos. Possimus! </div>
        </div>
        <!-- /text-box -->
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-body">Photo </div>
                    <div class="panel-footer">CONTENTS</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-body">Photo </div>
                    <div class="panel-footer">CONTENTS</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-body">Photo </div>
                    <div class="panel-footer">CONTENTS</div>
                </div>
            </div>
        </div>
        <!-- /panel-box -->
    </div>
    <!-- /container -->
    <div class="button-box">CATCH TITLE 
        <button type="button" class="btn btn-default">Button</button>
    </div>
    <!-- /button-box -->
</div>
<!-- /content -->

/* ------------------------------------- /
/   content
/* ------------------------------------- */
.title{
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}
 
.text-box{
    margin-bottom: 40px;
}
 
/*  panel-box
/*--------------------------------- */
.panel {
    margin-bottom: 20px;
    background-color: #D1D1D1;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
 
.panel-body {
    text-align: center;
    height: 180px;
    padding-top: 90px;
    color: #888;
    font-size: 18px;
}
 
.panel-footer {
    text-align: center;
    padding: 18px 15px;
    background-color: #7E7E7E;
    border-top: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
 
/*  button-box
/*--------------------------------- */
.button-box{
    text-align: center;
    padding: 60px 0;
    margin-top: 40px;
    background-color: #eee;
}
 
.button-box p{
    color: #888;
}
 
.btn {
    padding: 12px 80px;
}
 
.button-box .btn-default{
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background-color: #7E7E7E;
}

フッターコンテンツのコーディング

最後にフッターのコーディングを行います。フッターにはヘッダーと同じロゴとナビがあり、その下にsnsアイコンとコピーライトのテキストがあります。それぞれセンタリングされているようです。

ナビの部分はヘッダーではBootstrapのnav-barを使用しましたがフッターでは普通にulでリストを作ります。このとき便利なのが、list-inlineというクラス。これをつけると一発で横並びリストが作れるので大変便利。

<div id="footer">
    <div class="logo">LOGO </div>
    <!-- /footer-logo -->
    <ul class="navbar-nav list-inline">
        <li class="first">
            <a href="">MENU1</a>
        </li>
        <li>
            <a href="">MENU2</a>
        </li>
        <li>
            <a href="">MENU3</a>
        </li>
        <li>
            <a href="">MENU4</a>
        </li>
        <li>
            <a href="">MENU5</a>
        </li>
    </ul>
    <!-- /nav -->
    <div class="clearfix"></div>
    <ul class="sns-icon list-inline">
        <li>
            <i class="fa fa-twitter fa-2x"></i>
        </li>
        <li>
            <i class="fa fa-facebook fa-2x"></i>
        </li>
    </ul>
    <!-- /sns-icon -->
    <div class="copy">
        <span>Copyright &#169; 2013 example.com All Rights Reserved.</span>
    </div>
    <!-- /copy -->
</div>
<!-- /footer -->

/* ------------------------------------- /
/    Footer
/* ------------------------------------- */
#footer{
    text-align: center;
    padding: 40px 0;
    background-color: #7E7E7E;
}

/*  logo
/*--------------------------------- */
#footer .logo{
    margin-top: 0;
}

.logo p { /* 丸とフォントのスタイリング */
    margin: 0;
    padding-top: 34px;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 26px;
    color: #7E7E7E;
    font-weight: bold;
    background-color: #fff;
}

/*  nav
/*--------------------------------- */
#footer .navbar-nav>li {
    border-right: 1px solid #000;
}
#footer .navbar-nav>li.first{
    border-left: 1px solid #000;
}

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

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

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

/*  copy
/*--------------------------------- */
.copy{
    margin-top: 20px;
}

.copy span{
    color: #333;
}

Bootstrapでレスポンシブ化に挑戦

ここまででPCサイズの作成が完了しました。次はモバイルサイズに合わせて修正していく作業になります。一見このままでもとくに問題ないようですが、少しだけ直したいところなどもあるので変更していきます。

長くなったので続きは次回。
Bootstap3でさくっとレスポンシブサイトを作ってみよう

あとはもう少しスタイルを修正していけば、ワイヤーフレーム通りのサイトの出来上がり。BootstrapのようなCSSフレームワークを使うと、簡単にwebサイトのレイアウトを作ることができます。次回はレスポンシブ化をしていきます。

最後まで読んでいただきありがとうございます:)