最速 CSS 勉強会 Id:youzaka
前回の振り返り <ul><li>HTML を書きました </li></ul><ul><li>見た目がシンプルすぎる </li></ul><ul><li>-> デザインは CSS で </li></ul>
CSSって何? <ul><li>Cascading Style Sheets の略 </li></ul><ul><li>スタイルシートの一種 </li></ul><ul><li>スタイルシート : HTML の各要素をブラウザにどう表示させるか...
CSSって何? Cited from:  ユニバーサル HTML/XHTML
CSSって何? <ul><li><h1> 勘違い学会 </h1> が ( 大きくて太いフォントに改行 ) と表示されるのは、ブラウザのデフォルトシートの効果 </li></ul><ul><li>h1 { </li></ul><ul><li>di...
<ul><li>セレクタ { プロパティ : 値 ;} </li></ul><ul><li>h1  { </li></ul><ul><li>display :  block ; </li></ul><ul><li>font-size :  2e...
<ul><li>CSS が短いなら <style> p {background: #000; color: #fff;} em {color: red;} </style> </li></ul><ul><li>普通は <link  rel =&...
最初に覚えるCSSプロパティ 線 border 要素内余白 padding 要素間余白 margin 行の高さ line-height 文字列の行揃え text-align フォントの太さ font-weight 背景の色 background...
<ul><li>p  {   font-size :  16px ;  /* ピクセル指定 */   font-size :  200% ;  /* 親要素からの相対指定   (%) */   font-size :  2em ;  /* 親要...
<ul><li>p  {   color :  #f00 ;  /*RGB*/   color :  #ff0000 ; /*RRGGBB*/   color :  rgb(255, 0, 0) ; /*rgb()*/   color :  r...
<ul><li>p  {   background-color :  #f00 ;  /*RGB*/   background-color :  #ff0000 ; /*RRGGBB*/   background-color :  rgb(25...
<ul><li>p  {   font-weight  :  bold ;  /* 絶対指定 */   font-weight  :  bolder ;  /* 相対指定 */   font-weight  :  100 ;  /* 数値指定 ...
<ul><li>上、右、下、左の値を指定 p  {   margin :  1em 10% 5px auto ; } </li></ul><ul><li>上、左右、下の値を指定 p  {   margin :  1em 10% 5px ; } ...
<ul><li>margin を padding に変えても表示結果が同じように見える ? p  {   padding :  1em ;  /* 上と下と右と左  1em * / } </li></ul><ul><li>線を引っ張ってみると違...
margin, padding <ul><li>実際に Firebug を使って、 CSS のボックスモデルについて見てみましょう。 </li></ul><ul><li>Firebug での表示 </li></ul><ul><ul><li>ma...
<ul><li>p  {   boder :  solid 1px #0f0 ; } </li></ul><ul><li>は p  {   boder-style :  solid ;   boder-width :  1px ;   bode...
border <ul><li>さまざまな種類のborderが用意されている p  {   border :  solid 10px #0f0 ;   border-style :  double ;   border-style :  dott...
次に覚えるCSSプロパティ ボックスの z 軸位置 z-index ボックスの x,y 軸位置 top, left ボックスの配置方法 position float 指定の無効化 clear ボックスの浮動制御 float ボックスの高さ he...
display <ul><li>p  {   display :  block ;   display :  inline ;   display :  none ;   display :  list-item ; } </li></ul><...
float, width, height, clear <ul><li>p  {   float :  left ;   width :  20% ;   height :  10em ; } </li></ul><ul><li>floatを指...
floatとpositionの使い分け <ul><li>positionを悪用するとレイアウトが崩壊する </li></ul><ul><ul><li>ex: ホームページビルダーのどこでも配置モード </li></ul></ul><ul><li...
レイアウト例 <ul><li>HTMLの登場順序 タイトル > 本文 > 付属情報 > フッタ </li></ul><ul><li>本文カラムにwidth + float: left </li></ul><ul><li>付属情報カラムに本文カラ...
レイアウト例 <ul><li>HTMLの登場順序 タイトル > 本文 > 付属情報 > フッタ </li></ul><ul><li>タイトル、本文、フッターのカラムに付属情報カラム分のmargin </li></ul><ul><li>付属情報カ...
セレクタについてもっと詳しく <ul><li>これまでの例はすべて、要素をセレクタにしていましたが、他にもいろんな指定ができます </li></ul><ul><li>複数の要素に同じ指定を与える em, strong  {   color : ...
セレクタについてもっと詳しく <ul><li>文脈セレクタ li em  {   color :  #f00 ; } </li></ul><ul><ul><li>li 要素の子孫である em 要素は、色を赤くする </li></ul></ul>...
セレクタについてもっと詳しく <ul><li>兄弟セレクタ h2 + p  {   text-indent :  0 ; } </li></ul><ul><ul><li>h2 要素の次に出てくる ( 弟である )p 要素は、インデントを入れない...
セレクタについてもっと詳しく <ul><li>全称セレクタ *  {   margin :  0 ; } </li></ul><ul><ul><li>すべての要素について、マージンを0にする </li></ul></ul><ul><li>p *...
セレクタについてもっと詳しく <ul><li>クラスセレクタ .notice  {   border :  solid 1px #f00 ; } </li></ul><ul><ul><li>notice というクラスをもつすべての要素について、...
セレクタについてもっと詳しく <ul><li>ID セレクタ #example_notice  {   border :  solid 1px #f00 ; } </li></ul><ul><ul><li>example_notice という ...
セレクタについてもっと詳しく <ul><li>属性セレクタ h2[title]  {} /* title 属性を持つ h2 要素 */ input[type=“text”]  {} /* type 属性が” text” である input 要素...
CSSの「カスケーディング」 <ul><li>CSS の指定は、「誰による指定か」「セレクタの選択範囲はどれくらいか」「順序」によって優先順位が決められている </li></ul><ul><li>誰による指定か </li></ul><ul><u...
CSSの「カスケーディング」 <ul><li>セレクタの選択範囲 </li></ul><ul><li>p { color :  #f00 ;} p.hoge { color :  #00f ;} p#hage { color :  #00f ;...
CSSの「カスケーディング」 <ul><li>継承 </li></ul><ul><li>p { color :  #f00 ;} em { font-size :  large ;} </li></ul><ul><li><p> ああ <em> ...
Upcoming SlideShare
Loading in …5
×

CSS勉強会

4,894 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,894
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS勉強会

  1. 1. 最速 CSS 勉強会 Id:youzaka
  2. 2. 前回の振り返り <ul><li>HTML を書きました </li></ul><ul><li>見た目がシンプルすぎる </li></ul><ul><li>-> デザインは CSS で </li></ul>
  3. 3. CSSって何? <ul><li>Cascading Style Sheets の略 </li></ul><ul><li>スタイルシートの一種 </li></ul><ul><li>スタイルシート : HTML の各要素をブラウザにどう表示させるかを定めたもの </li></ul><ul><li>古いブラウザには JSSS (JavaScript Style Sheets) というものを実装をしたものもあったが、それは無視 </li></ul>
  4. 4. CSSって何? Cited from: ユニバーサル HTML/XHTML
  5. 5. CSSって何? <ul><li><h1> 勘違い学会 </h1> が ( 大きくて太いフォントに改行 ) と表示されるのは、ブラウザのデフォルトシートの効果 </li></ul><ul><li>h1 { </li></ul><ul><li>display: block; </li></ul><ul><li>font-size: 2em; </li></ul><ul><li>margin: .67em 0; </li></ul><ul><li>font-weight: bolder; </li></ul><ul><li>} </li></ul><ul><li>(http://www.w3.org/TR/CSS21/sample.html を元に作成 ) </li></ul>
  6. 6. <ul><li>セレクタ { プロパティ : 値 ;} </li></ul><ul><li>h1 { </li></ul><ul><li>display : block ; </li></ul><ul><li>font-size : 2em ; </li></ul><ul><li>margin : .67em 0 ; </li></ul><ul><li>font-weight : bolder ; </li></ul><ul><li>} </li></ul><ul><li>セレクタ はHTMLの要素などを指定する </li></ul><ul><li>プロパティ と 値 のペアを:(コロン)で指定する </li></ul><ul><li>ペアは;(セミコロン)で列挙できる </li></ul>CSSの書き方
  7. 7. <ul><li>CSS が短いなら <style> p {background: #000; color: #fff;} em {color: red;} </style> </li></ul><ul><li>普通は <link rel =&quot; stylesheet &quot; href =&quot; path/to/css &quot;> </li></ul>CSSの記述をHTMLに反映させる
  8. 8. 最初に覚えるCSSプロパティ 線 border 要素内余白 padding 要素間余白 margin 行の高さ line-height 文字列の行揃え text-align フォントの太さ font-weight 背景の色 background-color 文字の色 color フォントサイズ font-size 説明 プロパティ名
  9. 9. <ul><li>p { font-size : 16px ; /* ピクセル指定 */ font-size : 200% ; /* 親要素からの相対指定 (%) */ font-size : 2em ; /* 親要素からの相対指定 (em) */ font-size : 3cm ; /* 絶対指定 */ font-size : xx-small ;/* 絶対キーワード指定 */ font-size : bigger ; /* 相対キーワード指定 */ } </li></ul><ul><li>文字の大きさを絶対指定するのはなるべく避け、親要素からの相対サイズを指定するようにする。 </li></ul><ul><li>em は「文字” m” の横幅」を表す単位。 </li></ul><ul><li>2em と 200% は同じ意味だが、 em で指定すると古い IE でいやなことに…… </li></ul>文字の大きさを変えてみよう
  10. 10. <ul><li>p { color : #f00 ; /*RGB*/ color : #ff0000 ; /*RRGGBB*/ color : rgb(255, 0, 0) ; /*rgb()*/ color : red ; /* キーワード */ color : inherit ; /* 親要素の指定を継承する */ </li></ul><ul><li>} </li></ul><ul><li>R( 赤 )G( 緑 )B( 青 ) の組み合わせで色を表現することに慣れるようにする。 赤 + 緑 = 黄、赤 + 青 = 紫、緑 + 青 = 青緑 赤 + 緑 + 青 = 白 </li></ul><ul><li>色名はたくさん定義されているが、それよ り #RRGGBB に慣れたほうが良い </li></ul>文字の色を変えてみよう
  11. 11. <ul><li>p { background-color : #f00 ; /*RGB*/ background-color : #ff0000 ; /*RRGGBB*/ background-color : rgb(255, 0, 0) ; /*rgb()*/ background-color : red ; /* キーワード */ background-color : transparent ; /* 透明 */ } </li></ul><ul><li>背景色のほかに、背景画像の指定もできる p { background-image : url( path/to/image ) ; background-repeat : repeat-x ; background-position : bottom right ; } </li></ul><ul><li>まとめて指定 p { background : #f00 url( image ) repeat-x bottom ; } </li></ul>背景の色を変えてみよう
  12. 12. <ul><li>p { font-weight : bold ; /* 絶対指定 */ font-weight : bolder ; /* 相対指定 */ font-weight : 100 ; /* 数値指定 (100 ~ 900) */ } </li></ul><ul><li>ただし、ほとんどのフォントは normal と bold しか区別してくれない。 </li></ul><ul><li>斜体にしたいときは p { font-style : italic ;} </li></ul><ul><li>等幅にしたいときは p { font-family : monospace ;} p { text-align : center ; line-height : 1.5 ; /* 数値指定 */ line-height : 15px ; /* 単位つき指定 */ line-height : 150% ; /* パーセント指定 */ } </li></ul>フォントの太さと行揃え、行間隔
  13. 13. <ul><li>上、右、下、左の値を指定 p { margin : 1em 10% 5px auto ; } </li></ul><ul><li>上、左右、下の値を指定 p { margin : 1em 10% 5px ; } </li></ul><ul><li>上下、左右の値を指定 p { margin : 1em 10% ; } </li></ul><ul><li>上下左右の値をまとめて指定 p { margin : 1em ; } </li></ul>margin, padding
  14. 14. <ul><li>margin を padding に変えても表示結果が同じように見える ? p { padding : 1em ; /* 上と下と右と左 1em * / } </li></ul><ul><li>線を引っ張ってみると違いが分かるはず p { boder : solid 1px #0f0 ; } </li></ul>margin, padding
  15. 15. margin, padding <ul><li>実際に Firebug を使って、 CSS のボックスモデルについて見てみましょう。 </li></ul><ul><li>Firebug での表示 </li></ul><ul><ul><li>margin …… 黄色 </li></ul></ul><ul><ul><li>padding …… 紺青色 </li></ul></ul><ul><ul><li>content …… 水色 </li></ul></ul>Cited from: 基礎編 2 ボックスモデルと DOCTYPE スイッチ http://www.geocities.jp/multi_column/float/02.html
  16. 16. <ul><li>p { boder : solid 1px #0f0 ; } </li></ul><ul><li>は p { boder-style : solid ; boder-width : 1px ; boder-color : #0f0 ; } </li></ul><ul><li>と同じ意味。また、 p { boder-top : solid 1px #0f0 ; boder-right : solid 1px #0f0 ; boder-bottom : solid 1px #0f0 ; boder-left : solid 1px #0f0 ; } </li></ul><ul><li>とも同じ意味。辺によって border の表現を変えたいときに簡単なほうを選ぶ </li></ul>border
  17. 17. border <ul><li>さまざまな種類のborderが用意されている p { border : solid 10px #0f0 ; border-style : double ; border-style : dotted ; border-style : dashed ; border-style : groove ; border-style : ridge ; border-style : inset ; border-style : outset ; } </li></ul>
  18. 18. 次に覚えるCSSプロパティ ボックスの z 軸位置 z-index ボックスの x,y 軸位置 top, left ボックスの配置方法 position float 指定の無効化 clear ボックスの浮動制御 float ボックスの高さ height ボックスの幅 width 表示のされ方 display 説明 プロパティ名
  19. 19. display <ul><li>p { display : block ; display : inline ; display : none ; display : list-item ; } </li></ul><ul><li>HTML のブロック要素・インライン要素と CSS の block, inline を混同しないようにする </li></ul><ul><li>p 要素に背景色や border をつけた状態で、 p 要素の display 値を inline にしてみよう </li></ul>
  20. 20. float, width, height, clear <ul><li>p { float : left ; width : 20% ; height : 10em ; } </li></ul><ul><li>floatを指定する要素にはwidthの指定が必須 </li></ul><ul><li>heightはなくてもいい (初期値のautoが適用) </li></ul><ul><li>floatによる回り込み指定を解除するには、解除に使う要素に clear : both ; を指定する </li></ul>
  21. 21. floatとpositionの使い分け <ul><li>positionを悪用するとレイアウトが崩壊する </li></ul><ul><ul><li>ex: ホームページビルダーのどこでも配置モード </li></ul></ul><ul><li>HTMLとしての登場順序とデザインの兼ね合い </li></ul><ul><li>融通の利く方向 </li></ul><ul><li>実際に書いてみればだんだんつかめるはず </li></ul>
  22. 22. レイアウト例 <ul><li>HTMLの登場順序 タイトル > 本文 > 付属情報 > フッタ </li></ul><ul><li>本文カラムにwidth + float: left </li></ul><ul><li>付属情報カラムに本文カラム+α分のmargin </li></ul><ul><li>フッターカラムにclear: left </li></ul>タイトルカラム 本文カラム 付属情 報カラム フッターカラム
  23. 23. レイアウト例 <ul><li>HTMLの登場順序 タイトル > 本文 > 付属情報 > フッタ </li></ul><ul><li>タイトル、本文、フッターのカラムに付属情報カラム分のmargin </li></ul><ul><li>付属情報カラムはposition: absolute </li></ul>タイトルカラム 本文カラム 付属情 報カラム フッターカラム
  24. 24. セレクタについてもっと詳しく <ul><li>これまでの例はすべて、要素をセレクタにしていましたが、他にもいろんな指定ができます </li></ul><ul><li>複数の要素に同じ指定を与える em, strong { color : #f00 ; font-weight : bold ; font-size : 150% ; } </li></ul>
  25. 25. セレクタについてもっと詳しく <ul><li>文脈セレクタ li em { color : #f00 ; } </li></ul><ul><ul><li>li 要素の子孫である em 要素は、色を赤くする </li></ul></ul><ul><li>子供セレクタ li + em { color : #f00 ; } </li></ul><ul><ul><li>li 要素の子である em 要素は、色を赤くする </li></ul></ul>
  26. 26. セレクタについてもっと詳しく <ul><li>兄弟セレクタ h2 + p { text-indent : 0 ; } </li></ul><ul><ul><li>h2 要素の次に出てくる ( 弟である )p 要素は、インデントを入れない <h2> 中見出しだよ </h2> <p> その後の段落だよ </p> </li></ul></ul>
  27. 27. セレクタについてもっと詳しく <ul><li>全称セレクタ * { margin : 0 ; } </li></ul><ul><ul><li>すべての要素について、マージンを0にする </li></ul></ul><ul><li>p * em { color : red ; } </li></ul><ul><ul><li>p 要素の子孫の任意の要素の子孫の em 要素の文字色を赤くする </li></ul></ul>
  28. 28. セレクタについてもっと詳しく <ul><li>クラスセレクタ .notice { border : solid 1px #f00 ; } </li></ul><ul><ul><li>notice というクラスをもつすべての要素について、枠線を表示する </li></ul></ul><ul><li>.invalid.notice { border : solid 1px #f00 ; } </li></ul><ul><ul><li>invalid というクラスと notice というクラスを同時にもつすべての要素について、枠線を表示する </li></ul></ul><ul><li>p.notice { border : solid 1px #f00 ; } </li></ul><ul><ul><li>notice というクラスをもつ p 要素について、枠線を表示する </li></ul></ul>
  29. 29. セレクタについてもっと詳しく <ul><li>ID セレクタ #example_notice { border : solid 1px #f00 ; } </li></ul><ul><ul><li>example_notice という ID をもつすべての要素について、枠線を表示する </li></ul></ul><ul><ul><li>クラスセレクタや ID セレクタは便利だが、なるべく文脈セレクタを利用するべき。 CSS のために HTML に手を加えるのは控える </li></ul></ul>
  30. 30. セレクタについてもっと詳しく <ul><li>属性セレクタ h2[title] {} /* title 属性を持つ h2 要素 */ input[type=“text”] {} /* type 属性が” text” である input 要素 */ </li></ul><ul><li>擬似クラスセレクタ a:link {} /* 未訪問 URI へのリンク */ a:visited {} /* 訪問済み URI へのリンク */ a:active {} /* 選択中のリンク */ a:hover {} /* マウスが載っている リンク */ </li></ul><ul><li>擬似要素セレクタ a:fitst-line {} /* 要素の最初の 1 行 */ a:first-letter {} /* 要素の最初の 1 字 */ </li></ul>
  31. 31. CSSの「カスケーディング」 <ul><li>CSS の指定は、「誰による指定か」「セレクタの選択範囲はどれくらいか」「順序」によって優先順位が決められている </li></ul><ul><li>誰による指定か </li></ul><ul><ul><li>ブラウザの指定 < 読者による指定 < 作者による指定 </li></ul></ul><ul><ul><li>!important キーワードで優先順位を上書き可能 </li></ul></ul><ul><ul><li>ユーザーシートの設定方法はブラウザによる </li></ul></ul><ul><li>順序 </li></ul><ul><ul><li>後に読んだものが優先。指定があるごとにどんどん上書きされる </li></ul></ul>
  32. 32. CSSの「カスケーディング」 <ul><li>セレクタの選択範囲 </li></ul><ul><li>p { color : #f00 ;} p.hoge { color : #00f ;} p#hage { color : #00f ;} </li></ul><ul><li><p class =“ hoge ” id =“ hage ”> 何色になる ? </p> </li></ul><ul><ul><li>選択範囲が狭いものが優先 </li></ul></ul><ul><ul><ul><li>id セレクタ > クラスセレクタ > 要素セレクタ </li></ul></ul></ul><ul><ul><ul><li>.hoge と p.hoge は p.hoge が優先。要素が指定されている分だけ選択範囲が狭い </li></ul></ul></ul>
  33. 33. CSSの「カスケーディング」 <ul><li>継承 </li></ul><ul><li>p { color : #f00 ;} em { font-size : large ;} </li></ul><ul><li><p> ああ <em> ああ </em> ああああ </p> </li></ul><ul><ul><li>em 要素に文字の色の指定はないが、親要素である p の文字色の指定が、子の em に継承される </li></ul></ul>

×