# ノーマライズCSS `html_and_css`ディレクトリに`part5`ディレクトリを作成して、`index.html`を作成しましょう。ボイラーテンプレートを使用しましょう。 htmlの特定のタグには、デフォルトでcssが当たると説明しましたが、実はブラウザによって、当たるcssが異なり、見た目が変わることがあります。その現象を解消するために、**ノーマライズcss**を当てましょう。**ノーマライズcss**は、ブラウザ間で違いが出ないように設定されたcssファイルになります。以下リンクをクリックし、右クリックで、`リンク先を別名で保存`を選択しましょう。ファイル名は`normalize.css`とします。

次に、`part5`ディレクトリ内に、`css`ディレクトリを作成し、その中に`normalize.css`を格納しましょう。 `normalize.css`を適応する前に、`index.html`にpタグを追加し、レイアウトを確認しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>プログラミングの勉強の勉強</p>
  </body>
</html>

こちらを確認すると、bodyタグに**margin(上下左右の余白）**がデフォルトでセットされているかと思います。

では、`index.html`に`normalize.css`を適応しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <title>Document</title>
  </head>
  <body>
    <p>プログラミングの勉強の勉強</p>
  </body>
</html>

適応すると、デフォルトのcssが上書きされていることが分かります。

このように、webページを作る上では、ブラウザ毎に見た目が変わらないように、ノーマライズcssを適応したり、デフォルトのcssを全て取り除いてからcssを当てたい場合は、リセットcssを適応させるなどが推奨されます。