Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

2479

3.720 visualizaciones

Publicado el

  • Inicia sesión para ver los comentarios

2479

  1. 1. 国際Webデザイナーズ協会 Webデベロッパー 夏本健司 Bootstrap集中講座 ※記載しているソフトウェアやサービス、コーディング技術等は2015年6⽉18⽇現在のものであり、以降、仕様変更により機能や名称、画⾯ 上の位置等が変更されている場合があります。 超・実践1
  2. 2. 2 今回マスターする15個 1.⾒出し 2.セカンダリテキスト 3.⾏揃え 4.テキスト⾊ 5.背景⾊ 6.画像埋め込み 7.動画埋め込み 8.リスト 9.リストのインライン化 10.テーブル 11.フォーム 基本 12.フォーム サイズ指定 13.ジャンボトロン 14.囲み記事 15.サムネール 書式指定系 ブロック系
  3. 3. Bootstrap利⽤のポイント1
  4. 4. 4 ポイント1. Bootstrapのコーディング精度はかなり⾼いです。「あれっ?これ、どう なっているの?」と思うことの原因の⼤半は、Bootstrapが推奨していない コーディング⽅法だったり、タグの書き間違いだったりします。 正確にコーディングすれば、ならず正常に表⽰・動作します。 これは、私が仕事の現場で実際に体験してきていることです。 ですので、「あれっ?」と思ったら、まずは公式サイトのガイドラインや ネット上の信頼できそうなTIPSを参考にコードを⾒直してみましょう。 Bootstrapにバグはない(コードの精度が⾼い)。
  5. 5. 5 ポイント2. Bootstrapは、HTMLへの記名ルールとしてID名は、使いません。 もともと、OOCSSやSMACSSの考え⽅をベースにCSS設計をして いるからです。 Bootstrapは、ID名を使わない。
  6. 6. 6 ポイント3. よく「マルチクラスにすると、ブラウザのレンダリングの負担や処理速度の 遅延につながるのでは?」という質問を受けますが、私が現在、仕事をして いる上で問題になったことは1度もありません。ブラウザのレンダリング時 間のネックになっている、という数値的根拠もありません。 もちろん、マルチクラスよりシングルクラスの⽅がシンプルだし、⼀般的に 考えて処理の時間は短いでしょう。でも変わるのは、おそらくコンマ00数 秒の時間の差でしょうし、そのくらいの時間であればブラウザのレンダリン グ処理としては全く気にならない(差にならない)程度のわずかな時間で しょう。 マルチクラスでも処理速度は遅くならない。
  7. 7. 7 ポイント4. Bootstrapでは、「container」「row」のように画⾯の構造を受け持つブ ロックに付ける名前や、「btn」「form-group」などのようにモジュールの 構造を受け持つための名前など、他のCSSフレームワークやシステムでも 使われそうな名前が多くあります。 CSSで、同じ名前で複数のスタイルが設定されている場合で、それが意図 的でない場合は、「CSS汚染」となって、意図したようにブラウザで表⽰ できない、いわゆる「表⽰崩れ」の⼤きな原因になります。 ですので、Bootsrapを使う場合は、他のCSSフレームワークは使わない、 逆に他のCSSフレームを使う場合は、Bootstrapは使わないようにしま しょう。 まぜるな、危険!
  8. 8. 8 ポイント5. Bootstrapには、現在、⼤きく分けて「バージョン2系」と「バージョン3 系」があります。メジャーバージョン名である整数部分の数字で区別します。 「バージョン2系」と「バージョン3系」では、同じ機能でもクラス名が 違ったり、使い⽅が違ったり、あるいは「バージョン2系」ではある機能が 「バージョン3系」では廃⽌になっているものもあります。 もしもネット上で情報検索する場合は、このバージョンをちゃんと識別する 必要があります。当然、「バージョン3系」でサイト構築をしていて、ネッ ト上にある「バージョン2系」のTIPSで実装をしても、正常に表⽰・操 作しない場合があるからです。 私が「Bootstra3」と銘打っているのはそのためで、 「バージョン2系」と 区別するためです。 バージョン違えば別の顔
  9. 9. 9 ポイント6. Bootstrapでサイト構築をする場合、あるいは表⽰テスト等する場合は、ぜ ひ「スタイルガイド」を作って公開をしてください。 「スタイルガイド」にコンポーネントを書き溜めていくと、「汎⽤的な部品 のパーツ集」になり、次にサイト構築する時のライブラリになりますし、ク ライントやプロジェクトメンバー内での情報共有・ガイドラインになります。 スタイルガイド作りに集中すること。
  10. 10. スタイルガイドを作る2
  11. 11. 書式指定系 スタイルガイドを作る2
  12. 12. 12 準備:HTMLを準備する 実際にBootstrapを使ってHTMLを書き出す時は、あちこち散乱させずに1 つのファイル・サイトとしてまとめておいた⽅が良いです。あとで書き⾜し たりすれば、あなた⾃⾝の「百科事典」になりますし、実際に仕事でも使え るライブラリにするためです。 勉強のための「短なる演習」にせず、実際に「使えるツール」にしてくださ い。 前々回のHTMLテンプレートや、⾃分でレイアウト・デザインの雛形を持っ ている⼈は、それに書き⾜していくようにしましょう。 スタイルガイドにするHTMLを準備する。
  13. 13. 13 1.⾒出し <h1 class=“h1”>ページの⾒出し、英名は「heading」。</h1> <h1 class=“h2”>ページの⾒出し、英名は「heading」。</h2> <h1 class=“h3”>ページの⾒出し、英名は「heading」。</h3> <h1 class=“h4”>ページの⾒出し、英名は「heading」。</h4> <h1 class=“h5”>ページの⾒出し、英名は「heading」。</h5> <h1 class=“h6”>ページの⾒出し、英名は「heading」。</h6> h1 h2 h3 h4 h5 h6 ク ラ ス名 コード
  14. 14. 14 1.⾒出し ブロック図 h1 .h1 ページの⾒出し、英名は「heading」。 h1 .h2 ページの⾒出し、英名は「heading」。 h1 .h3 ページの⾒出し、英名は「heading」。 h1 .h3 ページの⾒出し、英名は「heading」。
  15. 15. 15 1.⾒出し ブラウザの画⾯
  16. 16. 16 2.セカンダリテキスト <h1 class=“h1”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <h1 class=“h2”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <h1 class=“h3”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <h1 class=“h4”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <h1 class=“h5”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <h1 class=“h6”>ページの⾒出し、<small>英名は「heading」。 </small></h1> <small></small> タ グ名 コード
  17. 17. 17 2.セカンダリテキスト ブロック図 h1 .h1 ページの⾒出し、<small>英名は「heading」。</small> h1 .h2 ページの⾒出し、<small>英名は「heading」。</small> h1 .h3 ページの⾒出し、<small>英名は「heading」。</small> h1 .h3 ページの⾒出し、<small>英名は「heading」。</small>
  18. 18. 18 2.セカンダリテキスト ブラウザの画⾯
  19. 19. 19 3.⾏揃え <p class="text‐left">左揃えにしたい時/クラス名:text‐left</p> <p class="text‐center">中央揃えにしたい時/クラス名:text‐center</p> <p class="text‐right">右揃えにしたい時/クラス名:text‐right</p> text-left text-center text-right ク ラ ス名 コード
  20. 20. 20 3.⾏揃え ブロック図 p .text-left 左揃えにしたい時/クラス名:text‐left p .text-center 中央揃えにしたい時/クラス名:text‐center p .text-right 右揃えにしたい時/クラス名:text‐right
  21. 21. 21 3.⾏揃え ブラウザの画⾯
  22. 22. 22 4.テキスト⾊ <p>◆ノーマルテキスト⾊ <a href="*">ノーマルなテキストリンク⾊ </a></p> <p class="text-muted">◆テキストバリエーション⾊[muted]/クラス名: text-muted(リンク⾊指定なし)</p> <p class="text-primary">◆重要⾊[primary]/クラス名:<a href="*" class="text-primary">text-primary</a></p> <p class="text-success">◆成功⾊[success]/クラス名:<a href="*" class="text-success">text-success</a></p> <p class="text-info">◆情報⾊[info]/クラス名:<a href="*" class="text- info">text-info</a></p> <p class="text-warning">◆警告⾊[warning]/クラス名:<a href="*" class="text-warning">text-warning</a></p> <p class="text-danger">◆危険⾊[danger]/クラス名:<a href="*" class="text-danger">text-danger</a></p> text-muted text-primary text-success text-info text-warning text-danger ク ラ ス名 コード
  23. 23. 23 ブロック図 4.テキスト⾊ p . text-muted ◆テキストバリエーション⾊・・・< a href=“”></a> p . text-primary ◆重要⾊[primary]/クラス名・・・< a href=“”></a> p . text-success ◆成功⾊[success]/クラス名・・・< a href=“”></a> ・ ・ ・
  24. 24. 24 ブラウザの画⾯ 4.テキスト⾊
  25. 25. 25 5.背景⾊ <p class="bg‐primary">◆重要⾊[primary]/クラス名:<a href="*" class="bg‐ primary">bg‐primary</a></p> <p class="bg‐success">◆成功⾊[success]/クラス名:<a href="*" class="bg‐ success">bg‐success</a></p> <p class="bg‐info">◆情報⾊[info]/クラス名:<a href="*" class="bg‐info">bg‐ info</a></p> <p class="bg‐warning">◆警告⾊[warning]/クラス名:<a href="*" class="bg‐ warning">bg‐warning</a></p> <p class="bg‐danger">◆危険⾊[danger・・]/クラス名:<a href="*"  class="bg‐danger">bg‐danger</a></p> bg-primary bg-success bg-info bg-warning bg-danger ク ラ ス名 コード
  26. 26. 26 ブロック図 5.背景⾊ p . bg-primary ◆重要⾊[primary]/クラス名・・・< a href=“”></a> p . text-success ◆成功⾊[success]/クラス名・・・< a href=“”></a> p . text-info ◆情報⾊[info]/クラス名・・・< a href=“”></a> ・ ・ ・
  27. 27. 27 ブラウザの画⾯ 5.背景⾊
  28. 28. 28 6.画像埋め込み <img src=“../img/img01.jpg” class=“img‐responsive” alt=“画像"/> img-responsive ク ラ ス名 コード
  29. 29. 29 ブロック図 6.画像埋め込み <img src=“” class=“img-responsive” alt=“画像"/>
  30. 30. 30 ブラウザの画⾯ 6.画像埋め込み 親ブロックの横幅100%になる
  31. 31. 31 <div class="embed-responsive embed-responsive-16by9"> <iframe class=“embed-responsive-item” src=“//www.youtube.com/embed/xxxxx"></iframe> </div> embed-responsive embed-responsive-item ク ラ ス名 コード 7.動画埋め込み 説明: 画⾯のアスペクト⽐を必ず⼊れる 例 16by9 4by3 など
  32. 32. 32 ブロック図 7.動画埋め込み div .embed-responsive <iframe class=“embed-responsive-item” src=“//www.youtube.com/embed/xxxxx "></iframe>
  33. 33. 33 ブラウザの画⾯ 7.動画埋め込み 親ブロックの横幅100%になる
  34. 34. 34 8.リスト <ul class="list‐unstyled"> <li>リスト項⽬</li> <li> リスト項⽬ <ul> <li>リスト項⽬</li> <li>リスト項⽬</li> <li>リスト項⽬</li> <li>リスト項⽬</li> <li>リスト項⽬</li> </ul> </li> list-unstyled ク ラ ス名 コード <li>リスト項⽬</li> <li>リスト項⽬</li> <li>リスト項⽬</li> </ul>
  35. 35. 35 ブロック図 8.リスト ul .list-unstyled リスト項⽬li リスト項⽬li リスト項⽬li ul リスト項⽬li
  36. 36. 36 ブラウザの画⾯ 8.リスト インデントがなくなる
  37. 37. 37 9.リストのインライン化 <ul class="list‐inline"> <li>東京本店</li> <li>札幌⽀店</li> <li>神奈川⽀店</li> <li>名古屋⽀店</li> <li>⼤阪⽀店</li> <li>福岡⽀店</li> </ul> list-inline ク ラ ス名 コード
  38. 38. 38 ブロック図 9.リストのインライン化 ul .list-inline 東京本店li 札幌⽀店li 神奈川⽀店li ・ ・ ・
  39. 39. 39 ブラウザの画⾯ 9.リストのインライン化
  40. 40. 40 10.テーブル <table class="table table‐striped table‐bordered table‐hover table‐condensed  table‐responsive"> <thead> <tr><th>部屋No.</th><th>部屋タイプ</th><th>定員</th><th>喫煙</th><th> 料⾦ </th>  </tr> </thead> <tbody> <tr><td>501</td><td>ツイン</td><td>2</td><td class="info">可</td><td  class="text‐right">12,800円</td> table table-striped table-bordered table-hover table-condensed table-responsive ク ラ ス名 コード
  41. 41. 10.テーブル </tr> <tr><td>502</td><td>ツイン</td><td>2</td><td>不可</td><td class="text‐ right">10,800円</td> </tr> <tr><td>601</td><td>ツイン</td><td>2</td><td class="info">可</td><td  class="text‐right">12,800円</td> </tr> <tr class="warning"><td>701</td><td>ツイン</td><td>2</td><td>不可 </td><td class="text‐right">20,800円</td> </tr> </tr> <tr class="danger"><td>702</td><td>ツイン</td><td>2</td><td>不可</td><td  class="text‐right">20,800円</td> </tr </tbody></table> table table-striped table-bordered table-hover table-condensed table-responsive ク ラ ス名 コード 41
  42. 42. 42 ブロック図 10.テーブル 省略 (テーブルのセルの構造をイメージしてください)
  43. 43. 43 ブラウザの画⾯ 10.テーブル
  44. 44. 44 11.フォーム 基本 <div class="form‐group"> <label for="exampleInputEmail1">メールアドレス</label> <input type="email" class="form‐control" id="exampleInputEmail1"  placeholder="メールアドレス"> </div> <div class="form‐group"> <label for="exampleInputPassword1">パスワード</label> <input type="password" class="form‐control"  id="exampleInputPassword1" placeholder="パスワード"> </div> <div class="checkbox"> <label> form-group form-control checkbox input-XX col-nn-XX ク ラ ス名 コード ※ XXにはサイズ、グリッド数が使えます
  45. 45. 45 11.フォーム 基本 <input type="checkbox"> ログイン状態を維持する </label> </div> <button type="submit" class="btn btn‐default">ログイン</button> </form> form-group form-control checkbox input-XX col-nn-XX ク ラ ス名 コード ※ XXにはサイズ、グリッド数が使えます
  46. 46. 46 ブロック図 11.フォーム 基本 省略 (フォームの構造をイメージしてください)
  47. 47. 47 ブラウザの画⾯ 11.フォーム 基本
  48. 48. 48 12.フォーム サイズ指定 <input class="form‐control input‐lg" type="text" placeholder=".input‐lg"> <input class="form‐control" type="text" placeholder="Default input"> <input class="form‐control input‐sm" type="text" placeholder=".input‐sm"> <div class="col‐xs‐2"> <input type="text" class="form‐control" placeholder=".col‐xs‐2"> </div> <div class="col‐xs‐4"> <input type="text" class="form‐control" placeholder=".col‐xs‐4"> </div> input-XX(⾼さの調整) col-nn-XX(横幅の調整) ク ラ ス名 コード
  49. 49. 49 ブロック図 12.フォーム サイズ指定 省略 (フォームの構造をイメージしてください)
  50. 50. 50 ブラウザの画⾯ 12.フォーム サイズ指定
  51. 51. ブロック系 スタイルガイドを作る2
  52. 52. 52 13.ジャンボトロン <div class="jumbotron"> <div class="container"> <h1>Bootstrapgeek.biz</h1> <p>Bootstrapgeek.bizはWebデザイナー、Webディレクターのための Tips&学習サイトです。</p> <p><a href=“” class=“btn btn‐danger btn‐lg”>3分でわかる <br />bootstrapマスター講座</a></p> </div> </div> jumbotron ク ラ ス名 コード
  53. 53. 53 ブロック図(例) 13.ジャンボトロン div .jumbotron ⾒出し .container h1 div ⽂章、本⽂。 p .btnbutton
  54. 54. 54 ブラウザの画⾯ 13.ジャンボトロン この部分(画⾯のキービジュアル部分)
  55. 55. 55 14.囲み記事 <div class="well"> <h4>wellの使⽤法</h4> <p>特に注⽬させたいコンテンツやコラムなどに使⽤します。なお、HTML 要素ではなく、“well”は、bootstrap⽤語です。</p> </div> <div class="well well‐lg"> <h4>wellの使⽤法</h4> <p>これはクラス名well‐lgを追加した場合。<br />特に注⽬させたいコンテ ンツやコラムなどに使⽤します。なお、HTML要素ではなく、“well”は、 bootstrap⽤語です。</p> </div> well well-lg well-sm ク ラ ス名 コード ※ <p>にも使えます。
  56. 56. 56 ブロック図 14.囲み記事 省略 (ブロック構造をイメージしてください)
  57. 57. 57 ブラウザの画⾯ 14.囲み記事
  58. 58. 58 15.サムネール <div class="col-xs-12 col-sm-6"> <div class="thumbnail"> <img src="../img/02.jpg" class="img-responsive" alt="⻄洋の城"/> <div class="caption"> <h3>⻄洋の城</h3> <p>軍事的な要塞もしくは貴族の住家として、中世に建てられた城が今でも数多 く現存しています。その中にはホテルとして利⽤されている城もあり、場内を⾒学 するだけでなく、宿泊や⾷事を楽しめる場合もあります。</p> </div> </div> </div> thumbnail ク ラ ス名 コード
  59. 59. 59 15.サムネール <div class="col-xs-12 col-sm-6"> <div class="thumbnail"> <img src="../img/03.jpg" class="img-responsive" alt="⽇本の城"/> <div class="caption"> <h3>⽇本の城</h3> <p>⼤名や藩主の住居であり、政治的、軍事的な拠点としての役割を果たしてき た⽇本の城は、その多くが戦争、⽕災、天災により失われています。天守閣が当時 のまま現存している城は数えるほどしかありません。</p> </div> </div> </div> thumbnail ク ラ ス名 コード
  60. 60. 60 ブラウザの画⾯ 15.サムネール
  61. 61. 61 ブロック図(例) 15.サムネール div .col-XX-6 <img src=“” class=“img-responsive”> div .thumbnail div .caption h4 p div .col-XX-6 <img src=“” class=“img-responsive”> div .thumbnail div .caption h4 p
  62. 62. 62 Bootstrap3+WordPressセミナー 開催⽇時: 2015年7⽉11⽇(⼟)、18⽇(⼟) 17:30〜21:30 場所: 都内某所(新宿区)参加希望の⽅にご連絡します。 興味のある⽅は、na2ken.com の「専⽤フォーム よりエントリーください。 WordPressの既存テーマで⾃由にデザ イン出来なくて困っている⽅、オリジ ナルテーマでレイアウトできたらどん なに幸せか、と思ったことはありませ んか? WordPressのオリジナルテーマにBootstrap3を ビルトインしました!

×