ノーマライズCSS
html_and_cssディレクトリにpart5ディレクトリを作成して、index.htmlを作成しましょう。
ボイラーテンプレートを使用しましょう。
htmlの特定のタグには、デフォルトでcssが当たると説明しましたが、実はブラウザによって、当たるcssが異なり、見た目が変わることがあります。その現象を解消するために、ノーマライズcssを当てましょう。ノーマライズcssは、ブラウザ間で違いが出ないように設定されたcssファイルになります。
以下リンクをクリックし、右クリックで、リンク先を別名で保存を選択しましょう。
ファイル名はnormalize.cssとします。
https://necolas.github.io/normalize.css/
次に、part5ディレクトリ内に、cssディレクトリを作成し、その中にnormalize.cssを格納しましょう。
normalize.cssを適応する前に、index.htmlにpタグを追加し、レイアウトを確認しましょう。
こちらを確認すると、bodyタグにmargin(上下左右の余白）がデフォルトでセットされているかと思います。
では、index.htmlにnormalize.cssを適応しましょう。
適応すると、デフォルトのcssが上書きされていることが分かります。
このように、webページを作る上では、ブラウザ毎に見た目が変わらないように、ノーマライズcssを適応したり、デフォルトのcssを全て取り除いてからcssを当てたい場合は、リセットcssを適応させるなどが推奨されます。
Last updated