リセットスタイルnormalize.cssチュートリアル

クズども · 掲載地 2018/07/27 14:49:36

Normalize.cssはCSSリセットの代替手段です。デフォルトのHTML要素スタイルでブラウザ間で高い一貫性を提供します。 Normalize.cssはHTML5の現代的でプレミアムな代替手段です(http://necolas.github.io/normalize.css/）

normalize.cssもreset.cssもブラウザタブのリセット用スタイルシートです

normalize.css作成の目的は以下の通りです。

便利なブラウザのデフォルトスタイルを完全に削除するのではなく、保護しましょう

一般化スタイル:ほとんどのHTML要素に提供されています

ブラウザ自身のバグを修正し、ブラウザ間の一貫性を確保しましょう

CSSの使いやすさを最適化する:いくつかのヒントを活用しましょう

コードの説明:コメントと詳細なドキュメントを使いましょう

Normalize.cssモバイルブラウザを含む幅広いブラウザをサポートし、HTML5要素、タイポグラフィ、リスト、埋め込みコンテンツ、フォーム、表を一般化しています。このプロジェクトは一般化に基づいていますが、適切な場合により実用的なデフォルトも用いています。

正規化とリセットの違い

1. Normalize.css 価値のあるデフォルトを保護する

   リセットはほぼすべての要素にデフォルトのスタイルを課すことで、同じ視覚効果を強制します。対照的に、Normalize.cssは多くのデフォルトのブラウザスタイルを維持しています。これにより、一般的なタイポグラフィ要素をすべてリスタイルする必要がなくなります。異なるブラウザで異なるデフォルトを持つ要素の場合、Normalize.cssこれらのスタイルを一貫性のある、かつ現代の標準にできるだけ整合させるよう努めます。

2. Normalize.css ブラウザのバグを修正しました

   デスクトップやモバイルブラウザでよくあるバグを修正します。これはしばしばResetではできていないことです。この点で、修正Normalize.css問題としては、HTML5要素の表示設定、プリフォーマットされたテキストのフォントサイズ問題、IE9のSVGオーバーフロー、そして様々なブラウザやオペレーティングシステムで発生するフォーム関連の多くのバグが含まれます。

3. Normalize.css デバッグツールが散らかることはありません

   Resetを使う上で最も厄介な点の一つは、下の画像に示されているように、ブラウザのデバッグツールにおける大規模な継承チェーンです。 Normalize.cssでは、ガイドラインでマルチセレクターの使用に非常に慎重であり、ターゲット要素のみを意図的にスタイリングするため、そのような問題はありません。

4. Normalize.cssはモジュール的である

      プロジェクトは関連しているが別々の部分に分割されており、どの要素が特定の値に設定されているかがわかりやすくなっています。これにより、使わない部分(例えば形の一般化)を選択的に除外できます。

5. Normalize.css 詳細な文書が存在します

      Normalize.cssコードは詳細かつ包括的なクロスブラウザの調査とテストに基づいています。このファイルには詳細なコード説明とGithub Wikiのさらなる指示があります。つまり、各コード行が正確に何をしているのか、なぜそれを書いたのか、ブラウザ間の違いを把握でき、自分のコードをより簡単にテストできるということです。

normalize.cssの使い方

まず、GithubからNormalize.cssをインストールするかダウンロードし、それを使う方法は主に2つあります。

戦略1:normalize.cssを自分のプロジェクトの基盤CSSとして使い、デザイナーのニーズに合わせてスタイル値をカスタマイズする。

戦略2:ソースコードをインポートしてその上normalize.css構築し、必要に応じて自分のCSSでデフォルトを上書きします。

CSSファイルのダウンロード:https://necolas.github.io/normalize.css/8.0.0/normalize.css

[その他] リセットスタイルnormalize.cssチュートリアル

関連記事

閲覧したセクション