今注目のニュース
令和元年を代表するアニソンと言えば? 「平成アニソン大賞年忘れトークSP」で発表される「あなたの令和元年アニソン大賞」投票開始!
小林幸子さんが21年前のポケモンED『ポケットにファンタジー』をセルフカバー…! 初音ミクとの初&神コラボに涙腺崩壊
クリスマス用に犬の絵が描かれたTシャツ、大人ビジョンで物議をかもす

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

ニコニコダイヒャッカエイチティエムエルカクヨウソノデフォルトスタイリングシート

  • 51
  • 0
掲示板をみる(19)
  • twitter
  • facebook
  • はてな
  • LINE
  • ほめる(51)
  •  
  •  
  •  
  •  
  • その他

この記事では、ニコニコ大百科の記事における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
フォント定 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;  
マウスオーバー#ff8800;  
1文字記事自動リンクあり #444;  
スマホ版
通常文字#222;  
リンク文字#1e7dc0;  
(1文字記事自動リンクあり) #1e7dc0;  
背景 background
#fff;  
スマホ版
transparent  
reset.cssにて初期値であるtransparent(透明)に定されているだけでではありません
方向の表示位置 text-align
left
スマホ版
スマホ版では定されていません
直方向の表示位置 vertical-align
baseline
横幅 width
720px
width: 740px;のボックスの左右に10pxずつのpaddingが設定されている。
←10pxのpadding
10pxのpadding
720px
スマホ版
max-width
748px

max-width: 768px;のボックスの左右に10pxずつのpaddingが設定されている。
はみ出た部分の表示方法 overflow
hidden
スマホ版
visible(初期値)
スマホ版では定されていません

各要素のプロパティ

<p>

margin: 1em;
<p>の本文領域
margin: 1em;
<p>の本文領域
margin: 1em;
<p>の本文領域</p>
margin-bottom: 20px;
<p>の本文領域</p>
margin-bottom: 20px;
※<p>の本文領域</p>[1]

<h2>

<h2>の本文領域
[2]
<h2>の本文領域

margin部分  
padding部分  

<h3>

<h3>の本文領域
[3]
<h3>の本文領域

margin部分  
padding部分  

<h4>

<h4>の本文領域
[5]
<h4>の本文領域

margin部分  
padding部分  

<h5>

<h5>の本文領域
[6]
<h5>の本文領域

margin部分  
padding部分  

<h6>

<h6>の本文領域
<h6>の本文領域

margin部分  

<hr>


<table>

<th>

<td>

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

padding部分  

<blockquote>

<blockquote>の本文領域

margin部分  
padding部分  

<ul>

<ul><li>

<ul><ul>

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

<ul><ul><ul>

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

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

margin部分  
padding部分  

<ol>

<ol><ol>

<ol><ol><ol>

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

padding部分  

<dl>

<dt>

<dd>

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

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

<sup>

examplesup

<sub>

examplesub

<ins>

exampleins

exampleins

<del>

exampledel

<iframe>

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

<twitter-widget>

関連項目

脚注

  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側の仕様

掲示板

急上昇ワード

最終更新:2019/11/20(水) 23:00

ほめられた記事

最終更新:2019/11/20(水) 23:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP