概要

normalize.cssとは、
どのWebブラウザでも同じ表示、
同じ動作を再現できるように
HTMLの要素の既定値を提供する
HTML5にも対応した
CSSファイルです。

このページは、CSSリセット「normalize.css」を用いてのHTMLの見た目を例示するページです。

ヘッダ, フッダなど制御用の箇所は、例外として別途のスタイルシートを特定の箇所をセレクタで限定する方法で記述しています。

古いブラウザでも確認程度は出来る事を目標としています。
文法としては HTML5 で記述しています。
あくまでnormalize.cssを用いた場合の見た目のサンプルであり、HTML の各要素の例示ではありません。

とは言っても、HTML の各要素を提示しないと効果が見えないので、それなりの要素の例示にはなるかと思います。

尚、CSS外部ファイルを取り換えればそれなりの描画になるような HTML の記述にしています。

html, body, main要素

  1. html {
  2. line-height: 1.15;
  3. -webkit-text-size-adjust: 100%;
  4. }

line-height: 1.15; は、すべてのブラウザで行の高さを修正します。line-height は継承ありなので、html(root)要素に記述すれば、以下で新たに記述されるまで継承されます

-webkit-text-size-adjust: 100%; は、iOSで向きを変更した後のフォントサイズの調整を防止します。ベンダープレフィックス付きなのは、text-size-adjust のプラウダ実装状況によります。


  1. body {
  2. margin: 0;
  3. }

margin: 0;は、すべてのブラウザでマージンを削除します。このリセットのページでは何か文字が端っこにあり読みづらいですが、その場合は個々の要素に margin, padding を設定するという考えです。その結果、hr 要素などが端まで表示されています。


  1. main {
  2. display: block;
  3. }

display: block;は、IEで一貫して main 要素をレンダリングします。HTML5 での新しい要素での対応状況によっての記述ですが、HTML5 での display: block; 相当の新しい要素は全て定義しても良いと思います。

h1, hr, pre, code, kbd, samp要素

h1例１

h1例２

h1例３

   整形済み

   改行してみた。
空白も複数で
code要素と kbd要素と samp要素の例
  1. <h1>h1例１</h1>
  2. <section>
  3. <h1>h1例２</h1>
  4. <section>
  5. <h1>h1例３</h1>
  6. </section>
  7. </section>
  8. <hr>
  9. <pre> 整形済み
  10. <br > 改行してみた。
  11. 空白も複数で</pre>
  12. <code>code要素</code>と
  13. <kbd>kbd要素</kbd>と
  14. <samp>samp要素</samp>の例
  1. h1 {
  2. font-size: 2em;
  3. margin: 0.67em 0;
  4. }

font-size: 2em;と margin: 0.67em 0;は、section 内の h1 要素のフォントサイズとマージンを修正し、Chrome、Firefox、Safariの `article`コンテキスト。コンテンツセクショニング要素により、その階層の深さによって h1 要素の font-size などが違うというブラウザの振る舞いをリセットする記述です。コンテンツセクショニング要素を使いＣＳＳリセットを使わず h1 等をサイズ指定しないで使って初めて気づくという処なので。

  1. hr {
  2. box-sizing: content-box;
  3. height: 0;
  4. overflow: visible;
  5. }

box-sizing: content-box;と height: 0;は、Firefoxで正しいボックスサイズを追加します。

overflow: visible;は、EdgeとIEでオーバーフローを表示します。

  1. code,
  2. kbd,
  3. samp,
  4. pre {
  5. font-family: monospace, monospace;
  6. font-size: 1em;
  7. }

font-family: monospace, monospace;は、すべてのブラウザでフォントサイズの継承とスケーリングを修正します。font-family: monospace;だと、サイズが小さくなってしまうので、その対応です。

font-size: 1em;は、すべてのブラウザで奇数の `em`フォントサイズを修正します。

a, abbr, b, strong, small, sub, sup, img要素

