Aquent Gymnasium LIVE w/ CSS Nite
Vol.2
「
Dreamweaver
ではじめる
Bootstrap
」
鷹野
雅弘（スイ
ッ
チ）
Bootstrap
（ブートストラップ）は、代表的な
CSS
フレームワークのひとつ。クラス名を設定するだけでタイポグラ
フィ
、フォーム、ボタン、ナビゲーションなどの構成要素に装飾情報を与えたり、マルチデバイス対応のグリッド
システムを実現することができます。
2015
年
6
月にリリースされた
Dreamweaver CC 2015
から
Bootstrap
対応になりました。これを使うことで、より
簡単に
Bootstrap
の実装を行うことができます。
このセッションでは、
Bootstrap
の基本、および、
Dreamweaver
の実装について、デモを中心に解説します。
目次
1
最近の
Dreamweaver
………
1
2
Bootstrap
………
3
3
サンプル
………
4
1.
最近の
Dreamweaver
Emmet
の標準サポートabbreviation expander
旧「
Zen Coding
」
カテゴリ Abbreviation 例
HTML
id
# div#mainclass
. div.box form#search.wide p.class1.class2.class3 子供の要素 > div>p 隣接 + div+p+bqspan
p.name{name}>.furigna{furigana} 繰り返し * ul>li*3 連番を付加 $$$ ul>li.item$*3ul>li.item$$*3 リンク a ul>li.item$*3>a a:link リンク先 ul>li.item$*3>a[href=#] リンク文言 ul>li.item$*3>a[href=#]{click me}2
CSS
width
w width
w:a width: auto; w100 width: 100px; w100p width: 100%; マージン
/
パディング m margin mt margin-top: m:a margin: auto; m20 margin: 20px; m1. margin: 1em; m0-a margin: 0 auto;m10-a-1. margin: 10px auto 1em;
組み合わせ w100p+m10-a-1. width: 100%;margin: 10px auto 1em; 背景
bg background: ;
bgc background-color: #fff;
bg+ background:#fff url() 0 0 no-repeat;
文字色 c color ボーダー bd border bd+ border: 1px solid #000; bdrs border-radius:; その他 ! !important
head
要素内link <link rel="stylesheet" href="">
link:css <link rel="stylesheet" href="style.css"> style <style></style>
Emmet
フル版オススメ
•
Wrap with Abbreviation
………
ul>li#item$$*>a[href=#] •Toggle Comment
（
HTML/CSS
）
•
Marge Lines
インストール
•
純正の
Extension Manager
はサポート終了
•DMXzone Extension Manager
•
ZXPInstaller
ライブビュー
option
キー（
Alt
キー）
+F11
で切り換え
ライブビュー モダンライブビュー
対応バージョン
CS4
以降CC
以降レンダリングエンジン
WebKit
Google Chrome
と同等新機能相関図 %SFBNXFBWFS #PPUTUSBQ #PPUTUSBQ؝ٝه٦طٝز ٔ؟؎ؤغ٦ ٖأهٝءـ8FCرؠ؎ٝ ًٖؒٝز ؙ؎حؙؽُ٦ ،؎؝ٝ %0.ػطٕ $44رؠ؎ش٦ػطٕ ٓ؎ـع؎ٓ؎ز ٔ،ٕة؎ي-JOU رغ؎أفٖؽُ٦ أذ٦ةأغ٦ ؔؿإحز ך؟؎ؤ㢌刿 ًٖؒٝزꦀׅ ꬊ邌爙ךًٖؒٝز盖椚 ًٖؒٝز锃侭 ٓ؎ـؽُ٦ך邌爙ꦀׅ DPNNBOE DPOUSPM ) ٓ؎ـؽُ٦ךⴖ䳔ִ PQUJPO ' ٓ؎ـؽُ٦דך箟꧊ 䖓䫓鵤׃طأز 歗⫷ך䪔ְ $$-JCSBSJFTػطٕ "EPCF4UPDL &YUSBDU 1IPUPTIPQך歗⫷،إحز 䯏Ⰵػطٕ #PPUTUSBQ ؟ه٦ز 倜鋉سًُؗٝز أة٦ة٦ذٝفٖ٦ز 倜鋉 ؽآُ،ٕ ًر؍،ؙؒٔ٦غ٦ ؝٦سؽُ٦ 歗⫷ فٖؽُ٦ ؕٓ٦ך فٖؽُ٦
2.
Bootstrap
container -> row -> col
•
コンテナ内部に「行」を配置
•行は横一列に並ぶ「カラム」をグループ化して内包
•カラムは一行に最大
12
個まで並べることができる
•カラムの内部にコンテンツを配置する
container row ガター （gutter） カラム （column）オフセット
省略語 ブレークポイント 意味xs
767px
以下extra small
sm
768px
以上small
md
992px
以上medium
4
xs
sm/md/lg
Bootstrap3
の
class/data
属性一覧
class属性 詳細Typography
Headings .h1 h1相当のテキストサイズにする（文字サイズを36pxにする） .h2 h2相当のテキストサイズにする（文字サイズを30pxにする） .h3 h3相当のテキストサイズにする（文字サイズを24pxにする） .h4 h4相当のテキストサイズにする（文字サイズを18pxにする） .h5 h5相当のテキストサイズにする（文字サイズを14pxにする） .h6 h6相当のテキストサイズにする（文字サイズを12pxにする）Body copy .lead リード用のテキストサイズにする（文字サイズを21pxにする）
Inline text elements .small 免責・警告・法的規制・著作権・ライセンス要件などテキスト（文字サイズを12pxにする）
Alignment classes .text-left テキストを左揃えにする
.text-center テキストを中央揃えにする .text-right テキストを右揃えにする .text-justify テキストを均等割り付けにする .text-nowrap テキストを改行させないようにする Transformation classes .text-lowercase テキストをすべて小文字にする .text-uppercase テキストをすべて大文字にする .text-capitalize テキストの最初の1文字だけ大文字にする Abbreviations .initialism テキストを大文字にする Blockquotes .blockquote-reverse 引用文全体を右寄せにする
Lists .list-unstyled このクラスがついたul, ol直下のliのマークを消す（ul>ul>liのスタイルは消えない）
.list-inline liを横並びにする（inline-block）
.dl-horizontal dtとddを横並びにする
Basic block .pre-scrollable pre内の文章が長い場合スクロールできるようにする
Tables
Basic example .table テーブルを標準のスタイルにする（thは太文字にし、1行ごとに線をつける）
Striped rows .table-striped tbody内の行の背景を薄いグレーと白に交互につける
Bordered table .table-bordered すべてのセルに縦線もつける
Hover rows .table-hover tbody内の行にマウスホバーすると色が変わるようにする
Condensed table .table-condensed すべてのセルの行間を狭くする
Contextual classes .active tr, th, tdの背景色をグレーにする
.success tr, th, tdの背景色を緑にする
.info tr, th, tdの背景色を青にする
.warning tr, th, tdの背景色を黄にする
.danger tr, th, tdの背景色を赤にする
class属性 詳細
Buttons
Options .btn a, button, input[type="button"] などを標準のボタンスタイルにする
.btn-default ボタンの色を白にする .btn-primary ボタンの色を青にする .btn-success ボタンの色を緑にする .btn-info ボタンの色を水色にする .btn-warning ボタンの色をオレンジにする .btn-danger ボタンの色を赤にする .btn-link ボタンの色を透明にする Sizes .btn-lg ボタンを大きくする .btn-sm ボタンを小さくする .btn-xs ボタンをかなり小さくする .btn-block ボタンをブロックにする
Active state .active ボタンをアクティブにする（ホバーしている状態で固定）
Disabled state .disabled ボタンを無効化する（ホバーしても反応しなくなる）
Images
Responsive images .img-responsive 画像をレスポンシブイメージにする
Image shapes .img-rounded 画像を角丸にする
.img-circle 画像を丸くする
.img-thumbnail 画像に枠線をつける
Helper classes
Contextual colors .text-muted 文字色をグレーにする
.text-primary/.text-success/.text-info 文字色を水色（緑、青）にする .text-warning/.text-danger 文字色を茶色（赤）にする Contextual backgrounds .bg-primary 背景色を青にする .bg-success 背景色を緑にする .bg-info 背景色を水色にする .bg-warning 背景色を黄色にする .bg-danger 背景色を赤にする
Close icon .close モーダルなどで使用する閉じるボタンにする
Carets .caret ドロップダウンなどで使用する下向き矢印アイコンにする
Quick floats .pull-left ブロック要素を左寄せにする
.pull-right ブロック要素を右寄せにする
Center content blocks .center-block ブロック要素にして中央寄せにする
Clearfix .clearfix floatを解除する
Showing and hiding content
.show 要素を表示する（ブロックになる）
.hidden 領域ごと非表示にする
.invisible 領域は残して非表示にする
Screen reader and keyboard navigation
.sr-only スクリーンリーダー以外で非表示にする
.sr-only-focusable スクリーンリーダー以外で非表示に、キーボードのtabなどでフォーカスされた場合には表示する
