1. No category

簡単にラクしてデザインの
クオリティを上げる方法
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 の「専用フォーム
よりエントリーください。