Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

2479

3 556 vues

Publié le

  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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を ビルトインしました!

×