View
6.775
Download
2
Category
Preview:
Citation preview
UAスタイルシートと リセットCSS
Tomoki Kubo株式会社まぼろし
マークアップエンジニア
ブログ: KOJIKA17
Adobe Creative Stationにて、Emmetの連載中
もくじ
• UAスタイルシート- UAスタイルシートの基本 - モダンブラウザのUAスタイルシート
• リセットCSS
- 全称セレクタ- Reset CSS- Normalize.css- リセットCSS と Normalize.css
• まとめ
UAスタイルシート
Webサイトの表示に関わるスタイルシート
1. User Agent Style Sheets
2. Cascading Style Sheets
(User Style Sheets)
HTMLの見た目は、 UAスタイルシートが 決めているにすぎない
HTML = 意味付け スタイルシート = 見た目
HTMLとスタイルシートは 分離して考えましょう
head, title, meta, style, script要素も
意味付け
HTML（body要素は空）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style contenteditable="true"> * { display: block; } title { margin: 1em; color: #f00; } style { white-space: pre; } </style> </head> <body></body> </html>
ブラウザの表示
UAスタイルシートの見本Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.html
基本的に 上下のmargin指定が
ついている
モダンブラウザの UAスタイルシート
HTML5の新要素の UAスタイルシートは?
2009年頃
• Internet Explorer 8, Firefox 2HTML5の新要素のDOMをうまく作れなかった
• Firefox 3.x, Safari, Google Chrome UAスタイルシートに新要素の記述がまだない
現在もちろん、ばらつきがある
html5jグループにて 「IE11 でmain 要素のwidth,height 指定が 無視されるのはなぜでしょうか？」
display: block;以外も 追加されている要素がある
margin-before?after?
論理方向プロパティ
• margin-start / margin-end
• margin-before / margin-after
• padding-start /padding-end
• padding-before /padding-after
論理方向プロパティ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
before
after
start end
writing-mode: lr-tb;
beforeafter
start
end
論理方向プロパティwriting-mode: tb-rl;
モダンブラウザ h1要素の見た目
HTML
<h1>Lv 1</h1>
<section> <h1>Lv 2</h1>
<section> <h1>Lv 3</h1> </section>
</section>
ブラウザの表示
h1要素の見た目は セクショニング・コンテンツの
深度によって変わる
WebKit html.csshttp://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
アウトライン・アルゴリズムは 視覚的にわかりやすくなっているだけ
HTMLとスタイルシートを混同しない
リセットCSS各ブラウザの差異を埋める手法
リセットCSSの目的
ブラウザ間の表示を統一させる
全称セレクタ
* { margin: 0; padding: 0; border: none; font-size: 100%; }
すべての要素の値をまとめて指定できる 意図しない要素までリセットする可能性がある
Reset CSS
• Eric Meyer’s "Reset CSS" 2.0
• Yahoo! (YUI 3) Reset CSS
• HTML5 Doctor CSS Reset
Normalize.css
• UAスタイルシートを生かすことを目的としたCSS
• ブラウザのスタイルシートの差異を修正
• コード内のコメントに、詳細な説明が入っている
Firefox 40が2015年8月11日にリリース• <abbr>、<acronym> 要素に text-decoration プロパティが使われるようになった
• 具体的に、border-block-end: dotted 1px が text-decoration: dotted underline に置き換えられた
• Google Chrome は border-bottom を使用している
• Normalize.css が、修正対象になっている
Rest CSSや Normalize.cssも
たまには見直しが必要
Rest CSSと Normalize.cssの折衷
sanitize.cssやReboot
Rest CSS と Normalize.css
好きな方を使えば、 いいと思う
もし使い分けるなら
UAスタイルシートを生かしたまま、 要素をひとつのモジュールとして
機能させられるサイト
プロパティを初期化した方が 構築しやすいなら
Rest CSS
まとめ
• UAスタイルシートは、HTMLの変化が出やすい
• Rest CSSやNormalize.cssを重複して読んでいなければ、なんでもいいと思う
ありがとうございました。
Recommended