about かみのごうやたいち大阪府出身東京都在中 28歳うお座 O型ゾウと写真が好き 2xup.org を管理

Size: px

Start display at page:

Download "about かみのごうやたいち大阪府出身東京都在中 28歳うお座 O型ゾウと写真が好き 2xup.org を管理"

ゆきこけい
7 years ago
Views:

1 CSS Taichi Kaminogoya T13:30:00+09:00

2 about かみのごうやたいち大阪府出身東京都在中 28歳うお座 O型ゾウと写真が好き 2xup.org を管理

3 CSS

photo by timlovesbrian. http://www.flickr.

5 photo by timlovesbrian.

6 DOM

7 html DOM head body title div.section h1 div.section h2 div.section div.section h3 p h3 p strong a

8 <p> <span> </span> </p> p { color: yellow; }

9 <p> <span> </span> </p> p { color: yellow; } p span { color: green; }

13 CSS

14 重要度高制作者スタイルシート Web制作者ユーザースタイルシートユーザーデフォルトスタイルシートウェブブラウザ低

15 重要度! important 高ユーザースタイルシート! imporatnt 制作者スタイルシート! important 制作者スタイルシート Web制作者ユーザースタイルシートユーザーデフォルトスタイルシートウェブブラウザ低

16 特定度かみのごうやたいち特定度が高い大阪府出身東京都在中 28歳うお座 O型ゾウと写真が好き 2xup.org を管理 photo by taro-san

17 <p class= hoge id= fuga > </p> p { color: orange; }

18 <p class= hoge id= fuga > </p> p { color: orange; } p#fuga { color: green; }

19 <p class= hoge id= fuga > </p> p { color: orange; } p#fuga { color: green; } p.hoge { color: red; } p[id=hoge] { color: blue; }

20 <p class= hoge id= fuga > </p> p { color: orange; } p#fuga { color: green; } p.hoge { color: red; } p[id=hoge] { color: blue; } }

21 特定度得点合計点セレクタ全称 * p.fuga #hoge :after :hover [id=hoge] 要素 class id 疑似要素疑似クラス属性

22 <p class= hoge id= fuga > </p> p { color: orange; } 101 p#fuga { color: green; } 11 p.hoge { color: red; } 11 p[id=hoge] { color: blue; }

23 CSS

25 photo by Elsie esq.

26 width, height margin padding border

27 height width

30 background

31 background background

32 background IE ボーダー辺背景 background

33 height width

35 B A B A

36 <div id="container"> <div id="content"> </div> <div id="navigation"> </div> </div>

37 div#container { width: 300px; height: 300px; padding top: 100px; background color: #ccc; } div#content { height: 200px; background color: #ddd; } div#navigation { height: 50px; width: 100px; background color: black; }

38 position: absolute; top: 0; right: 0;

39 CSS, float, position: relative;, position: static; body, html, position: fixed; position: absolute; %, em

40 position: absolute; position static (body

42 CSS, float, position: relative;, position: static; body, html, position: fixed; position: absolute; %, em

43 div#container { position: relative; width: 300px; height: 300px; padding top: 100px; background color: #ccc; } div#content { height: 200px; background color: #ddd; } div#navigation { position: absolute; top: 0; right: 0; height: 50px; width: 100px; background color: black; }

44 & =

45 CSS

46 CSS Hack

47 Hack Validator HTML

48 CSS

49 HTML

50 HTML!

51 Hack Validator HTML

52 Hack Valid

54 Hack IE DOCTYPE IE float 88 Mac IE pre overflow

55 DOCTYPE 190

58 padding HTML 74 DOCTYPE

59 div { padding: 13px; }

62 p { margin: 1em 13px; }

63 考え方を変える <div> <h1> <p> h1, p { margin: 1em 13px; }

64 padding HTML 74 DOCTYPE

65 div class= section <div class= section > <h1>heading 1</h1> <p>description</p> <div class= section > <h2>heading 2</h2> <p>description</p> </div> </div>

66 div.section XHTML 2.0 section, hn class class id

67 <div class= section > <h2>heading 2</h2> <p>description</p> </div>

68 考え方を変える <div class= section > <h2> <p> h2, p { margin: 1em 13px; }

69 ボックスモデル問題の解決シンプルな構造ほとんどのブロック要素に common.css などで定義しておく common.css を見せる公開するものにも適用しています必要に応じて上書きボックスモデルに関する CSS ハックはこれで軽減できそうさまざまなレイアウトサンプルは書籍 79 ページから

70 ちょっと休憩

71 休憩おわり

72 CSS

73 CSS 96

80 id class

81 CSS

82 common.css :

83 layout.css common.css

84 theme.css

85 component.css clearfix inline

86 clearfix float <div class= clear ></div> <br clear= both />

87 float するオブジェクトの包含ブロックは縮む解決その１後に要素がある div.footer { clear: both; } div.content { width: 100px; float: left; } div.menu { width: 100px; float: right; } div.section div.content div.menu div.footer

88 float するオブジェクトの包含ブロックは縮む解決その2 後に要素がない div.section { overflow: auto; } div.content { width: 100px; float: left; } div.menu { width: 100px; float: right; } IEは効果無し div.section div.content div.menu

89 float するオブジェクトの包含ブロックは縮む解決その3 後に要素がない div.section:after { content: '.'; visibility: hidden; clear: both; display: block; height: 0; } IEは非対応 div.section div.content div.menu div.section {... } div.content {... } div.section:after

90 float するオブジェクトの包含ブロックは縮む解決その3 後に要素がない解決案 div.section:after { content: '.'; visibility: hidden; clear: both; display: block; height: 0; } div.section { zoom: 1; } div.content {... } IE以外 div.section div.content div.menu IE独自実装 div.section:after

91 clearfix float overflow: auto; float clear: left;, clear: right;, clear: both; <div class= clear ></div> <br clear= both />

92 clearfix float <div class= clear ></div> <br clear= both />

93 outline.css CSS

94 CSS

95 CSS 102 CSS background-color: black;

100 あんたー部屋散らかってたから片付けといたでー

101

102 そんなもんしらんわマンガは片付けてないし足の踏み場もなかったわ

103

104

105

106

107

108 2

109 2

110 あそれやったら本棚のマンガ日本の歴史の裏に並べたわ

111

112 せやかてどこに直すか知らんねんもんあたしなんしか

113

114

115

116 { 2 : : ; }

117 selector, selector { property: value; } selector { property: value; }

118

119 margin, padding, background

120 0 line-height 117 URI

121

122 photo by jkaneko-san

123

124 = Wiki CSS URL

125

126 elephantism

127 ご質問もどうゾウ

128 photo by Orin Optiglot.

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうやたいち大阪府出身東京都在中 28歳うお座 O型ゾウと写真が好き 2xup.org を管理