ニコニコ大百科:HTML各要素のデフォルトCSS単語

記事全体に反映されるもの(各要素に反映されるもの)

フォントサイズ font-size

0.9em
ブラウザで指定したフォントサイズの0.9em(90%)の大きさで表示します。また、各要素のフォントサイズ指定やline-height(行の高さ)指定にも影響します。

例えば、既定のフォントサイズが20pxのブラウザでh2見出しを見た場合
見出し2の文字の大きさは 20(px)×0.9(em)×1.4(em)＝25.2(px)
見出し2の行の高さは 20(px)×0.9(em)×1.4(em)×1.4＝35.28(px)
となります。

スマホ版
14px

フォントの指定 font-family

Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif;
先に記述してあるフォントの候補が優先順位が高くなります。

スマホ版
-apple-system, BlinkMacSystemFont, ArialMT,"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",sans-serif;

行の高さ line-height

1.35
line-heightを個別に指定していない項目全てに適用されます。

スマホ版
14px
1.3

文字色 color

通常文字色 #4c4c4c; 　
リンク文字色 #1e7dc0; 　
マウスオーバー時 #f80; 　
1文字記事自動リンクあり #444; 　

スマホ版
通常文字色 #222; 　
リンク文字色 #1e7dc0; 　
1文字記事自動リンクあり #444; 　

背景 background

#fff; 　

右カラムなども含めた全体の背景色#e6e7e8; 　

スマホ版
transparent 　
reset.cssにて初期値であるtransparent(透明)に指定されているだけで白ではありません

水平方向の表示位置 text-align

left

スマホ版
スマホ版では指定されていません

垂直方向の表示位置 vertical-align

baseline

スマホ版
baseline

横幅 width

720px
width: 740px;のボックスの左右に10pxずつのpaddingが設定されている。

スマホ版
max-width
748px
max-width: 768px;のボックスの左右に10pxずつのpaddingが設定されている。

はみ出た部分の表示方法 overflow

hidden

スマホ版
overflow-x
scroll

改行の仕方についての指定 word-break

normal
指定されていません。そのため初期値のnormalになります。

スマホ版
normal
指定されていません。そのため初期値のnormalになります。

各要素のプロパティ

<p>

• line-height: 1.35;
• margin: 1em 1em;

<h2>

• font-size: 1.4em;
• line-height: 1.4;
• border-bottom: 1px solid #8cc700; 　
• background: url(/img/disc_l.gif) no-repeat 0px;
• padding-left: 20px;
• margin: 0.2em 1px 0.4em 0;

margin部分 　
padding部分 　

<h3>

• font-size: 1.25em;
• line-height: 1.3;
• border-bottom: 1px solid #8cc700; 　
• background: url(/img/disc_m.gif) no-repeat 0px;
• padding-left: 20px;
• margin: 0.1em 2px 0.3em 1px;

margin部分 　
padding部分 　

<h4>

• font-size: 1.16em;
• line-height: 1.2;
• border-bottom: 1px solid #8cc700; 　
• background: url(/img/disc_s.gif) no-repeat 0px;
• padding-left: 20px;
• font-weight: normal;
• margin: 0.1em 3px 0.3em 2px;

margin部分 　
padding部分 　

<h5>

• font-size: 1em;
• line-height: 1.2;
• border-bottom: 1px solid #8cc700; 　
• background: url(/img/disc_ss.gif) no-repeat 0px;
• padding-left: 18px;
• font-weight: normal;
• margin: 0.1em 4px 0.2em 3px;

margin部分 　
padding部分 　

<h6>

• font-size: 0.8em;
• line-height: 1.2;
• border-bottom: 1px solid #8cc700; 　
• font-weight: normal;
• margin: 0.1em 5px 0.2em 4px;

margin部分 　

<hr>

• border-width: 1px 0px 0px 0px;
• border-style: dotted;
• border-color: #CCCCCC; 　
• height: 1px;

---

<table>

• border-collapse: collapse;

<th>

• background-color: #F1F1F1; 　
• padding: 2px;
• border: 1px solid #D1D1D1; 　

<td>

• padding: 5px;
• border: 1px solid #D1D1D1; 　

<th>の本文領域	<th>の本文領域
<td>の本文領域	<td>の本文領域

padding部分 　

<blockquote>

• border: 1px solid #FFD248; 　
• background-image: url(/img/quote.gif);
• background-repeat: no-repeat;
• padding-top: 10px;
• padding-right: 0px;
• padding-bottom: 10px;
• padding-left: 30px;
• margin-left: 30px;

margin部分 　
padding部分 　

<ul>

• padding: 0.7em 0 0.5em 24px;
• list-style: url(/img/li1.gif) outside;
• line-height: 1.55;

<ul><li>

<ul>(<li>)<ul>

• padding: 0.2em 0 0.1em 12px;
• list-style: url(/img/li2.gif) outside;
• line-height: 1.55;

<ul><li><ul><li>

<ul>(<li>)<ul>(<li>)<ul>

• padding: 0.2em 0 0.1em 12px;
• list-style: url(/img/li3.gif) outside;
• line-height: 1.55;

<ul><li><ul><li><ul><li>

margin部分 　
padding部分 　

<ol>

• padding: 0.7em 0 0.5em 32px;
• list-style: decimal outside;
• line-height: 1.55;

<ol>(<li>)<ol>

• padding: 0.2em 0 0.1em 12px;
• list-style:upper-roman outside;
• line-height: 1.55;

<ol>(<li>)<ol>(<li>)<ol>

• padding: 0.2em 0 0.1em 12px;
• list-style:lower-alpha outside;
• line-height: 1.55;

padding部分 　

<dl>

• padding: 0.7em 0 0.5em 32px;
• list-style: url(/img/li1.gif) outside; 上記<ul>要素と同一箇所に記述されているため存在しますが<dl>要素では適用されていません
• line-height: 1.55;

<dt>

• margin: 0.2em;
• font-weight: bold;

<dd>

• margin: 0.2em;
• padding-left: 1em;

margin部分 　
padding部分 　
<dd>のpadding-left部分 　

<sup>

• font-size: 0.7em;
• vertical-align: super;PC版スマホ版

example^sup

<sub>

• font-size: 0.7em;
• vertical-align: sub;PC版スマホ版

example_sub

<ins>

• text-decoration: underline;

exampleins

<del>

• text-decoration: line-through;PC版スマホ版

exampledel

<iframe>

class="nicovideo"のみ適用 ^[7]

• border:solid 1px #ccc;

nicoichibaのみ適用

• border:solid 1px #ccc;

nicoichiba2のみ適用

• border:solid 1px #ccc;

<img>

<summary>

<nicovideoplayer>

<twitter-widget>

• position: static;^[8]
• display: flex;^[8]
  • display: block;
  • flex-grow: 1;^[8]
• max-width: 550px;^[8]
• width: 100%;^[8]
• margin-top: 10px;^[8]
• margin-bottom: 10px;^[8]
  • visibility: visible;^[8]
• ※実質的なmin-width: 300px;^[8]