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

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

から元の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が設定されている。

←10pxのpadding

10pxのpadding→

720px

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

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

hidden

スマホ版
overflow-x
scroll

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

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

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

各要素のプロパティ

目次

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

<p>

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

margin: 1em;

<p>の本文領域

margin: 1em;

<p>の本文領域

margin: 1em;

• スマホ版
  • font-size: 14px;
  • line-height: 1.8;
  • margin-bottom: 20px;
    • ※:last-child margin-bottom: 0;^[1]

<p>の本文領域</p>

margin-bottom: 20px;

<p>の本文領域</p>

margin-bottom: 20px;

※<p>の本文領域</p>^[1]

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

• スマホ版
  • padding-left: 20px;
  • border-bottom: 1px solid #8cc700; 　
  • background: url(/img/disc_l.gif) no-repeat 0px;
  • font-size: 20px;
  • font-weight: bold;
  • margin: 30px 0 10px;
  • background-repeat: no-repeat;
    • ※:first-child margin-top: 0;^[2]

※^[2]

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

• スマホ版
  • font-size: 18px;
  • padding-left: 20px;
  • border-bottom: 1px solid #8cc700; 　
  • background: url(/img/disc_m.gif) no-repeat 0px;
  • margin: 30px 0 10px;
  • background-repeat: no-repeat;
    • ※:first-child margin-top: 0;^[3]
  • font-weight: bold;^[4]

※^[3]

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

• スマホ版
  • font-size: 16px;
  • padding-left: 20px;
  • border-bottom: 1px solid #8cc700;
  • background: url(/img/disc_s.gif) no-repeat 0px;
  • margin: 30px 0 10px;
  • background-repeat: no-repeat;
    • ※:first-child margin-top: 0;^[5]
  • font-weight: normal;

※^[5]

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

• スマホ版
  • font-size: 14px;
  • padding-left: 18px;
  • border-bottom: 1px solid #8cc700;
  • background: url(/img/disc_ss.gif) no-repeat 0px;
  • margin: 30px 0 10px;
  • background-repeat: no-repeat;
    • ※:first-child margin-top: 0;^[6]
  • font-weight: normal;

※^[6]

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

• スマホ版
  • border-bottom: 1px solid #8cc700
  • font-weight: normal;

<h6>の本文領域

margin部分 　

<hr>

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

---

• スマホ版
  • display: block;
  • height: 1px;
  • border: 0;
  • border-top: 1px solid #cccccc; 　
  • margin: 1em 0;
  • padding: 0;

<table>

• border-collapse: collapse;

• スマホ版
  • border-collapse: collapse;
  • border-spacing: 0;

<th>

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

• スマホ版
  • background-color: #F1F1F1; 　
  • padding: 2px;
  • border: 1px solid #D1D1D1; 　

<td>

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

• スマホ版
  • 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;

• スマホ版
  • max-width: 100%;
  • 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 24px;
• list-style: url(/img/li1.gif) outside;
• line-height: 1.55;

• スマホ版
  • margin-bottom: 20px;
  • list-style: url(/img/li1.gif) outside;

<ul><li>

• スマホ版
  • margin: 0 0 10px 20px;

<ul>(<li>)<ul>

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

• スマホ版
  • margin-top: 10px;
  • margin-bottom: 20px;※

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

• スマホ版
  • position: relative;
  • margin-bottom: 10px;
  • padding-left: 18px;
  • background: url(/img/icon_arrow-right.png) left -5px top -2px no-repeat;

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

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

• スマホ版
  • margin-top: 10px;※
  • margin-bottom: 20px;※

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

• スマホ版※
  • position: relative;※
  • margin-bottom: 10px;※
  • padding-left: 18px;※
  • background: url(/img/icon_arrow-right.png) left -5px top -2px no-repeat;※

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

• スマホ版

a

> a

> a

margin部分 　
padding部分 　

<ol>

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

• スマホ版
  • padding-left: 32px;
  • list-style: decimal outside;
  • line-height: 1.8;

<ol>(<li>)<ol>

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

• スマホ版※
  • padding-left: 32px;※
  • list-style: decimal outside;※
  • line-height: 1.8;※

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

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

• スマホ版※
  • padding-left: 32px;※
  • list-style: decimal outside;※
  • line-height: 1.8;※

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

• スマホ版

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

• スマホ版※
  • padding: 0.8em 0 0.5em 1.5em;

<dt>

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

• スマホ版※
  • font-weight: bold;

<dd>

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

• スマホ版※
  • margin-left: 1em;
  • line-height: 1.8em;

<dt>の本文領域

<dd>の本文領域

• スマホ版

<dt>の本文領域

<dd>の本文領域

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

• スマホ版※
  • background-color: #ff9; 　
  • color: #000; 　
  • text-decoration: none;

exampleins

<del>

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

exampledel

<iframe>

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

• border:solid 1px #ccc;

• スマホ版※
  • height: 176px;
  • width: 312px;

nicoichibaのみ適用

• border:solid 1px #ccc;

nicoichiba2のみ適用

• border:solid 1px #ccc;

<img>

• スマホ版※
  • max-width: 100%;

<summary>

• スマホ版※
  • list-style: revert;

<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]

関連項目

• ニコニコ大百科:HTMLタグ一覧
• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
• Cascading Style Sheets
• スタイルシート
• スマートフォン版ニコニコ大百科
• PC版CSS: https://dic.nicovideo.jp/css/nicopedia_style.css
• スマートフォン版CSS: https://dic.nicovideo.jp/css/nicopedia_style_sp.css
  スマートフォン版リセットCSS: https://dic.nicovideo.jp/css/reset.css

編集者向けページ
マニュアル	記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン
マナー	編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために
素材	素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ	お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用
カラー	HTMLカラーコード - CSSでの色指定
仕様	仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴
依頼	一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語
公式企画	百チャレ - 大百科グランプリ
ヘルプ	よくある質問 - エラー・不具合情報
編集者	編集者一覧 - ★ - ∞ - ♢
その他	今週のオススメ記事 - おすすめトレンド - 急上昇ワード改
編集者向けページテンプレートver20231215

脚注

1. *擬似クラス:last-child適用箇所の場合margin-bottom: 0;
2. *擬似クラス:first-child適用箇所の場合margin-top: 0;
3. *擬似クラス:first-child適用箇所の場合margin-top: 0;
4. *スマホ版では記述されていないが、ほとんどのブラウザの場合ブラウザ側のスタイルシートにより太字化される
5. *擬似クラス:first-child適用箇所の場合margin-top: 0;
6. *擬似クラス:first-child適用箇所の場合margin-top: 0;
7. *市場iframeはclassがnicoichibaまたはnicoichiba2なので適用外、ニコナレはclass属性の設定がない為適用外。
8. *twitter-widget側の仕様 編集用のHTMLエディタ上の<blockquote class="twitter-tweet tweetblockt>とはmax-widthなどのサイズが違うので必ずプレビューして実際の表示を確認してください