Downloaded 65 times
Uploaded bykenji goto
Bootstrap
201409 ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」の中で使用したBootstrapについてのスライドです。 http://zerokarawp.com/ http://coedo-wordpress.doorkeeper.jp/events/14849
More Related Content
![Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://cdn.slidesharecdn.com/ss_thumbnails/20140228-140228020535-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Bootstrap
- 1. 第14回ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」 Bootstrap 2014.9.17 よつばデザイン 後藤賢司
- 2. 後藤賢司 よつばデザイン代表。東京と大分の2拠点で活動中。 Webサイトの企画・設計・デザイン。 メディアサイトやBGM販売サイトなどを運営。 CPIエバンジェリスト。 「プロが選ぶ WordPress優良プラグイン事典 」 「現場でかならず使われているWordPressデザインのメソッド 」
- 3. Bootstrap フロントエンドフレームワーク（HTML、CSS、javascript ） http://getbootstrap.com/
- 4. Bootstrap 2011年08月 TwitterBootstrapとしてスタート。 2.0からレスポンシブデザインに対応。 現在バージョンは3.2。
- 5. Bootstrapの特徴 マルチデバイスに対応。様々なデバイスを想定した設計。 安定して表示してくれるのでオレオレでCSS書くより安全。 グリッド機能やコンポーネントを理解するととても便利。 共通言語として使えるので、チーム間や外部との連携も取りやすいし、 リニューアルの際などの構造も把握しやすい（かもしれない）。
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. intel.co.uk ! http://www.intel.co.uk/content/ www/uk/en/homepage.html
- 16.
- 17.
- 18.
- 19.
- 20. Dash 様々なドキュメント参照ツール。 Bootstrapのドキュメントを 読む機会は多いので導入を オススメします。 有料版は起動時タイムラグが無い。 http://kapeli.com/dash
- 21.
- 22.
- 23. ディスプレイサイズに応じて4種類 ～768px col-xs-* 768px～ col-sm-* 992px～ col-md-* 1200px～ col-lg-* ※lgは省略する事もある。
- 24.
- 25.
- 26. rowとcontainer グリッドを格納するclass row container PCの場合 1170px PCの場合 1140px 15px 15px
- 27.
- 28. Gridの仕組み（良く見る図） col-md-1 col-md-2 col-md-3 col-md-4 col-md-7 col-md-10 col-md-12
- 29. 12分の「？」で考える グリッドは12分のいくつを使うかで考えるだけ。 例：メインを12分の8にして、サイドバーを12分の4にしよう。 <div class=“col-md-8”></div> <div class=“col-md-4”></div>
- 30.
- 31. カラム数を画面サイズ毎に切り替える Gridを使うと、PCの場合、タブレットの場合、スマホの場合、小さいス マホの場合と分けられる。 下記の場合はタブレット以上のサイズのディスプレイでの指定 1カラム分5カラム分 col-md-1 col-md-5
- 32. CSSの記述 タブレットサイズ以上は4カラム、スマホより小さいサイズは6カラム、 一番小さいサイズは12カラム（全幅） <div class=“col-md-4 col-sm-6 col-xs-12”>コンテンツ</ div> PC、タブレットスマホ小画面 col-md-4 col-sm-6 col-xs-12
- 33.
- 34.
- 35.
- 36. offsetを覚える col-md-offset-4で 4カラム分空ける col-md-offset-3で 3カラム分空ける col-md-offset-3で 3カラム分空ける col-md-offset-3で 3カラム分空ける
- 37. offset使用例 <div class=" col-md-8 col-md-offset-2"> 赤い点線が containerサイズ
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. テキスト寄せ .text-center text-align: center; 中央合わせ .text-left text-align : left; 左寄せ .text-right text-align : right; 右寄せ
- 46. フロート .pull-left ＝float : left ; .pull-right = float : right ;
- 47.
- 48.
- 49.
- 50.
- 51. 関連書籍 「UIまで手の回らないプログラマのためのBootstrap 3実用ガイド」 様々な機能について詳しく解説されてます。 電子書籍版もあり。
- 52.
- 53.
- 54. モバイル時だけ配置変更 PC画面などでセンター合わせのテキストとかを使った場合、モバイルのみ左よせにするなど。 @mediaonly screen and (max-width: 768px){ .mob-text-center {text-align: center !important;} .mob-text-left {text-align: left !important;} .mob-text-right {text-align: right !important;} }
- 55. 要素がはみだすのを防ぐ *{ @includebox-sizing(border-box); } ※上記はcompass用、compass使ってない人は下記を使用してください。 *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }
- 56. 要素がはみだすのを防ぐ img { max-width: 100% !important; height: auto; } embed, iframe, canvas, video, svg, input, text area ,button ,select { max-width: 100%; }
- 57.
- 58. FontAwesome 種類が多く使いやすい。 http:// fortawesome.github.io/ Font-Awesome/
- 59. 1600+ iOS7 VectorIcons ラインの細いアイコンフォント。シャープなイメージが欲しい時やス マホサイト用に。$69～ http://www.streamlineicons.com/
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. The Stocks 著作権フリーの写真サイト UNSPLASH・LITTLE VISUALS NEW OLD STOCK・SUPER FAMOUS GRATISOGRAPHY・GETREFE JAY MANTRI・MAGDELINE BREAKING PIC・TRAVEL COFFEE http://thestocks.im/
- 71.
- 72.
- 73. Blocks コンポーネント単位でページを作 成。 http://www.mightydeals.com/ deal/blocks.html? fid=77e283db http://demo.bootstraptor.com/ blocks.html
- 74. Briqs BootstrapベースでHTMLを作成。 これをベースにして 作り込んでいくのもアリ。
- 75.
- 76. まとめ Bootstrapで完結する必要はない。 ベースとして使う事で制作スピード と安定性を手に入れる。
- 77. ありがとうございました FacebookページやWebサイトもぜひご覧ください。 ゼロから始めるWordPress勉強会（Facebookページ） ゼロから始めるWordPress勉強会（Webサイト） よつばデザイン（ブログ）