【保存版】HTMLタグに最初からついているCSSの正体とは？UAスタイルシートを徹底解説！

HTMLで<section>や<div class="container">などのタグを使うと、まだCSSを書いていないのに何かしらの見た目が反映されていることがありますよね？

これは「UAスタイルシート（User Agent Stylesheet）」と呼ばれる、ブラウザ側で自動的に適用されるCSSが関係しています。本記事では、HTMLタグに元々組み込まれているCSSの正体と、よく使うタグごとの初期スタイル（デフォルトCSS）をまとめて解説します。

UAスタイルシートとは？

UAスタイルシートとは、Google Chrome・Safari・Firefoxなどの各ブラウザにあらかじめ組み込まれているCSSのことです。

このスタイルのおかげで、HTMLだけで書かれたページでもそれなりに整った見た目になります。

主なHTMLタグに適用されているデフォルトCSS（例：Chrome）

■ 見出しタグ（<h1>～<h6>）

h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}

■ 段落タグ（<p>）

p {
  display: block;
  margin: 1em 0;
}

■ リストタグ（<ul> / <ol> / <li>）

ul, ol {
  display: block;
  margin: 1em 0;
  padding-left: 40px;
}
li {
  display: list-item;
}

■ セクション系タグ（<section> / <article> / <header> / <footer>）

section, article, header, footer {
  display: block;
}

■ フォーム系タグ（<input> / <button>）

input, button {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

■ containerについて

<container>はHTMLの正式なタグではないため、UAスタイルシートは存在しません。

通常は<div class="container">のように、CSSクラス名でスタイリングするのが一般的です。

デフォルトスタイルが邪魔なときの対策

■ リセットCSS

ブラウザのUAスタイルを無効化したいときには、リセットCSSが有効です。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

■ ノーマライズCSS（normalize.css）

リセットCSSよりも自然に整える方法として、normalize.cssというライブラリもあります。

以下のようにCDNで読み込めば使えます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

まとめ：UAスタイルを理解してCSS設計をスムーズに！

• HTMLタグにはブラウザによって初期スタイル（UAスタイルシート）が適用されている
• タグによってマージンやフォントなどが自動で決まっている
• デザインを整えるにはリセットCSSやnormalize.cssを使おう

Web制作をする上で、UAスタイルシートの存在を理解しておくと、より柔軟なCSS設計ができるようになります！