主要なHTMLタグ/リセットする前のデフォルトスタイルまとめ
本記事は Google Chrome のデベロッパーツールを参考に作成したもの。
詳細なレンダリング情報を知りたい場合は、Web Hypertext Application Technology Working Group 公式サイト をご覧あれ。
目次（アルファベット順）
- :focus
- a
- a:visited
- a:hover
- a:active
- address
- article
- aside
- audio
- b
- blockquote
- body
- button
- canvas
- caption
- details
- div
- dl
- dt
- dd
- em
- fieldset
- figure
- figcaption
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- header
- hr
- html
- i
- iframe
- img
- input
- legend
- li
- main
- mark
- nav
- ol
- optgroup
- option
- p
- pre
- section
- select
- small
- span
- strong
- sub
- sup
- summary
- table
- tr
- th
- td
- textarea
- time
- u
- ul
- video
:focus
1 2 3 | :focus { outline: auto; } |
a
1 2 3 4 5 | a { color: #0000EE; cursor: auto; text-decoration: underline; } |
a:visited
1 2 3 | a:visited { color: #551A8B; } |
a:hover
1 2 3 | a:hover { cursor: auto; } |
a:active
1 2 3 | a:active { color: #FF0000; } |
address
1 2 3 4 | address { font-style: italic; display: block; } |
article
1 2 3 | article { display: block; } |
aside
1 2 3 | aside { display: block; } |
audio
1 2 3 4 | audio { width: 300px; height: 30px; } |
b
1 2 3 | b { font-weight: bold; } |
blockquote
1 2 3 | blockquote { margin: 1em 40px; } |
body
1 2 3 4 5 | body { font-size: 1em; /* 16px 100% */ display: block; margin: 8px; } |
button
1 2 3 4 5 6 7 8 | button { cursor: default; text-align: center; display: inline-block; align-items: flex-start; background-color: buttonface; box-sizing: border-box; } |
canvas
1 | デフォルトスタイルなし |
caption
1 2 3 4 | caption { text-align: center; display: table-caption; } |
details
1 2 3 | details { display: block; } |
div
1 2 3 | div { display: block; } |
dl
1 2 3 | dl { margin: 1em 0; } |
dt
1 2 3 | dt { display: block; } |
dd
1 2 3 4 | dd { display: block; margin-left: 40px; } |
em
1 2 3 | em { font-style: italic; } |
fieldset
1 2 3 4 5 6 7 | fieldset { min-width: min-content; /* コンテンツが取り得る最小幅 */ display: block; margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 2px groove threedface; } |
figure
1 2 3 | figure { margin: 1em 40px; } |
figcaption
1 2 3 | figcaption { display: block; } |
footer
1 2 3 | footer { display: block; } |
form
1 2 3 | form { display: block; } |
h1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* 単体 */ h1 { font-size: 2em; /* 32px 200% */ font-weight: bold; display: block; margin: 0.67em 0; } /* ボックス要素でネストした場合 */ any(article,aside,nav,section) h1 { font-size: 1.5em; /* 24px 150% */ font-weight: bold; display: block; margin: 0.83em 0; } |
h2
1 2 3 4 5 6 | h2 { font-size: 1.5em; /* 24px 150% */ font-weight: bold; display: block; margin: 0.83em 0; } |
h3
1 2 3 4 5 6 | h3 { font-size: 1.17em; /* 18.7px 116.8% */ font-weight: bold; display: block; margin: 1em 0; } |
h4
1 2 3 4 5 6 | h4 { font-size: 1em; /* 16px 100% */ font-weight: bold; display: block; margin: 1.33em 0; } |
h5
1 2 3 4 5 6 | h5 { font-size: 0.83em; /* 13.3px 83.1% */ font-weight: bold; display: block; margin: 1.67em 0; } |
h6
1 2 3 4 5 6 | h6 { font-size: 0.67em; /* 10.7px 66.8% */ font-weight: bold; display: block; margin: 2.33em 0; } |
header
1 2 3 | header { display: block; } |
hr
1 2 3 4 5 | hr { display: block; margin: 0.5em auto; border: 1px inset; /* 凹型の線 */ } |
html
1 2 3 4 5 6 | html[Attributes Style] { -webkit-locale: 'ja'; } html { display: block; } |
i
1 2 3 | i { font-style: italic; } |
iframe
1 2 3 | iframe { border: 2px inset; /* 凹型の線 */ } |
img
1 | デフォルトスタイルなし |
input
1 2 3 4 5 6 7 8 9 | input { cursor: auto; display: inline-block; padding: 1px; border: 2px inset; /* 凹型の線 */ -webkit-appearance: textfield; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; } |
legend
1 2 3 4 | legend { display: block; padding: 0 2px; } |
li
1 2 3 | li { display: list-item; } |
main
1 2 3 | main { display: block; } |
mark
1 2 3 4 | mark { color: black; background-color: yellow; } |
nav
1 2 3 | nav { display: block; } |
ol
1 2 3 4 5 6 | ol { list-style-type: decimal; display: block; margin: 1em 0; padding-left: 40px; } |
optgroup
1 2 3 4 | optgroup { font-weight: bolder; display: block; } |
option
1 2 3 4 5 6 7 | option { min-height: 1.2em; font-weight: normal; white-space: pre; /* 連続する半角スペース・タブ・改行をそのまま表示 */ display: block; padding: 0px 2px 1px; } |
p
1 2 3 4 | p { display: block; margin: 1em 0; } |
pre
1 2 3 4 5 6 | pre { font-family: monospace; white-space: pre; /* 連続する半角スペース・タブ・改行をそのまま表示 */ display: block; margin: 1em 0; } |
section
1 2 3 | section { display: block; } |
select
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | select { cursor: default; white-space: pre; /* 連続する半角スペース・タブ・改行をそのまま表示 */ display: inline-block; align-items: flex-start; overflow-x: hidden; overflow-y: scroll; border: 1px solid; border-color: rgb(169, 169, 169); -webkit-appearance: menulist; -webkit-rtl-ordering: logical; -webkit-writing-mode: horizontal-tb; } select:-internal-list-box { white-space: nowrap; overflow-x: hidden; overflow-y: scroll; vertical-align: text-bottom; border-color: grey; -webkit-appearance: listbox; -webkit-user-select: none; } |
small
1 2 3 | small { font-size: smaller; /* 親要素の文字サイズに対して1段階小さい */ } |
span
1 | デフォルトスタイルなし |
strong
1 2 3 | strong { font-weight: bold; } |
sub
1 2 3 4 | sub { font-size: smaller; vertical-align: sub; } |
sup
1 2 3 4 | sup { font-size: smaller; vertical-align: super; } |
summary
1 2 3 | summary { display: block; } |
table
1 2 3 4 5 | table { display: table; border-collapse: separate; border-spacing: 2px; } |
tr
1 2 3 4 | tr { display: table-row; vertical-align: middle; } |
th
1 2 3 4 5 6 | th { font-weight: bold; display: table-cell; padding: 1px; vertical-align: inherit; /* 親要素から継承 */ } |
td
1 2 3 4 5 | td { display: table-cell; padding: 1px; vertical-align: inherit; /* 親要素から継承 */ } |
textarea
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | textarea { font-family: monospace; cursor: auto; white-space: pre-wrap; /* 連続する半角スペース・タブ・改行・記号をそのまま表示 */ word-wrap: break-word; display: inline-block; padding: 2px; flex-direction: column; resize: auto; border: 1px solid rgb(169, 169, 169); -webkit-appearance: textarea; -webkit-rtl-ordering: logical; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; } |
time
1 | デフォルトスタイルなし |
u
1 2 3 | u { text-decoration: underline; } |
ul
1 2 3 4 5 6 | ul { list-style-type: disc; display: block; margin: 1em 0; padding-left: 40px; } |
video
1 2 3 | video { object-fit: contain; /* アスペクト比を保持して収まるようにリサイズ */ } |
コメントを投稿する