Movatterモバイル変換

国際Webデザイナーズ協会Webデベロッパー夏本健司Bootstrap集中講座※記載しているソフトウェアやサービス、コーディング技術等は2015年6⽉18⽇現在のものであり、以降、仕様変更により機能や名称、画⾯上の位置等が変更されている場合があります。超・実践１

2今回マスターする１５個1.⾒出し2.セカンダリテキスト3.⾏揃え4.テキスト⾊5.背景⾊6.画像埋め込み7.動画埋め込み8.リスト9.リストのインライン化10.テーブル11.フォーム基本12.フォームサイズ指定13.ジャンボトロン14.囲み記事15.サムネール書式指定系ブロック系

Bootstrap利⽤のポイント１

4ポイント１.Bootstrapのコーディング精度はかなり⾼いです。「あれっ？これ、どうなっているの？」と思うことの原因の⼤半は、Bootstrapが推奨していないコーディング⽅法だったり、タグの書き間違いだったりします。正確にコーディングすれば、ならず正常に表⽰・動作します。これは、私が仕事の現場で実際に体験してきていることです。ですので、「あれっ？」と思ったら、まずは公式サイトのガイドラインやネット上の信頼できそうなＴＩＰＳを参考にコードを⾒直してみましょう。Bootstrapにバグはない（コードの精度が⾼い）。

5ポイント２.Bootstrapは、HTMLへの記名ルールとしてＩＤ名は、使いません。もともと、ＯＯＣＳＳやＳＭＡＣＳＳの考え⽅をベースにＣＳＳ設計をしているからです。Bootstrapは、ＩＤ名を使わない。

6ポイント３.よく「マルチクラスにすると、ブラウザのレンダリングの負担や処理速度の遅延につながるのでは？」という質問を受けますが、私が現在、仕事をしている上で問題になったことは１度もありません。ブラウザのレンダリング時間のネックになっている、という数値的根拠もありません。もちろん、マルチクラスよりシングルクラスの⽅がシンプルだし、⼀般的に考えて処理の時間は短いでしょう。でも変わるのは、おそらくコンマ００数秒の時間の差でしょうし、そのくらいの時間であればブラウザのレンダリング処理としては全く気にならない（差にならない）程度のわずかな時間でしょう。マルチクラスでも処理速度は遅くならない。

7ポイント４.Bootstrapでは、「container」「row」のように画⾯の構造を受け持つブロックに付ける名前や、「btn」「form-group」などのようにモジュールの構造を受け持つための名前など、他のＣＳＳフレームワークやシステムでも使われそうな名前が多くあります。ＣＳＳで、同じ名前で複数のスタイルが設定されている場合で、それが意図的でない場合は、「ＣＳＳ汚染」となって、意図したようにブラウザで表⽰できない、いわゆる「表⽰崩れ」の⼤きな原因になります。ですので、Bootsrapを使う場合は、他のＣＳＳフレームワークは使わない、逆に他のＣＳＳフレームを使う場合は、Bootstrapは使わないようにしましょう。まぜるな、危険！

8ポイント５.Bootstrapには、現在、⼤きく分けて「バージョン２系」と「バージョン３系」があります。メジャーバージョン名である整数部分の数字で区別します。「バージョン２系」と「バージョン３系」では、同じ機能でもクラス名が違ったり、使い⽅が違ったり、あるいは「バージョン２系」ではある機能が「バージョン３系」では廃⽌になっているものもあります。もしもネット上で情報検索する場合は、このバージョンをちゃんと識別する必要があります。当然、「バージョン３系」でサイト構築をしていて、ネット上にある「バージョン２系」のＴＩＰＳで実装をしても、正常に表⽰・操作しない場合があるからです。私が「Bootstra3」と銘打っているのはそのためで、「バージョン２系」と区別するためです。バージョン違えば別の顔

9ポイント６.Bootstrapでサイト構築をする場合、あるいは表⽰テスト等する場合は、ぜひ「スタイルガイド」を作って公開をしてください。「スタイルガイド」にコンポーネントを書き溜めていくと、「汎⽤的な部品のパーツ集」になり、次にサイト構築する時のライブラリになりますし、クライントやプロジェクトメンバー内での情報共有・ガイドラインになります。スタイルガイド作りに集中すること。

スタイルガイドを作る２

書式指定系スタイルガイドを作る２

12準備：HTMLを準備する実際にBootstrapを使ってHTMLを書き出す時は、あちこち散乱させずに１つのファイル・サイトとしてまとめておいた⽅が良いです。あとで書き⾜したりすれば、あなた⾃⾝の「百科事典」になりますし、実際に仕事でも使えるライブラリにするためです。勉強のための「短なる演習」にせず、実際に「使えるツール」にしてください。前々回のHTMLテンプレートや、⾃分でレイアウト・デザインの雛形を持っている⼈は、それに書き⾜していくようにしましょう。スタイルガイドにするHTMLを準備する。

131.⾒出し<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クラス名コード

141.⾒出しブロック図h1 .h1ページの⾒出し、英名は「heading」。h1 .h2ページの⾒出し、英名は「heading」。h1 .h3ページの⾒出し、英名は「heading」。h1 .h3ページの⾒出し、英名は「heading」。

151.⾒出しブラウザの画⾯

162.セカンダリテキスト<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>タグ名コード

172.セカンダリテキストブロック図h1 .h1ページの⾒出し、<small>英名は「heading」。</small>h1 .h2ページの⾒出し、<small>英名は「heading」。</small>h1 .h3ページの⾒出し、<small>英名は「heading」。</small>h1 .h3ページの⾒出し、<small>英名は「heading」。</small>

