Bootstrapで動きのある1カラムレイアウト作成方法(動画説明付き)

最近1カラムレイアウトに少し動きを付けたデザイン増えましたよね。
今回はBootstrapを使い、下記のサンプルサイトを作ります。Scrollspyや、Parallaxなどの仕掛けがあります。知らない方は是非参考にしてみてください。

 

今回作成する機能とタイムライン

  • はじめに(0分13秒〜)
  • Bootstrapの利用準備(3分13秒〜)
    グローバルナビゲーション作成(7分00秒〜)
  • メインビジュアルにParallax(パララックス)の追加(9分1秒〜)
  • コンテントエリアの3カラム表示について(17分54秒〜)
  • スクロールに合わせてボタンが大きくなる(PCサイトのみ)(27分40秒〜)
  • スクロールに合わせて、ナビゲーションのアクティブが変わる(ScrollSpy)(31分32秒〜)

 

サンプルサイトを作成する手順

手順は動画を撮影しました。動画は全部で37分ありますので、上記タイムラインより必要な該当箇所だけを閲覧ください。

 

ソースコード

  1. 「index.html」
    <!DOCTYPE html>
    <html lang="ja" >
    <head>
      <meta charset="utf-8" />
      <title>Bootstrap one column layout with Parallax effect | demo</title>
      <meta name="viewport" content="width=device-width,
        initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet" />
      <script type="text/javascript">
        // scrollspyの起動
        $('body').scrollspy({ target: 'navbar' })
      </script>
    
    </head>
    <body data-spy="scroll" data-target="#navbar" data-offset="100">
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-a">Service</a></li>           
            <li><a href="#products-a">Products</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    
    <div id="home" class="home">
      <div class="text-top">
        <h1>Hello World</h1>
        <h3>Bootstrap-based one column layout</h3>
        <a href="#about" class="btn btn-success btn-lg">Sign up</a>
      </div>
    </div>
    
    <div id="service-a">&nbsp;</div>
    
    <div class="container section">
        <h2 id="service">Our Service</h2>
          <div class="row">
            <div class="col-sm-4">
                <div class="service">
                    <i class="fa fa-cutlery main-i"></i>
                    <div class="desc"><h3>タイトル</h3></div>
                    <img src="./images/img200.png" alt="img"  class="enimg">
                    <p><a href="">サービスの紹介など</a></p>
                </div> 
            </div>
    
          <div class="col-sm-4">
            <div class="service">
                <i class="fa fa-cutlery main-i"></i>
                <div class="desc"><h3>タイトル</h3></div>
                <img src="./images/img200.png" alt="img" class="enimg">
                <p><a href="">サービスの紹介など</a></p>
            </div> 
          </div>
    
          <div class="col-sm-4">
            <div class="service">
                <i class="fa fa-cutlery main-i"></i>
                <div class="desc"><h3>タイトル</h3></div>
                <img src="./images/img200.png" alt="img" class="enimg">
                <p><a href="">サービスの紹介などなど</a></p>
            </div> 
          </div>
      </div>
    </div>
    
    <div id="products-a">&nbsp;</div>
    
    <div class="section">
     
      <div id="products">
          <div class="container">
            <div class="row">
              <div class="col-sm-12 text-center">
                <h2>Our Products</h2>
                <h4>こだわり選び抜いた自信のプロダクト</h4>
              </div>
            </div>
          </div>
      </div>
    
      <div id="products-detail" class="pad-section">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h2 class="panel-title">Berceau (ベルソー)</h2>
                </div>
                <div class="panel-body">
                ガジェット用トート「Berceau (ベルソー)」の誕生秘話
                コンテンツコンテンツ
                <br /><br />
                <a href="#">More info >></a>
                <br />
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h2 class="panel-title">Berceau (ベルソー)</h2>
                </div>
                <div class="panel-body">
                   コンテンツコンテンツ
                  <br /><br />
                  <a href="#">More info >></a>
                  <br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div id="hoge">このラインが画面中央にくるとボタンが大きくなります---------------------</div>
    <div id="contact" class="container">
      <h2>Contact US</h2>
      <p class="p-center">お気軽にお問い合わせください。</p>
      <div>
      <button type="button" class="btn btn-default btn-contact
        center-block btn-lg" aria-label="Left Align">
        お問い合わせ&nbsp;<i class="glyphicon glyphicon-envelope"></i>
      </button>
      </div>
      <div class="video">
      <img src="./images/mockup.png" class="content-img">
      </div>
    </div>
    <div id="hoge-end">&nbsp;</div>
    
    <footer class="footer">
      <div class="container"><br />
        <p class="text-muted">Footer content here.</p>
      </div>
    </footer>
      <!-- attach JavaScripts -->
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
    
      <script type="text/javascript">
      var WindowHegiht = $(window).height() / 2;
      var targetID = $("#hoge").offset().top;
    
      function getScrollHeight(){
       if($(window).scrollTop() > targetID - WindowHegiht){
            $('.btn-contact').css({transform:'scale(2)'});
          }else{
            scale_flag = 'false';
            $('.btn-contact').css({transform:'scale(1)'});
          }
        }
    
      $(window).on("load scroll resize", getScrollHeight);
      </script>
    
    </body>
    </html>
  2. 「css/style.css」
    html, body {   height: 100%;
      width: 100%;
    }
    
    .text-top {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    
    @media (max-width: 767px) {
    
      .text-top h1{
        font-size: 2.5em;
        color: #fff;
      }
      .text-top h3 {
        font-size: 1.5em;
        color: #fff;
        margin-top: -10px;
      }
    
      .text-top > .btn{
        margin-bottom: 20px;
      }
    
      #home {
        background: url(../images/room2.jpg) no-repeat center center;
        display: table;
        width: 100%;
        height: auto;
        position: relative;
    
        margin-top: 50px;
    
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    
       #products-detail {
        background: url(../images/room3.jpg) no-repeat center center;
        display: table;
        width: 100%;
        height: auto;
        position: relative;
    
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    
    }
    @media (min-width: 768px) {
    
      .text-top h1,.text-top h3 {
        font-size: 4em;
        color: #fff;
      }
    
      #home {
        background: url(../images/room2.jpg) no-repeat center center fixed;
        display: table;
        height: 100%;
        position: relative;
        width:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    
    
      #products-detail {
        background: url(../images/room3.jpg) no-repeat center center fixed;
        display: table;
        height: 100%;
        position: relative;
        width: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    
    }
    
    
    /* Bootstrap Navigation styles
    -------------------------------------------------- */
    
    .navbar-default .navbar-nav > .active{
        color: #000;
       background: #BBDDFF;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
          color: #000;
          background: #BBDDFF;
    }
    
    
    /* Sticky footer styles
    -------------------------------------------------- */
    
    .footer {
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      background-color: #f5f5f5;
      padding: 20px 0;
    }
    
    
    /* Content styles
    -------------------------------------------------- */
    /* Products */
    #products {
      background-color: #306d9f;
      color: #ffffff;
      padding-bottom: 20px;
    }
    
    #products-detail .panel {
      margin-top: 50px;
      margin-bottom: 50px;
      opacity: 0.85;
    }
    
    h3 ,h2,.p-center{
    text-align: center;
    }
    
    .service > p{
    text-align: center;
    }
    
    .enimg{
      border-radius: 50%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width:200px;
    }
    
    .section{
      margin-top: 50px;
      margin-bottom: 50px;
    }
    
    .center-block{
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
    }
    
    .video{
      margin-top: 50px;
    }
    
    .content-img{
      width:80%;
      height:auto;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

 

 

このエントリーをはてなブックマークに追加

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。