簡単にラクしてデザインのクオリティを上げる方法 3回シリーズ Bootstrap集中講座２国際Webデザイナーズ協会 Webデベロッパー夏本健司前回のおさらい Bootstrap3にできること１絶対カラム落ちしない基本レイアウトを数分で作ることができる２よく使うパーツを瞬時に取り出して、使うことができる３ 200種類以上のアイコンが使える４メディアクエリを一切書く必要がない（すべてがレスポンシブ対応済み） 3 前回はベーステンプレートに基本レイアウトを実装しました。 4 前回はベーステンプレートに基本レイアウトを実装しました。コピペしただけのナビバー部（ヘッダ）２つのブロックを配置しただけのコンテンツ部 5 このファイルのポイント１ＣＳＳを一切書いていない２ HTMLのほとんどはコピペ３だから制作には数分しかかかってない 6 今回の課題簡単に、ラクしてデザインクオリティを上げる！そのためには・・・・まずはBootstrap3の「コンポーネント」を極める！ 8 Bootstrap3のＵＩデザインは１カラー設計がかなり練りこまれている２よく使うたいていのパーツは揃っている３工夫次第でデザインに変化を与える余地がある jsのバッティングが皆無でCSS汚染がない。他からソースを借りてくると、整合性を見なければならないが、すべてを含むBoosstrap には、その必要がない。ソースをきちんと書いてさえあれば動作テストや表示テストの必要がなく、時短できる。 9 Bootstrap3のＵＩデザインはとはいえ、弱点もあります。。。カスタマイズの必要アリ ★★★ ←この表記で表示 10 簡単に、ラクしてデザインクオリティを上げる！そのためには・・・・良きも悪きも知ること。つまりBootstrap3の「コンポーネント」を極める！ 11 「コンポーネント」とは？あらかじめCSSでスタイルが指定されたHTML要素のこと。よく使うパーツ。 12 よく使うコンポーネント今回紹介するコンポーネント１．書式指定系 • 見出しクラス • セカンダリテキスト • ページヘッダー • 行揃え • テキスト色 • 背景色 • 画像のレスポンシブ化 • 画像の装飾 • 動画のレスポンシブ化 • リストの入れ子 • 横並びのリスト指定 • 整形済みテキスト・ソースコード • テーブル • フォーム 14 今回紹介するコンポーネント２．ブロック系 • ジャンボトロン • 囲み記事 • サムネール • メディアオブジェクト • メディアリスト • パネル • アラート • センターブロック • グリフアイコン 15 今回紹介するコンポーネント３．CSSナビゲーション系／Webアイコン • ナビゲーションバー • ボタン • ボタングループ • ボタンツールバー • パンくず • ラベル • バッジ • ピル型ナビ • ページャー • ページネーション • リストグループ 16 今回紹介するコンポーネント５．jsナビゲーション系 • ドロップダウン • モーダルダイアログ • カルーセル • タブ • アコーディオン • ツールチップ 17 1.書式指定系見出しクラス（.h1～.h6）実際の見出しとは違うサイズで表示させることがでます。カスタマイズの必要アリ ★★★ HTMLタグに付ける主なクラス名 19 セカンダリテキスト（.small）サブタイトル、キャプションとして見出しタグ内に入れて使います。これがセカンダリテキスト 20 ページヘッダー（. page-header）横幅100%の下線が入ります。 21 行揃え（. text-left, .textcenter, .text-right）クラス名を変えるだけで行揃えを変更できます。 22 テキスト色（. text-primary etc.）クラス名を変えるだけで文字色とリンク文字色を指定・変更できます。 23 背景色（. bg-primary etc.）クラス名を変えるだけで背景色とリンク文字色を指定・変更できます。 24 画像（.img-responsive）各デバイスで最適な横幅にしてくれます。 PC tab sp 25 画像装飾（.img-rounded etc.）画像のちょとした装飾なら、クラス名１つで解決！ .img-rounded .img-thumbnail .img-circle 26 動画（.embed-responsive）各デバイスで最適な横幅にしてくれます。 PC tab sp 27 リストの入れ子（.list-unstyled） HTMLデフォルトで妙にインデントのかかるリストも最適調整。カスタマイズの必要アリ ★★★ 28 横並びリスト指定（.list-inline）横並び表示もリストタグを使って一発解決。 29 整形済みテキスト（<pre>）ソースコード（<code>）とりあえす、角丸のボックスで解決。カスタマイズの必要アリ ★★★ 30 テーブル（.table etc.）面度くさいテーブルも後回しにせずとりあえずカタチにしとくことが出来る！ 31 フォーム（.form-group etc.）面度くさいフォームもCSSを一切書かずとりあえずカタチにしとく！カスタマイズの必要アリ ★ 32 ２.ブロック系ジャンボトロン（.jumbotron） jumbotronはメインビジュアルが簡単に作れる、魔法のコトバ。 34 囲み記事（.well）コンテンツのちょっとした差異に役立つ脇役。 35 サムネール（.thumbnail）工夫次第で色々なＵＩに使えそうです。。。 36 メディアブジェクト（.media）これも工夫次第で色々なＵＩに使えそうです。。。 37 メディアリスト（.media-list） WordPressのコメント表記に！ 38 パネル（.panel , .panel-default）これも工夫次第で何かに使えそうです。。。 39 アラート（.alert） Webツール系ＵＩか、色数を活かして別の用途に。 40 センターブロック（.center-block）工夫次第で何かに使えそうです。。。 41 ３.Webアイコングリフアイコン（.glyphicon-pencil etc.）約200種類のアイコンが自由に使えます。カスタマイズの必要アリ ★★★ 43 ４.CSSナビ系ナビゲーションバー（.navbar）レスポンシブWebデザインを意識せずとも勝手にそうなります。。。 PC tab sp カスタマイズの必要アリ ★ 45 ボタン（.btn etc.）使い分けると、便利そうです！グリフアイコンを付けて、とりあえず完成度を高めたように見せておくことも可。カスタマイズの必要アリ ★ 46 ボタングループ（.btn-group etc.）こちらも何かと使い道大です。。。 47 ボタンツールバー（.btn-toolbar）こちらも何かと使い道大です。。。 48 パンくず（.breadcrumb）レスポンシブWebデザインを意識せずとも勝手にそうなります。。。 49 ラベル（.label）こういう装飾類は、ゼロから作らずに使い回しましょう 50 バッジ（.badge）こういう装飾類は、ゼロから作らずに使い回しましょうカスタマイズの必要アリ ★ 51 ピル型ナビ（.nav, .nav-pills etc.）こういう装飾類は、ゼロから作らず使い回しましょう 52 ページャー（.pager）こういう装飾類は、ゼロから作らずに使い回しましょう 53 ページネーション（.pagination）こういう装飾類は、ゼロから作らずに使い回しましょう 54 リストグループ（.list-group etc.）こういう装飾類は、ゼロから作らず使い回しましょう 55 ５.jsナビ系ドロップダウン（.dropdown-toggle etc.）グロナビだけでなく、どこにでも配置ができます（以外と使えるかも）。 57 モーダルダイアログ（.modal, .fade etc.）かなり応用範囲の広いコンポーネントの１つです。カスタマイズの必要アリ ★ 58 カルーセル（.carousel etc.）かなり応用範囲の広いコンポーネントの１つです。 59 タブ（.nav, .nav-tabs etc.）「あったらいいな」を実現させた１つです。 60 アコーディオン（.panel-group etc.）「あったら便利だな」を実現させた１つです。 61 ツールチップ（data-toggle=“tooltip” etc.）「あったら便利だな」を実現させた１つです。 62 あなたは、これから 8000行のCSSを書きますか？それともBootstrapを使いますか？お知らせ Bootstrap3+WordPressセミナー WordPressのオリジナルテーマにBootstrap3 をビルトインしました！ WordPressの既存テーマで自由にデザイン出来なくて困っている方、オリジナルテーマでレイアウトできたらどんなに幸せかと思ったことはありませんか？開催日時：２０１５年７月上旬を予定しています。場所：都内某所（新宿区）参加希望の方にご連絡します。興味のある方は、na2ken.com の「専用フォームよりエントリーください。