トップページへ sample
CSSは、 カスケーディング・スタイル・シートの略語で、…
b要素と strong要素の例 small要素の例 H2OとX2の例
  1. <a href="./index.htm">トップページへ</a>
  2. <a href="./index.htm"><img src="./hani_c0504.gif" alt="sample"></a><br>
  3. <abbr title="Cascading Style Sheets">CSS</abbr>は、
  4. カスケーディング・スタイル・シートの略語で、…<br>
  5. <b>b要素</b>と
  6. <strong>strong要素</strong>の例
  7. <small>small要素</small>の例
  8. H<sub>2</sub>OとX<sup>2</sup>の例
  1. a {
  2. background-color: transparent;
  3. }

background-color: transparent;は、IE 10でアクティブなリンクの灰色の背景を削除します。

  1. abbr[title] {
  2. border-bottom: none;
  3. text-decoration: underline;
  4. text-decoration: underline dotted;
  5. }

border-bottom: none;は、Chrome 57の下枠を削除します。

text-decoration: underline;と text-decoration: underline dotted;は、Chrome、Edge、IE、Opera、Safariに正しいテキスト装飾を追加します。

  1. b,
  2. strong {
  3. font-weight: bolder;
  4. }

font-weight: bolder;は、Chrome、Edge、Safariで正しいフォントの太さを追加します。

  1. small {
  2. font-size: 80%;
  3. }

font-size: 80%;は、すべてのブラウザで正しいフォントサイズを追加します。

  1. sub,
  2. sup {
  3. font-size: 75%;
  4. line-height: 0;
  5. position: relative;
  6. vertical-align: baseline;
  7. }
  8. sub {
  9. bottom: -0.25em;
  10. }
  11. sup {
  12. top: -0.5em;
  13. }

sub 要素と sup 要素が、すべてのブラウザーの行の高さに影響を与えないようにします。

  1. img {
  2. border-style: none;
  3. }

border-style: none;は、IE 10のリンク内の画像の境界線を削除します。

フォーム要素

legend の例






















70 %
  1. <form>
  2. <fieldset>
  3. <legend> legend の例</legend>
  4. <label for="iinInput">Sample input:</label><br>
  5. <input id="iinInput" size="12"><br><br>
  6. <label for="iinNumber">Sample input number:</label><br>
  7. <input id="iinNumber" type="number"><br><br>
  8. <label for="iinSearch">Sample input search:</label><br>
  9. <input id="iinSearch" type="search" size="12"><br><br>
  10. <button>ボタンの例</button><br><br>
  11. <input type="button" value="input button"><br><br>
  12. <input type="reset" value="input reset"><br><br>
  13. <input type="checkbox" id="iinCheckbox" name="ninCheckbox" checked>
  14. <label for="iinCheckbox">: Sample checkbox</label><br><br>
  15. <input type="radio" name="ninRadio" value="radio1" checked>
  16. <input type="radio" name="ninRadio" value="radio2">
  17. <input type="radio" name="ninRadio" value="radio3"><br><br>
  18. <select id="iseSelect">
  19. <optgroup label="optgroup例１">
  20. <option>option例1-1</option>
  21. <option>option例1-2</option>
  22. <option>option例1-3</option>
  23. </optgroup>
  24. <optgroup label="optgroup例２">
  25. <option>option例2-1</option>
  26. <option>option例2-2</option>
  27. <option>option例2-3</option>
  28. </optgroup>
  29. </select><br><br>
  30. <textarea id="iteTextarea" name="iteTextarea"
  31. rows="3" cols="15">
  32. textarea sample.
  33. </textarea><br><br>
  34. <progress value="70" max="100">70 %</progress>
  35. </fieldset>
  36. </form>
  1. button,
  2. input,
  3. optgroup,
  4. select,
  5. textarea {
  6. font-family: inherit;
  7. font-size: 100%;
  8. line-height: 1.15;
  9. margin: 0;
  10. }

すべてのブラウザでフォントスタイルを変更します。

margin: 0;は、FirefoxおよびSafariでマージンを削除します。

  1. button,
  2. input {
  3. overflow: visible;
  4. }

