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/