1. zaburo

    Posted

    zaburo
Changes in title
+Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,698 @@
+
+プログラマの永遠の悩み。デザイン。
+とりあえず何か作らないといけない時のためのメモ。
+
+##やりたいこと
+
+Bootstrapでティザー等、最低限度のフロント画面を作る方法をとりあえずまとめておきたい。
+基本レイアウトを決めておけば、全体のデザインやパーツ、パーツをデザイナさんにお願いしやすい。
+別にFoundationでいいのですが、管理画面はBootstrapベースの[AdminLTE](http://qiita.com/zaburo/items/9447fa64e8bc302e2324)で作るので、ノウハウを極力一元化しておきたい。
+
+##作るもの
+とりあえずこんなやつ。いちおう[デモサイト](http://www.bluecode.jp/qiita/bs_front/)も(そのうち消すかも)。
+英語やマット系で作るとそれなりにかっこ良くなり、実データ(日本語)を適用した際のギャップに凹むのでとりあえず、ゴリゴリの日本語かつ普通の写真で作る。
+
+全体の配色やカルーセル画像をデザイナさんにお願いするような流れとする。
+
+![bootstrap](http://www.bluecode.jp/qiita/bs_front001.png)
+
+また、スマホ?サイズの場合は、メニューが隠れる(collapse)ようにし、また、画像等は一列に並ぶようにする。
+
+![bootstrap](http://www.bluecode.jp/qiita/bs_front002.png)
+
+##作る
+
+###ひな形
+
+Bootstrapの素の状態のHTML。CSSとしては、
+
+* bootstrap
+* fontawesome
+* オリジナルCSS(org.css)
+
+を読み込んでいる。、また、bodyの最後で、JSとして、
+
+* jquery
+* bootstrap
+
+を読み込んでいる。
+
+```html
+<!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部。
+
+```html
+<!-- top nav -->
+<div id="header">
+
+ <!-- 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 -->
+</div>
+<!-- end header -->
+```
+わかりにくいので、図解してみたが、結局わかりにくい(苦笑)。
+
+![bootstrap](http://www.bluecode.jp/qiita/bs_front003.png)
+
+そしてメニュー部のCSS。改変は最低限度にしています。
+
+```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部。
+
+```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 -->
+```
+
+CSS部。
+あまりいじりたくないのですが、carousel-captionの文字に影が付くのとか消しています。
+また、意味はないですが、構造図?(なおわかりにくい)
+
+![bootstrap](http://www.bluecode.jp/qiita/bs_front006.png)
+
+これ以降は簡単なので図解しません!
+
+```CSS
+/* カルーセル */
+.navbar{
+ /* トップメニュー下のマージンを除去 */
+ margin-bottom: 0;
+}
+
+.carousel-inner img{
+ width: 100%;
+}
+
+.carousel-caption{
+ text-align: right;
+ /* Bootstrapぽくて、バタ臭いので消す */
+ text-shadow: none;
+}
+```
+
+###コンテンツ部分
+
+ややこしいところはありません。box的な表示をpanelを使用して行うということくらいでしょうか。
+頭のテキスト部をrowに入れていますが、一行だと特にrowに入れる必要もありません。ここでは後々の分割を考慮して、rowに入れています。
+
+HTML部。
+
+```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%にしてあるあたりくらいでしょうか。
+
+```css
+/* コンテンツ */
+
+.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でリセットしているあたりでしょうか。
+
+```html
+<!-- 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部。
+
+```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;
+}
+```
+
+###スマホ対応
+
+imgを100%にしてあるので、横が(むしろ)伸びた際に、縦が崩れるので、300pxに固定し、センタリングするようにします。
+あと、footerのメニューはcollapseしないので、折り曲がらないよう少し小さくしています。
+
+```css
+/* for smart phone */
+@media (max-width: 768px){
+
+ .panel{
+ /* 最大を300pxに固定する */
+ width: 300px;
+ margin: 0 auto;
+
+ }
+
+ #footer .navbar-nav>li{
+ /* メニュー幅を小さく*/
+ width: 60px;
+ }
+}
+```
+
+基本以上です。
+
+##おまけ
+
+ティザーとかだと問合せ画面だけは必要になるので、いちおう作っておきます。
+こんなやつ。
+
+![bootstrap](http://www.bluecode.jp/qiita/bs_front004.png)
+
+formは禁じ手のinline styleのみで調整しています。いろいろ試しましたがといらえずテストサイトではこの方法が一番かと。
+というわけで、HTML + CSS部(全ソース)。
+いちおう、form部はrowで2:10でカラムを分けてインデントしています。
+
+```html
+<!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>
+
+<!-- header -->
+<div id="header">
+
+ <!-- nav -->
+ <nav class="navbar navbar-default" role="navigation">
+
+ <!-- <div class="container"> -->
+
+ <!-- nav header -->
+ <div class="navbar-header">
+
+ <!-- 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>
+
+ <!-- logo img -->
+ <a class="navbar-brand" href="index.html">
+ <img src="img/logo.png" id="logo-img">
+ </a>
+
+ </div>
+
+
+ <!-- nav body -->
+ <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> -->
+ </nav>
+ <!-- end nav -->
+</div>
+<!-- /header -->
+
+<!-- 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 -->
+
+<!-- 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 -->
+
+
+<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>
+```
+
+##参考サイト
+
+特にお世話になったサイト。
+
+* http://designup.jp/bootstrap3-3min-create-90/ ここは素晴らしいです。
+* https://ja.monaca.io/ ご存知Monacaのサービスサイト。参考になります。
+
+