Css2

Css2

• 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) titleJumbotronTemplate 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 . お疲れ様でした！！