ニコニコ大百科: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)
となります。
スマホ
14px
行の高さ line-height
1.35
line-heightを個別に定していない項全てに適用されます。
スマホ
140%
文字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
スマホ
max-width
100%

各端末毎に異なる表示可な幅に対応するためh2, h3, h4, h5, h6, hr, img, div, table, p, pre, blockquoteに対して定されている。imgタグにwidthとheightを定していた場合などにwidthの値のみがmax-widthの適用により狭められ縦長に表示されてしまう場合がある。
左右に4pxずつのpaddingが設定されている。

各要素のプロパティ

<p>

margin: 1em;
<p>の本文領域
margin: 1em;
<p>の本文領域
margin: 1em;

<h2>

<h2>の本文領域

margin部分  
padding部分  

<h3>

<h3>の本文領域

margin部分  
padding部分  

<h4>

<h4>の本文領域

margin部分  
padding部分  

<h5>

<h5>の本文領域

margin部分  
padding部分  

<h6>

<h6>の本文領域

margin部分  

<hr>


<table>

<th>

<td>

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

padding部分  

<blockquote>

<blockquote>の本文領域

margin部分  
padding部分  

<ul>

<ul><ul>

<ul><ul><ul>

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

padding部分  

<ol>

<ol><ol>

<ol><ol><ol>

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

padding部分  

<dl>

<dt>

<dd>

<dt>の本文領域
<dd>の本文領域

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

<sup>

examplesup

<sub>

examplesub

<ins>

exampleins

<del>

exampledel

関連項目

【スポンサーリンク】

スマホ版URL:
https://dic.nicovideo.jp/t/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91%3Ahtml%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88css

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

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

10 ななしのよっしん
2014/11/22(土) 15:37:10 ID: ZfigrJU6DQ
ほんまこの記事にはいつも助けられてます
本当にありがとうございました
11 ななしのよっしん
2014/11/30(日) 03:40:24 ID: Ljcvurdwm+
>>編集
h4とh5は対応するお絵カキコかったから、暫定的に用いたh3アイコンお絵カキコがそのままになってたんですよ。
現状の記事に使用されてるやつもオリジナルの物とは配色違いますし…それだけの為にドット拾うのもだるいし

それとは別件で、スマホ版で適用されるCSSも記載した方がいいかな?
max-widthとか色々とレイアウト崩れる原因になってる要素がいくつかあるし
12 ななしのよっしん
2014/11/30(日) 08:35:16 ID: ZfigrJU6DQ
>>11
スマホ版のcssがあるととても助かります
画像周りとかレイアウトがやたらと崩れるので…
13 ななしのよっしん
2014/11/30(日) 09:51:36 ID: bj+gWC+t1L
>>11

h4とh5は対応するお絵カキコかったから、暫定的に用いたh3アイコンお絵カキコがそのままになってたんですよ。

了解しました。

スマホ版はあると助かります。
14 ななしのよっしん
2014/12/22(月) 08:34:02 ID: Ljcvurdwm+
>>12-13
了解です。
スマホ版のCSSはそんなに変更点がないみたいなので、
変更点のみの記載とレイアウトが崩れる原因となっている要素への対応策を載せてみようかと思います。

PC版スマホ版のCSSを同一ページで記載するとわかり難くなるかもなので
過去リビジョンの使用を検討してみます。
15 ななしのよっしん
2014/12/22(月) 09:12:03 ID: bj+gWC+t1L
>>14

> PC版スマホ版のCSSを同一ページで記載するとわかり難くなるかもなので
> 過去リビジョンの使用を検討してみます。

それなら別記事のほうがいいと思います。
16 ななしのよっしん
2014/12/24(水) 01:22:26 ID: Ljcvurdwm+
>>15
> それなら別記事のほうがいいと思います。

やっぱりそうですよね…
毎に書くにしても、スマホ版を分離して記述するにしても
同一ページだと混同してしまうだろうな、と。

と言っても、変更点だけなら記事にするほどの量でもないっていう…
17 ななしのよっしん
2015/01/03(土) 07:55:06 ID: Ljcvurdwm+
>>15
一応、現状の記事に項別にスマホ版で変わってる部分だけ載せたらこんな感じになる。
https://www.dropbox.com/s/dlcb1pgdzbca518/sp-css%E8%A8%98%E4%BA%8B%E7%94%A8.txt?dl=0exit

最初のフォントサイズとかの所は判り易く背景色つけてみた
18 ななしのよっしん
2015/01/03(土) 12:57:42 ID: bj+gWC+t1L
>>17
これでいいと思います
19 ななしのよっしん
2015/01/05(月) 14:00:06 ID: MBV1cqzHNo
スマホ版か。
これから試行錯誤してみるが、関連項目は<ul>からなんとかできそうな気がする