182.セカンダリテキストブラウザの画⾯

193.⾏揃え<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クラス名コード

203.⾏揃えブロック図ｐ .text-left左揃えにしたい時／クラス名：text‐leftｐ .text-center中央揃えにしたい時／クラス名：text‐centerｐ .text-right右揃えにしたい時／クラス名：text‐right

213.⾏揃えブラウザの画⾯

224.テキスト⾊<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-successtext-info text-warning text-dangerクラス名コード

23ブロック図4.テキスト⾊ｐ . text-muted◆テキストバリエーション⾊・・・< a href=“”></a>ｐ . text-primary◆重要⾊[primary]／クラス名・・・< a href=“”></a>ｐ . text-success◆成功⾊[success]／クラス名・・・< a href=“”></a>・・・

24ブラウザの画⾯4.テキスト⾊

255.背景⾊<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-warningbg-dangerクラス名コード

26ブロック図5.背景⾊ｐ . bg-primary◆重要⾊[primary]／クラス名・・・< a href=“”></a>ｐ . text-success◆成功⾊[success]／クラス名・・・< a href=“”></a>ｐ . text-info◆情報⾊[info]／クラス名・・・< a href=“”></a>・・・

27ブラウザの画⾯5.背景⾊

286.画像埋め込み<img src=“../img/img01.jpg” class=“img‐responsive” alt=“画像"/>img-responsiveクラス名コード

29ブロック図6.画像埋め込み<img src=“” class=“img-responsive” alt=“画像"/>

30ブラウザの画⾯6.画像埋め込み親ブロックの横幅１００％になる

31<div class="embed-responsive embed-responsive-16by9"><iframe class=“embed-responsive-item”src=“//www.youtube.com/embed/ｘｘｘｘｘ"></iframe></div>embed-responsive embed-responsive-itemクラス名コード7.動画埋め込み説明：画⾯のアスペクト⽐を必ず⼊れる例 16by9 4by3 など

32ブロック図7.動画埋め込みdiv .embed-responsive<iframe class=“embed-responsive-item”src=“//www.youtube.com/embed/ｘｘｘｘｘ"></iframe>

33ブラウザの画⾯7.動画埋め込み親ブロックの横幅１００％になる

348.リスト<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ブロック図8.リストul .list-unstyledリスト項⽬liリスト項⽬liリスト項⽬liulリスト項⽬li

36ブラウザの画⾯8.リストインデントがなくなる

379.リストのインライン化<ul class="list‐inline"><li>東京本店</li><li>札幌⽀店</li><li>神奈川⽀店</li><li>名古屋⽀店</li><li>⼤阪⽀店</li><li>福岡⽀店</li></ul>list-inlineクラス名コード

38ブロック図9.リストのインライン化ul .list-inline東京本店li札幌⽀店li神奈川⽀店li・・・

39ブラウザの画⾯9.リストのインライン化

4010.テーブル<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-borderedtable-hover table-condensed table-responsiveクラス名コード

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-borderedtable-hover table-condensed table-responsiveクラス名コード41

42ブロック図10.テーブル省略（テーブルのセルの構造をイメージしてください）

43ブラウザの画⾯10.テーブル

4411.フォーム基本<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 checkboxinput-XX col-nn-XXクラス名コード※ XXにはサイズ、グリッド数が使えます

4511.フォーム基本<input type="checkbox"> ログイン状態を維持する</label></div><button type="submit" class="btn btn‐default">ログイン</button></form>form-group form-control checkboxinput-XX col-nn-XXクラス名コード※ XXにはサイズ、グリッド数が使えます

46ブロック図11.フォーム基本省略（フォームの構造をイメージしてください）

47ブラウザの画⾯11.フォーム基本

4812.フォームサイズ指定<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ブロック図12.フォームサイズ指定省略（フォームの構造をイメージしてください）

50ブラウザの画⾯12.フォームサイズ指定

ブロック系スタイルガイドを作る２

5213.ジャンボトロン<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ブロック図（例）13.ジャンボトロンdiv .jumbotron⾒出し.containerh1div⽂章、本⽂。ｐ.btnbutton

54ブラウザの画⾯13.ジャンボトロンこの部分（画⾯のキービジュアル部分）

5514.囲み記事<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ブロック図14.囲み記事省略（ブロック構造をイメージしてください）

57ブラウザの画⾯14.囲み記事

5815.サムネール<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クラス名コード

5915.サムネール<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ブラウザの画⾯15.サムネール

61ブロック図（例）15.サムネールdiv .col-XX-6<img src=“”class=“img-responsive”>div .thumbnaildiv .captionh4pdiv .col-XX-6<img src=“”class=“img-responsive”>div .thumbnaildiv .captionh4p

62Bootstrap3+WordPressセミナー開催⽇時：２０１５年７⽉11⽇（⼟）、18⽇（⼟）１７：３０〜２１：３０場所：都内某所（新宿区）参加希望の⽅にご連絡します。興味のある⽅は、na2ken.com の「専⽤フォームよりエントリーください。WordPressの既存テーマで⾃由にデザイン出来なくて困っている⽅、オリジナルテーマでレイアウトできたらどんなに幸せか、と思ったことはありませんか？WordPressのオリジナルテーマにBootstrap3をビルトインしました！

Movatterモバイル変換

Change Language

2479

Recommended

More Related Content

What's hot

Viewers also liked

More from schoowebcampus

2479