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

この記事ではニコニコ大百科の記事において記事内でのpやh2などの各要素についてデフォルトの値についてまとめる。

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

フォントサイズ 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)
となります。

行の高さ line-height

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

文字色 color

通常文字色 #303030; 　
リンク文字色 #0066cc; 　
マウスオーバー時 #ff8800; 　
1文字記事自動リンクあり #444; 　

背景色 background-color

white 　

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

left

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

baseline

横幅 width

720px 左右に10pxずつのpaddingが設定されている。なお左右共に外側2pxずつは記事枠用に使用している為背景画像の使用時などは注意が必要

←10pxのpadding

10pxのpadding→

720px

各要素のプロパティ

目次

• <p>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>
• <hr>
• <table>
• <blockquote>
• <ul>
• <ol>
• <dl>
• <sup>
• <sub>
• <ins>
• <del>

<p>

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

margin: 1em;

<p>の本文領域

margin: 1em;

<p>の本文領域

margin: 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;

<h2>の本文領域

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;

<h3>の本文領域

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;

<h4>の本文領域

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;

<h5>の本文領域

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;

<h6>の本文領域

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>の本文領域
<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;

<blockquote>の本文領域

margin部分 　
padding部分 　

<ul>

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

<ul><ul>

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

<ul><ul><ul>

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

• <ul>の本文領域
• • <ul><ul>の本文領域
  • • <ul><ul><ul>の本文領域

padding部分 　

<ol>

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

<ol><ol>

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

<ol><ol><ol>

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

1. <ol>の本文領域
2. 1. <ol><ol>の本文領域
   2. 1. <ol><ol><ol>の本文領域

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;

<dt>の本文領域

<dd>の本文領域

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

<sup>

• font-size: 0.7em;
• vertical-align: super;

example^sup

<sub>

• font-size: 0.7em;
• vertical-align: sub;

example_sub

<ins>

• text-decoration: underline;

exampleins

<del>

• text-decoration: line-through;

exampledel

関連項目

• ニコニコ大百科:HTMLタグ一覧
• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
• PC版CSS: https://dic.nicovideo.jp/nd2.css?130521
• iOS&AndroidOS版CSS: https://dic.nicovideo.jp/main_sp.css?s=3