button, input{は、IEでオーバーフローを表示します。

input {は、Edgeでオーバーフローを表示します。

  1. button,
  2. select {
  3. text-transform: none;
  4. }

button, select{は、Edge、Firefox、IEのテキスト変換の継承を削除します。

select {は、Firefoxのテキスト変換の継承を削除します。

  1. button,
  2. [type="button"],
  3. [type="reset"],
  4. [type="submit"] {
  5. -webkit-appearance: button;
  6. }

-webkit-appearance: button;は、iOSおよびSafariでクリッカブルタイプをスタイルできない問題を修正しました。

  1. button::-moz-focus-inner,
  2. [type="button"]::-moz-focus-inner,
  3. [type="reset"]::-moz-focus-inner,
  4. [type="submit"]::-moz-focus-inner {
  5. border-style: none;
  6. padding: 0;
  7. }
  8. button:-moz-focusring,
  9. [type="button"]:-moz-focusring,
  10. [type="reset"]:-moz-focusring,
  11. [type="submit"]:-moz-focusring {
  12. outline: 1px dotted ButtonText;
  13. }

border-style: none;と padding: 0;は、Firefoxで内側のボーダーとパディングを削除します。

outline: 1px dotted ButtonText;は、前のルールで設定されていないフォーカススタイルを復元します。

  1. fieldset {
  2. padding: 0.35em 0.75em 0.625em;
  3. }

padding: 0.35em 0.75em 0.625em;は、Firefoxのパディングを修正します。

  1. legend {
  2. box-sizing: border-box;
  3. color: inherit;
  4. display: table;
  5. max-width: 100%;
  6. padding: 0;
  7. white-space: normal;
  8. }

color: inherit;は、IEの fieldset 要素からの色の継承を修正します。

padding: 0;は、パディングを削除して、開発者がすべてのブラウザーで fieldset 要素をゼロにしたときに引っ掛からないようにします。

上記以外は、EdgeおよびIEでのテキストの折り返しを修正します。

  1. progress {
  2. vertical-align: baseline;
  3. }

vertical-align: baseline;は、Chrome、Firefox、Operaで正しい垂直配置を追加します。

  1. textarea {
  2. overflow: auto;
  3. }

overflow: auto;は、IE 10以降のデフォルトの垂直スクロールバーを削除します。

  1. [type="checkbox"],
  2. [type="radio"] {
  3. box-sizing: border-box;
  4. padding: 0;
  5. }

box-sizing: border-box;は、IE 10で正しいボックスサイズを追加します。

padding: 0;は、IE 10のパディングを削除します。

  1. [type="number"]::-webkit-inner-spin-button,
  2. [type="number"]::-webkit-outer-spin-button {
  3. height: auto;
  4. }

height: auto;は、Chromeの増分ボタンと減分ボタンのカーソルスタイルを修正しました。

  1. [type="search"] {
  2. -webkit-appearance: textfield;
  3. outline-offset: -2px;
  4. }

-webkit-appearance: textfield;は、ChromeとSafariの奇妙な外観を修正しました。

outline-offset: -2px;は、Safariのアウトラインスタイルを修正します。

  1. [type="search"]::-webkit-search-decoration {
  2. -webkit-appearance: none;
  3. }

-webkit-appearance: none;は、macOSでChromeとSafariの内側のパディングを削除します。

  1. ::-webkit-file-upload-button {
  2. -webkit-appearance: button;
  3. font: inherit;
  4. }

-webkit-appearance: button;は、iOSおよびSafariでクリッカブルタイプをスタイルできない問題を修正しました。

font: inherit;は、Safariでフォントのプロパティを「継承」に変更します。

インタラクティブ要素

Details インタラクティブ要素のサンプル
  1. <details>
  2. <summary>Details</summary>
  3. インタラクティブ要素のサンプル
  4. </details>
  1. details {
  2. display: block;
  3. }

display: block;は、Edge、IE 10以降、Firefoxで正しいディスプレイを追加します。

  1. summary {
  2. display: list-item;
  3. }

display: list-item;は、すべてのブラウザで正しい表示を追加します。

その他

ここにtemplate要素とhidden属性の例があります。
(display: none;なので見えませんが。)

  1. <template>templateの例</template>
  2. <div hidden>hidden属性の例</div>
  1. template {
  2. display: none;
  3. }

display: none;は、IE 10以降で正しいディスプレイを追加する

  1. [hidden] {
  2. display: none;
  3. }

display: none;は、IE 10以降で正しいディスプレイを追加する