リセットCSS
リセットCSS
《サンプル》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リセットCSSを記述する前に</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } h1,p,li { color: #FFF; } h1 { background-color: #95CCE2; } p { background-color: #EFB15F; } li { background-color: #98DC77; } </style> </head> <body> <h1>ページのテーマ</h1> <p>ここに本文が入る</p> <ul> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> </ul> </body> </html>
《プレビュー》
- 各要素間が、指定していないにもかかわらず空いているのがわかります
- リストも2文字分インデントされています
これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです
《空きをなくす記述》
h1,p,ul { color: #FFF; margin: 0; padding: 0; }
この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。
《ブラウザとの空きもなくす記述》
body,h1,p,ul { color: #FFF; margin: 0; padding: 0; }
これからページを構築していく段階で、「初期値:0」であることにより、指定した値が反映されていることが確認しやすくなります。
リセット記述例
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; }
- リセットCSSは、Web歴史的な背景を背負っているため、仕事のなかでも「ベター」な選択があるだけで、絶対的なルールではありません
- 将来的には「Normalize.css」という選択肢もありますが、初学者の選択肢ではありません
- 授業内では、「リセットCSS」の根拠を理解する必要があるため、単純な記述から初めて徐々に複雑にしていきます
《過去のレイアウトのためのCSS》
@charset "UTF-8"; /* reset */ * { margin: 0; padding: 0; }
《過去のレイアウトのためのCSSを修正》
@charset "UTF-8"; /* reset */ ここに指定した要素名を記述 { margin: 0; padding: 0;
この記述の意味を理解するためには、
「margin」「padding」「background-color」
つまり、ボックスモデルの概念を理解することが必須です。