INDEX
目次
前の章に戻る演習の準備
- 「start」フォルダ内のreset_css-lesson.htmlをエディターで開きます。
- ブラウザでプレビューします。
<body>
<h1>リセットCSSを学ぼう</h1>
<h2>リセットCSSとは</h2>
<p>
リセットCSSとは、Webページのデザインの一貫性を保つために必須のCSSです。<br>
リセットCSSの主な役割は以下の通りです。
</p>
<h3>リセットCSSの主な役割</h3>
<ol>
<li>ブラウザごとのスタイルの違いをなくす</li>
<li>不必要な余白（margin,padding）を取り除く</li>
<li>ボックスモデルのブラウザ解釈を統一する</li>
</ol>
<h3>公開されているブラウザの初期CSS</h3>
<ul>
<li>
<a href="https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html#h201"
target="_blank">Chrome</a>
</li>
<li>
<a href="https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html#h202"
target="_blank">Safari</a>
</li>
<li>
<a href="https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html#h203"
target="_blank">Firefox</a>
</li>
</ul>
</body>HTML/CSS入門編 サンプルコード9-1
■ ブラウザプレビュー
【9-1】リセットCSSとは
-
CSSでスタイリングされていない、HTMLタグによるマークアップのみの状態でHTMLファイルのブラウザプレビューを行うと、見出しは見出しらしく太字に、箇条書きリストは箇条書きリストらしく黒丸のマーカーが表示されます。
- また、見出しや段落テキストなどのHTMLのあらゆる要素の周囲には、初期状態である程度の余白がついています。
- そのほか、リンクテキストにはそれとわかるように下線がつきます。
- これは、各ブラウザに内蔵されている 初期CSS が適用された状態となっているからです。
- この 初期CSS は 「デフォルトスタイル」 とも呼ばれますが、正式には 「User Agent Stylesheet（ユーザーエージェントスタイルシート）」 といい、 ブラウザの種類ごとに微妙に異なる設定 がなされています。
- ブラウザに デフォルトスタイル が内蔵されているのは、以下の理由によります。
なぜ、デフォルトスタイルが必要なの？
HTMLマークアップのみでCSSによるスタイリングが設定されていないページでも、最低限の視認性を保ち、人間にとって読みやすい状態にしておくため。
■ オープンソースで公開されているユーザーエージェントスタイルシート
■ 例. Google Chromeのbodyとh1のデフォルトスタイル
body {
display: block;
margin: 8px;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
font-weight: bold;
}HTML/CSS入門編 サンプルコード9-2
■ ブラウザプレビュー（Google Chromeのbodyとh1のデフォルトスタイル）
デフォルトスタイルによるブラウザ表示の違い
- 以下は、同じHTMLファイルを異なるブラウザで表示したときの見た目です。
- 各ブラウザによって極端な差はありませんが、h1〜h6のmarginの初期値やフォームのスタイリング、font-familyの初期値、スクロールバーのデザインなどが異なります。
■ Google Chrome（Mac版）
■ Safari（Mac版）
■ Firefox（Mac版）
-
上記
HTML/CSS入門編 サンプルコード9-2
を見るとわかるとおり、Chromeでは
body要素にあらかじめ
上下左右8pxのマージン
が設定されています。
- また、h1要素には、 2em = 32pxの 文字サイズで 太字の設定、上下に 0.67em = 21.44pxの マージン が設定されています。
-
各要素にこのような
デフォルトスタイル
を適用することにより、最低限の視認性を確保していることは前述したとおりですが、この
デフォルトスタイルで設定されているmargin, paddingや、ボックスモデルの解釈
などが原因で、制作者が意図したレイアウトでページを作成できないことがあります。
- デザインカンプを元にしたデザインの再現性が重視されるCSSコーディングを行う際には、 デフォルトスタイルが原因でレイアウトが崩れることがあるため CSSによる対処が必ず必要となります。
-
Web制作の現場では、制作者にとって都合の良い状態にブラウザの
デフォルトスタイルをリセット（再設定）する
ということが常識となっています。
- そのためのCSSのコードを、 リセットCSS と呼びます。
よく使われるリセットCSS
- リセットCSSのコードをあらかじめHTMLファイルと関連付けておき、ブラウザのデフォルトスタイルをリセット（再設定）しておくこと は、 制作者の意図どおりにWebページをスタイリングするための最初の下準備 となります。
- リセットCSS は、現在多様なコードが流通しており、 用途に応じて適切なコードを選択する ことが求められます。
- 本章では、主にデザインカンプの再現性を重視した Webデザイナー向けのおすすめリセットCSS を紹介します。
■ よく使われるリセットCSS一覧
| リセットCSSの種類 | 特徴 | 対象 | 公式サイト |
|---|---|---|---|
| 必要最低限のミニマム&シンプルリセット |
余計なスタイルを削除しつつ、box-sizing: border-box;を適用した軽量リセット。
|
Webデザイナー（初心者）向け 理由：最新のブラウザ環境に対応しており、かつ軽量。 |
なし |
| Eric Meyer’s Reset CSS | ブラウザ間のデフォルトスタイルの不一致を解消するため、すべての要素の余白をリセットする。 |
Webデザイナー（中級者）向け 理由：最新のブラウザ環境に完全に対応していないため、追加の設定が必要。 |
https://meyerweb.com/eric/tools/css/reset/ |
| HTML5 Doctor’s Reset CSS | Eric Meyer’s Reset CSSを基に、HTML5要素にも対応するよう改良されたリセットCSS。 |
Webデザイナー（中級者）向け 理由：最新のブラウザ環境に完全に対応していないため、追加の設定が必要。 |
https://html5doctor.com/html-5-reset-stylesheet/ |
| Modern CSS Reset |
現代のウェブ開発に合わせて作成されたリセットCSS。すべての要素と疑似要素に対してbox-sizing: border-box;を適用し、リストやフォーム要素にも配慮されている。
|
Webデザイナー（初心者）向け 理由：不要な要素のリセットやボックスモデルの統一など、現代のWebデザインにおける基本的な設定をカバーしている。 |
https://github.com/Andy-set-studio/modern-css-reset |
| destyle.css | ブラウザのデフォルトスタイルをほぼ完全に無効化し、すべての余白、文字サイズ、行間をリセットする。まっさらな状態からデザインを始めたい場合に適している。 |
Webデザイナー（中級者〜上級者）向け 理由：完全にデフォルトスタイルをリセットするため、あらゆる要素に手動のスタイリングを行う必要がある。中級者以上の開発者にとっては非常に有用。 |
https://nicolas-cusan.github.io/destyle.css/ |
| Normalize.css | ブラウザ間のスタイルの一貫性を保つために、デフォルトスタイルをリセットするのではなく、調整・標準化する。ユーザーエージェントスタイルシートの有用なデフォルトを保持しつつ、必要な部分だけを最適化。 |
Webデザイナー（初心者〜上級者）向け 初心者にも扱いやすいが、完全なリセットではなく、スタイルの調整が最小限に留まるため、デザインカンプの微細な再現性が求められるWeb制作においては、destyle.cssの方が適している場合がある。 |
https://necolas.github.io/normalize.css/ |
【9-2】リセットCSSを適用しよう
- それでは、reset_css-lesson.htmlに上記の各リセットCSSを適用して表示の違いを比べてみましょう。
-
以下の手順に従い作業してください。
- 今回は、必要最低限のミニマム&シンプルリセット、 Modern CSS Reset、 destyle.css、 Normalize.css の代表的な4種類のリセットCSSを比較してみましょう。
リセットCSSの適用手順
- 新規ファイルを作成する。
- reset.cssというファイル名でcssフォルダ内に保存する。
- 使用するリセットCSSのコードをコピー&ペーストする。
- linkタグでreset.cssをHTMLファイルと関連付ける。
linkタグ記述時の注意点
- 同じセレクタが重複して書かれていた場合、後からブラウザに読み込まれたコードが前のコードを上書きします。
- したがって、reset.cssは style.cssなどの他のcssのコードよりも先に読み込ませておく必要があります。
- linkタグで関連付ける際には、reset.cssを一番上で読み込ませるようにしましょう。
■ ブラウザプレビュー（リセット前）
必要最低限のミニマム&シンプルリセットを使ってみよう
■ reset.css（ミニマム&シンプルリセット）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, textarea, select {
font: inherit;
}HTML/CSS入門編 サンプルコード9-3
必要最低限のミニマム&シンプルリセットの解説
- *（ユニバーサルセレクタ）を使い、全ての要素の余白（marginとpadding）を0に設定する。
- box-sizing: border-box;で、すべての要素の幅(width)や高さ(height)にパディングやボーダーを含める設定をします。
- ol、ulのようなリストの連番や黒丸のマーカーをlist-style: none;で消去することにより、リストをカスタマイズしやすくします。
- img要素に対しては、max-width: 100%;でレスポンシブデザインに適応し、画面サイズに合わせて画像が自動的に縮小する設定、height: auto;で縦横比を保つ設定、display: block;で画像の周囲に余計な隙間を作らない設定をします。
- button, input, textarea, select { font: inherit; }でフォーム要素に親要素から一貫したフォントスタイルを継承する設定をします。
■ ブラウザプレビュー（ミニマム&シンプルリセット適用後）
Modern CSS Resetを使ってみよう
■ reset.css（Modern CSS Reset）
URL：https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
CSSファイルの中身をコピー&ペーストしましょう。
CSSファイルの中身をコピー&ペーストしましょう。
Modern CSS Resetの解説
- Modern CSS Resetは、過剰なスタイルのリセットを避け、必要最低限のスタイルを整えることを目指しています。
bodyやh1、pなどの基本的なテキスト要素、画像、フォーム要素（ボタン、入力、テキストエリア、セレクトボックス）などにスタイルを適用して、ブラウザ間の一貫性を確保しています。-
アクセシビリティや利便性を向上させるデフォルトスタイルはリセットしません。
- そのため一部の余白がリセットされていないので、コーディング時の調整が必要になる場合があります。
■ ブラウザプレビュー（Modern CSS Reset適用後）
destyle.cssを使ってみよう
■ reset.css（destyle.css）
URL：https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css
CSSファイルの中身をコピー&ペーストしましょう。
CSSファイルの中身をコピー&ペーストしましょう。
destyle.cssの解説
- destyle.cssは、HTML要素のデフォルトスタイルをほぼ完全に取り除くリセットCSSです。
- 開発者が自分の好みでスタイルを再定義しやすくなります。
-
スタイリングを「ゼロ」から作り上げることができ、デザインに集中しやすい。
- その反面、CSSの知識が豊富な制作者でないと、使いこなすことが難しい場合があります。
■ ブラウザプレビュー（destyle.css適用後）
Normalize.cssを使ってみよう
■ reset.css（Normalize.css）
URL：https://github.com/necolas/normalize.css/blob/master/normalize.css
CSSファイルの中身をコピー&ペーストしましょう。
CSSファイルの中身をコピー&ペーストしましょう。
Normalize.cssの解説
- Normalize.css は、ブラウザごとのデフォルトスタイルの違いを統一するためのCSS です。
-
destyle.css のように完全にリセットするのではなく、ブラウザが適切なデフォルトスタイルを持つように調整します。
- そのため一部の余白がリセットされていないので、コーディング時の調整が必要になる場合があります。
- 最新のCSS仕様やブラウザの挙動を考慮して常にアップデートされます。
■ ブラウザプレビュー（Normalize.css適用後）
まとめ
- 以上が代表的な4種類のリセットCSSの比較です。
- デザインカンプの見た目を忠実に細部まで再現するという目的でコーディングを行う場合は、 ミニマム&シンプルリセット または destyle.css が適しています。
- ブラウザごとの表示の一貫性を保持することと、HTMLのみのブラウザ表示の視認性を重視するのであれば、 Modern CSS Reset や Normalize.css が適しています。
- 本教材では、今後は初心者にも扱いやすい ミニマム&シンプルリセット を使用していきます。
- リセットCSSの関連付けはCSSコーディングの一番最初の下準備として行い、その後スタイリングに取り掛かります。
- リセットCSS とは、 効率よく正確にコーディングを行うための地ならしの役割を持つCSSのコード であると理解してください。
- リセットCSSのコードの選定と関連付けは、CSSコーディングの工程において大変重要な作業です。 忘れることのないようにしましょう。
これで「HTML/CSS入門編 9章 リセットCSSを学ぼう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。