--- title: Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る tags: HTML Bootstrap CSS author: zaburo slide: false --- プログラマの永遠の悩み。デザイン。 とりあえず何か作らないといけない時のためのメモ。 ##やりたいこと 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) >なぜか、Safariでは、横幅が400?以上小さくならない。スマホをチェック簡易するにはchrome等がいいみたい。 ##作る ###ひな形 Bootstrapの素の状態のHTML。CSSとしては、 * bootstrap * fontawesome * オリジナルCSS(org.css) を読み込んでいる。、また、bodyの最後で、JSとして、 * jquery * bootstrap を読み込んでいる。 ```html test ``` 各ライブラリはどんどん更新されるので、バージョンは必要に応じて変更する(これは2015年8月2日現在)。 ###TOPナビゲーション Bootstrapを難しくしているのは、ナビゲーションだと思う。個人的にはここが一番つかみにくいです。 普通、画面は上(nav)から作って行くので、最初に最も高い壁に遭遇します。 まずはHTML部。 ```html ``` このような構造になっている。 ![bootstrap](http://www.bluecode.jp/qiita/bs_front007.png) いちおう別の図(わかりにくい)。 ![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 ``` 構造は、 ![bootstrap](http://www.bluecode.jp/qiita/bs_front008.png) こんな感じ。別視点の図。 ![bootstrap](http://www.bluecode.jp/qiita/bs_front006.png) HTMLの構造図の方がわかりやすいかな。 CSS部。 あまりいじりたくないのですが、carousel-captionの文字に影が付くのとか消しています。 ```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

サンプルレイアウトにようこそ!

Bootstrap3.xによるサンプルレイアウトをテストしてみました。英語ベースで作ると日本語化した時のギャップにショックをうけるので、日本語ベースでサンプルを作ってみました。やはり、使用する写真と言語にりかなり印象が変わりますね。あと、ボタンとかを入れるととたんにBootstrapっぽくなります。。。
昨日の出来事
ここには、いろいろと説明書きを書きます。何を書きましょうか。 more
今日の出来事
ここには、いろいろと説明書きを書きます。何を書きましょうか。
明日の出来事
ここには、いろいろと説明書きを書きます。何を書きましょうか。
``` 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 ``` 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; } ``` ###スマホ対応 ひとまず@media (max-width: 767px)をスマホ(xs)として定義します。 >768px => はPC用を使います。 * content部の頭の見出し分が大きいので1行に収まるように小さくします。 * imgを100%にしてあるので、横が(むしろ)伸びた際に、縦が崩れるので、320pxに固定し、センタリングするようにします。 * carouselのキャプションはボタン以外消すことにします。 * panelのbottomに20pxマージンを取ります。 * footerのメニューは全体的に小さくしています(一部折り返す)。 ```css /* 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; } } ``` 基本以上です。 ##おまけ ティザーとかだと問合せ画面だけは必要になるので、いちおう作っておきます。 こんなやつ。 ![bootstrap](http://www.bluecode.jp/qiita/bs_front004.png) formは禁じ手のinline styleのみで調整しています。いろいろ試しましたがといらえずテストサイトではこの方法が一番かと。 というわけで、HTML(content部のみ)。 いちおう、form部はrowで2:10でカラムを分けてインデントしています。 ```html

お問い合わせ

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

メールアドレスを確認して下さい。

性別

``` ##追記 ###navbarの背景を透明にする。 最近は、navbarを透明にするのが流行っているみたいなので、追加します。 いろいろやり方はありますが、とりあえず簡単な方法を。 ただ、この方法は、固定navbarだと動くか怪しいかも。 * navbarの背景をrgba()で透明度を加える。 * 画像(カルーセル)のz-indexを-1(親より下)にし、margin-top:-50pxとかとする。 ![bootstrap](http://www.bluecode.jp/qiita/bs_front009.png) HTMLは変更無し。cssだけ。 ```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のサービスサイト。参考になります。