Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
1 
CSSを⾒見見てみよう! 
Copyright (c) 株式会社HEART QUAKE All rights reserved .
2 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
要素の検証 (1/3) 
l CSSを⾒見見てみよう! 
- どのセレクタにどんなCSSが適⽤用されているのかを 
要素の検証(G...
3 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
要素の検証 (2/3) 
l CSSを⾒見見てみよう! 
- 要素の検証を利利⽤用すればあらゆるサイトのCSSを勉強するこ 
とが...
4 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
要素の検証 (3/3) 
l CSSを⾒見見てみよう! 
- 要素の検証では、HTMLやCSSを変更更することができます。 
- ...
5 
Bootstrapでの要素の検証 (1/6) 
l Bootstrapの要素の検証の際の注意点 (Bootstrap3.3.0 2014/11/25時点) 
- docs  examples  jumbotron  index.html...
6 
Bootstrapでの要素の検証 (2/6) 
l Bootstrapの要素の検証の際の注意点 
- docs  examples  jumbotron  index.html を⾒見見てみると 
- 14⾏行行⽬目の記述からboots...
Bootstrapでの要素の検証 (3/6) 
5⾏行行⽬目に全てのCSSが記述されているのがわかります。 
- docs  dist  css には bootstrap.css というファイルがありますが、 
bootstrap.min.cs...
Bootstrapでの要素の検証 (4/6) 
titleJumbotron Template for Bootstrap/title 
!-- Bootstrap core CSS -- 
link href=../../dist/css/b...
9 
Bootstrapでの要素の検証 (5/6) 
l Bootstrapの要素の検証の際の注意点 
- 「Learn More」 ボタンのCSSのファイルや、⾏行行数が変更更さ 
れるのがわかると思います。 
- docs  dist  ...
10 
Bootstrapでの要素の検証 (6/6) 
l Bootstrapの要素の検証の際の注意点 
- 注意! 
ü bootstrap.css : 2886とならずに、buttons.less: 11 
となる場合は⼀一度度、bac...
11 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
お疲れ様でした!!
Nächste SlideShare
Wird geladen in …5
×

Css2

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Css2

  1. 1. 1 CSSを⾒見見てみよう! Copyright (c) 株式会社HEART QUAKE All rights reserved .
  2. 2. 2 Copyright (c) 株式会社HEART QUAKE All rights reserved . 要素の検証 (1/3) l CSSを⾒見見てみよう! - どのセレクタにどんなCSSが適⽤用されているのかを 要素の検証(Google Chrome の場合)というツールによって 表⽰示することができます。 - Google Chrome 表⽰示 開発/管理理 ディベロッパーツール
  3. 3. 3 Copyright (c) 株式会社HEART QUAKE All rights reserved . 要素の検証 (2/3) l CSSを⾒見見てみよう! - 要素の検証を利利⽤用すればあらゆるサイトのCSSを勉強するこ とができます。 【HTMLの表⽰示領領域】 フォーカスをあてた 要素部分の⾊色が変わる 【CSSの表⽰示領領域】 どのCSSファイルの何⾏行行⽬目 に記述されているかが表⽰示 される 【CSSの表⽰示領領域】 HTML表⽰示領領域でフォーカス をあてた要素のCSSが 表⽰示される
  4. 4. 4 Copyright (c) 株式会社HEART QUAKE All rights reserved . 要素の検証 (3/3) l CSSを⾒見見てみよう! - 要素の検証では、HTMLやCSSを変更更することができます。 - ただし、編集は⼀一時的なもので、HTMLファイルやCSSファイ ルを書き換えるものではありません。 ü また、更更新ボタンを押すと編集した内容は失われます。 【HTMLの表⽰示領領域】 ダブルクリックすると 編集可能になり、Enter キーで編集が反映される
  5. 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. 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. 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. 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. 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. 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. 11 Copyright (c) 株式会社HEART QUAKE All rights reserved . お疲れ様でした!!

×