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

CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00

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

CSS

photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

DOM

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

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

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

3 1 2 3 CSS

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

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

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

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

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

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

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

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

<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; }

3 1 2 3 CSS

photo by Elsie esq. http://flickr.com/photos/elsie/5136801/ http://creativecommons.org/licenses/by/3.0/

width, height margin padding border

height width

background

background background

background IE ボーダー辺 背景 background

height width

B A B A

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

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; }

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

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

position: absolute; position static (body

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

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; }

& =

CSS

CSS Hack

Hack Validator HTML

CSS

HTML

HTML!

Hack Validator HTML

Hack Valid http://xrl.us/uzad

Hack IE DOCTYPE IE float 88 Mac IE pre overflow

DOCTYPE 190

padding HTML 74 DOCTYPE

div { padding: 13px; }

p { margin: 1em 13px; }

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

padding HTML 74 DOCTYPE

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>

div.section XHTML 2.0 section, hn class class id

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

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

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

ちょっと休憩

休憩おわり

CSS

CSS 96

id class

CSS

common.css :

layout.css common.css

theme.css

component.css clearfix inline

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

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

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

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

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

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

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

outline.css CSS

CSS

CSS 102 CSS background-color: black;

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

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

2

2

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

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

{ 2 : : ; }

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

margin, padding, background

0 line-height 117 URI

photo by jkaneko-san

= Wiki CSS URL

http://xrl.us/vfsm elephantism

ご質問もどうゾウ

photo by Orin Optiglot. http://flickr.com/photos/orinrobertjohn/239595034/ http://creativecommons.org/licenses/by/3.0/