UAスタイルシートと リセットCSS
-
Upload
- -
Category
Technology
-
view
6.775 -
download
2
Transcript of UAスタイルシートと リセットCSS
![Page 1: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/1.jpg)
UAスタイルシートと リセットCSS
![Page 2: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/2.jpg)
Tomoki Kubo株式会社まぼろし
マークアップエンジニア
ブログ: KOJIKA17
Adobe Creative Stationにて、Emmetの連載中
![Page 3: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/3.jpg)
もくじ
• UAスタイルシート- UAスタイルシートの基本 - モダンブラウザのUAスタイルシート
• リセットCSS
- 全称セレクタ- Reset CSS- Normalize.css- リセットCSS と Normalize.css
• まとめ
![Page 4: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/4.jpg)
UAスタイルシート
![Page 5: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/5.jpg)
Webサイトの表示に関わるスタイルシート
1. User Agent Style Sheets
2. Cascading Style Sheets
(User Style Sheets)
![Page 6: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/6.jpg)
![Page 7: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/7.jpg)
![Page 8: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/8.jpg)
HTMLの見た目は、 UAスタイルシートが 決めているにすぎない
![Page 9: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/9.jpg)
HTML = 意味付け スタイルシート = 見た目
![Page 10: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/10.jpg)
HTMLとスタイルシートは 分離して考えましょう
![Page 11: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/11.jpg)
head, title, meta, style, script要素も
意味付け
![Page 12: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/12.jpg)
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>
![Page 13: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/13.jpg)
ブラウザの表示
![Page 14: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/14.jpg)
UAスタイルシートの見本Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.html
![Page 15: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/15.jpg)
![Page 16: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/16.jpg)
基本的に 上下のmargin指定が
ついている
![Page 17: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/17.jpg)
![Page 18: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/18.jpg)
モダンブラウザの UAスタイルシート
![Page 19: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/19.jpg)
HTML5の新要素の UAスタイルシートは?
![Page 20: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/20.jpg)
2009年頃
• Internet Explorer 8, Firefox 2HTML5の新要素のDOMをうまく作れなかった
• Firefox 3.x, Safari, Google Chrome UAスタイルシートに新要素の記述がまだない
![Page 21: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/21.jpg)
現在もちろん、ばらつきがある
![Page 22: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/22.jpg)
![Page 23: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/23.jpg)
html5jグループにて 「IE11 でmain 要素のwidth,height 指定が 無視されるのはなぜでしょうか?」
![Page 24: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/24.jpg)
display: block;以外も 追加されている要素がある
![Page 25: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/25.jpg)
![Page 26: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/26.jpg)
margin-before?after?
![Page 27: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/27.jpg)
![Page 28: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/28.jpg)
論理方向プロパティ
• margin-start / margin-end
• margin-before / margin-after
• padding-start /padding-end
• padding-before /padding-after
![Page 29: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/29.jpg)
論理方向プロパティ
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;
![Page 30: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/30.jpg)
beforeafter
start
end
論理方向プロパティwriting-mode: tb-rl;
![Page 31: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/31.jpg)
モダンブラウザ h1要素の見た目
![Page 32: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/32.jpg)
HTML
<h1>Lv 1</h1>
<section> <h1>Lv 2</h1>
<section> <h1>Lv 3</h1> </section>
</section>
![Page 33: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/33.jpg)
ブラウザの表示
![Page 34: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/34.jpg)
h1要素の見た目は セクショニング・コンテンツの
深度によって変わる
![Page 36: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/36.jpg)
![Page 37: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/37.jpg)
WebKit html.csshttp://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
![Page 38: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/38.jpg)
![Page 39: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/39.jpg)
アウトライン・アルゴリズムは 視覚的にわかりやすくなっているだけ
HTMLとスタイルシートを混同しない
![Page 40: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/40.jpg)
リセットCSS各ブラウザの差異を埋める手法
![Page 41: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/41.jpg)
リセットCSSの目的
ブラウザ間の表示を統一させる
![Page 42: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/42.jpg)
全称セレクタ
* { margin: 0; padding: 0; border: none; font-size: 100%; }
すべての要素の値をまとめて指定できる 意図しない要素までリセットする可能性がある
![Page 43: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/43.jpg)
Reset CSS
• Eric Meyer’s "Reset CSS" 2.0
• Yahoo! (YUI 3) Reset CSS
• HTML5 Doctor CSS Reset
![Page 44: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/44.jpg)
![Page 45: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/45.jpg)
Normalize.css
• UAスタイルシートを生かすことを目的としたCSS
• ブラウザのスタイルシートの差異を修正
• コード内のコメントに、詳細な説明が入っている
![Page 46: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/46.jpg)
![Page 47: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/47.jpg)
![Page 48: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/48.jpg)
![Page 49: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/49.jpg)
Firefox 40が2015年8月11日にリリース• <abbr>、<acronym> 要素に text-decoration プロパティが使われるようになった
• 具体的に、border-block-end: dotted 1px が text-decoration: dotted underline に置き換えられた
• Google Chrome は border-bottom を使用している
• Normalize.css が、修正対象になっている
![Page 50: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/50.jpg)
Rest CSSや Normalize.cssも
たまには見直しが必要
![Page 51: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/51.jpg)
Rest CSSと Normalize.cssの折衷
sanitize.cssやReboot
![Page 52: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/52.jpg)
Rest CSS と Normalize.css
![Page 53: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/53.jpg)
好きな方を使えば、 いいと思う
![Page 54: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/54.jpg)
もし使い分けるなら
![Page 56: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/56.jpg)
![Page 57: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/57.jpg)
UAスタイルシートを生かしたまま、 要素をひとつのモジュールとして
機能させられるサイト
![Page 59: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/59.jpg)
![Page 60: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/60.jpg)
プロパティを初期化した方が 構築しやすいなら
Rest CSS
![Page 61: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/61.jpg)
まとめ
• UAスタイルシートは、HTMLの変化が出やすい
• Rest CSSやNormalize.cssを重複して読んでいなければ、なんでもいいと思う
![Page 62: UAスタイルシートと リセットCSS](https://reader034.fdocument.pub/reader034/viewer/2022042611/5887c79e1a28abeb738b56b9/html5/thumbnails/62.jpg)
ありがとうございました。