SlideShare uma empresa Scribd logo
1 de 33
最速 CSS 勉強会 Id:youzaka
前回の振り返り ,[object Object],[object Object],[object Object]
CSSって何? ,[object Object],[object Object],[object Object],[object Object]
CSSって何? Cited from:  ユニバーサル HTML/XHTML
CSSって何? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CSSの書き方
[object Object],[object Object],CSSの記述をHTMLに反映させる
最初に覚えるCSSプロパティ 線 border 要素内余白 padding 要素間余白 margin 行の高さ line-height 文字列の行揃え text-align フォントの太さ font-weight 背景の色 background-color 文字の色 color フォントサイズ font-size 説明 プロパティ名
[object Object],[object Object],[object Object],[object Object],文字の大きさを変えてみよう
[object Object],[object Object],[object Object],[object Object],文字の色を変えてみよう
[object Object],[object Object],[object Object],背景の色を変えてみよう
[object Object],[object Object],[object Object],[object Object],フォントの太さと行揃え、行間隔
[object Object],[object Object],[object Object],[object Object],margin, padding
[object Object],[object Object],margin, padding
margin, padding ,[object Object],[object Object],[object Object],[object Object],[object Object],Cited from:  基礎編 2  ボックスモデルと DOCTYPE スイッチ http://www.geocities.jp/multi_column/float/02.html
[object Object],[object Object],[object Object],[object Object],border
border ,[object Object]
次に覚えるCSSプロパティ ボックスの z 軸位置 z-index ボックスの x,y 軸位置 top, left ボックスの配置方法 position float 指定の無効化 clear ボックスの浮動制御 float ボックスの高さ height ボックスの幅 width 表示のされ方 display 説明 プロパティ名
display ,[object Object],[object Object],[object Object]
float, width, height, clear ,[object Object],[object Object],[object Object],[object Object]
floatとpositionの使い分け ,[object Object],[object Object],[object Object],[object Object],[object Object]
レイアウト例 ,[object Object],[object Object],[object Object],[object Object],タイトルカラム 本文カラム 付属情 報カラム フッターカラム
レイアウト例 ,[object Object],[object Object],[object Object],タイトルカラム 本文カラム 付属情 報カラム フッターカラム
セレクタについてもっと詳しく ,[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object],[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object],[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object],[object Object]
セレクタについてもっと詳しく ,[object Object],[object Object],[object Object]
CSSの「カスケーディング」 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSSの「カスケーディング」 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSSの「カスケーディング」 ,[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Semelhante a CSS勉強会

メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化するAtsushi Tadokoro
 
D3js入門 - Code for Kobe 可視化勉強会資料
D3js入門 - Code for Kobe 可視化勉強会資料D3js入門 - Code for Kobe 可視化勉強会資料
D3js入門 - Code for Kobe 可視化勉強会資料充彦 保田
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Ryuma Tsukano
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみようGIG inc.
 
Sass
SassSass
SassSu Ga
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3Nishida Kansuke
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメregret raym
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用するKazuya Hiruma
 
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介Shinyu Murakami
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かきNishida Kansuke
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
Movable Typeセミナー2011年6月27日@原宿
Movable Typeセミナー2011年6月27日@原宿Movable Typeセミナー2011年6月27日@原宿
Movable Typeセミナー2011年6月27日@原宿Kunihiko Miyanaga
 

Semelhante a CSS勉強会 (20)

メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
 
D3js入門 - Code for Kobe 可視化勉強会資料
D3js入門 - Code for Kobe 可視化勉強会資料D3js入門 - Code for Kobe 可視化勉強会資料
D3js入門 - Code for Kobe 可視化勉強会資料
 
CSS Preprocessor Hands-on
CSS Preprocessor Hands-onCSS Preprocessor Hands-on
CSS Preprocessor Hands-on
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみよう
 
Sass
SassSass
Sass
 
実践Sass 前編
実践Sass 前編実践Sass 前編
実践Sass 前編
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
 
Less - first step
Less - first stepLess - first step
Less - first step
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメ
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
HTML5
HTML5HTML5
HTML5
 
計算機理論入門09
計算機理論入門09計算機理論入門09
計算機理論入門09
 
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
 
Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
 
Movable Typeセミナー2011年6月27日@原宿
Movable Typeセミナー2011年6月27日@原宿Movable Typeセミナー2011年6月27日@原宿
Movable Typeセミナー2011年6月27日@原宿
 

CSS勉強会

  • 1. 最速 CSS 勉強会 Id:youzaka
  • 2.
  • 3.
  • 4. CSSって何? Cited from: ユニバーサル HTML/XHTML
  • 5.
  • 6.
  • 7.
  • 8. 最初に覚えるCSSプロパティ 線 border 要素内余白 padding 要素間余白 margin 行の高さ line-height 文字列の行揃え text-align フォントの太さ font-weight 背景の色 background-color 文字の色 color フォントサイズ font-size 説明 プロパティ名
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. 次に覚えるCSSプロパティ ボックスの z 軸位置 z-index ボックスの x,y 軸位置 top, left ボックスの配置方法 position float 指定の無効化 clear ボックスの浮動制御 float ボックスの高さ height ボックスの幅 width 表示のされ方 display 説明 プロパティ名
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.