1. 1
CSSを⾒見見てみよう！
Copyright (c) 株式会社HEART QUAKE All rights reserved .

2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
要素の検証 (1/3)
l CSSを⾒見見てみよう！
- どのセレクタにどんなCSSが適⽤用されているのかを
要素の検証(Google Chrome の場合)というツールによって
表⽰示することができます。
- Google Chrome 表⽰示 開発/管理理 ディベロッパーツール

3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
要素の検証 (2/3)
l CSSを⾒見見てみよう！
- 要素の検証を利利⽤用すればあらゆるサイトのCSSを勉強するこ
とができます。
【HTMLの表⽰示領領域】
フォーカスをあてた
要素部分の⾊色が変わる
【CSSの表⽰示領領域】
どのCSSファイルの何⾏行行⽬目
に記述されているかが表⽰示
される
【CSSの表⽰示領領域】
HTML表⽰示領領域でフォーカス
をあてた要素のCSSが
表⽰示される

4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
要素の検証 (3/3)
l CSSを⾒見見てみよう！
- 要素の検証では、HTMLやCSSを変更更することができます。
- ただし、編集は⼀一時的なもので、HTMLファイルやCSSファイ
ルを書き換えるものではありません。
ü また、更更新ボタンを押すと編集した内容は失われます。
【HTMLの表⽰示領領域】
ダブルクリックすると
編集可能になり、Enter
キーで編集が反映される

5. 5
Bootstrapでの要素の検証 (1/6)
l Bootstrapの要素の検証の際の注意点 (Bootstrap3.3.0 2014/11/25時点)
- docs examples jumbotron index.html の要素の検証
- 「Learn More」 ボタンを⾒見見てみるとボタンの⾊色がどのように定義さ
れているかがわかります。
Copyright (c) 株式会社HEART QUAKE All rights reserved .
【CSSの表⽰示領領域】
bootstrap.min.cssの
5⾏行行⽬目に記述されている
【CSSの表⽰示領領域】
btn-primaryのcss
classの指定は「.」を付ける

6. 6
Bootstrapでの要素の検証 (2/6)
l Bootstrapの要素の検証の際の注意点
- docs examples jumbotron index.html を⾒見見てみると
- 14⾏行行⽬目の記述からbootstrap.min.cssは
- docs dist css の中にあるのがわかります。
titleJumbotron Template for Bootstrap/title
!-- Bootstrap core CSS --
link href=../../dist/css/bootstrap.min.css
rel=stylesheet
!-- Custom styles for this template --
link href=jumbotron.css rel=stylesheet
Copyright (c) 株式会社HEART QUAKE All rights reserved .
このhtmlファイルからみ
て2つ上のフォルダの
（1つ上 = ../ ）
distの中のcssの中に
あるbootstrap.min.css
を使います

7. Bootstrapでの要素の検証 (3/6)
5⾏行行⽬目に全てのCSSが記述されているのがわかります。
- docs dist css には bootstrap.css というファイルがありますが、
bootstrap.min.cssはbootstrap.cssから
改⾏行行や余計なスペースを取り除いたファイルとなっています。
- これは、改⾏行行やスペースによってファイルのサイズを少しでも
⼩小さくすることによってCSSの読込速度度をはやくすること
を⽬目的としています。
7
l Bootstrapの要素の検証の際の注意点
- docs dist css bootstrap.min.css を⾒見見てみると
Copyright (c) 株式会社HEART QUAKE All rights reserved .

8. Bootstrapでの要素の検証 (4/6)
titleJumbotron Template for Bootstrap/title
!-- Bootstrap core CSS --
link href=../../dist/css/bootstrap.css rel=stylesheet
!-- Custom styles for this template --
link href=jumbotron.css rel=stylesheet
- なお、cssファイルから改⾏行行や余計なスペースを削除するツールも
ネット上に⽤用意されています。
8
l Bootstrapの要素の検証の際の注意点
- 従って、bootstrapのcssを⾃自分で加筆、修正するには
- 14⾏行行⽬目の記述をbootstrap.min.cssからbootstrap.cssに変更更し、
- bootstrap.cssを修正するのがオススメです。
ü ex. 「css minファイル」で検索索！
Copyright (c) 株式会社HEART QUAKE All rights reserved .
bootstrap.min.css
から
bootstrap.css
を使うように変更更する

9. 9
Bootstrapでの要素の検証 (5/6)
l Bootstrapの要素の検証の際の注意点
- 「Learn More」 ボタンのCSSのファイルや、⾏行行数が変更更さ
れるのがわかると思います。
- docs dist css にbootstrap.cssが無ければ、dist css か
らbootstrap.cssをコピーすること
Copyright (c) 株式会社HEART QUAKE All rights reserved .
【CSSの表⽰示領領域】
bootstrap.cssの
2886⾏行行⽬目に記述されている
【CSSの表⽰示領領域】
btn-primaryのcss
classの指定は「.」を付ける

10. 10
Bootstrapでの要素の検証 (6/6)
l Bootstrapの要素の検証の際の注意点
- 注意！
ü bootstrap.css : 2886とならずに、buttons.less: 11
となる場合は⼀一度度、background-colorをredに変更更
してみるとbootstrap.cssの何⾏行行⽬目なのかが表⽰示される
Copyright (c) 株式会社HEART QUAKE All rights reserved .
lessについては少し難しいの
で興味のあるひとは調べて
みてください。
bootstrap.cssでの
⾏行行数が記述されている

11. 11
Copyright (c) 株式会社HEART QUAKE All rights reserved .
お疲れ様でした！！