この記事では、ニコニコ大百科の記事における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;
- 文字色 color
- 通常文字色 #4c4c4c;
リンク文字色 #1e7dc0;
マウスオーバー時 #f80;
1文字記事自動リンクあり #444; - スマホ版
通常文字色 #222;
リンク文字色 #1e7dc0;
1文字記事自動リンクあり #444;
- 背景 background
- #fff;
- 右カラムなども含めた全体の背景色#e6e7e8;
- スマホ版
transparent
reset.cssにて初期値であるtransparent(透明)に指定されているだけで白ではありません
- 改行の仕方についての指定 word-break
- normal
指定されていません。そのため初期値のnormalになります。 - スマホ版
normal
指定されていません。そのため初期値のnormalになります。
各要素のプロパティ
目次
<p>
<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>の本文領域
<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>の本文領域
<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>の本文領域
<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>の本文領域
<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>の本文領域
<hr>
<table>
<th>
<td>
<th>の本文領域
|
<th>の本文領域
|
---|---|
<td>の本文領域
|
<td>の本文領域
|
<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;
<ul>
<ul><li>
<ul>(<li>)<ul>
<ul><li><ul><li>
<ul>(<li>)<ul>(<li>)<ul>
<ul><li><ul><li><ul><li>
<ol>
<ol>(<li>)<ol>
<ol>(<li>)<ol>(<li>)<ol>
<dl>
- padding: 0.7em 0 0.5em 32px;
- list-style: url(/img/li1.gif) outside; 上記<ul>要素と同一箇所に記述されているため存在しますが<dl>要素では適用されていません
- line-height: 1.55;
<dt>
<dd>
<dt>の本文領域
<dd>の本文領域
margin部分
padding部分
<dd>のpadding-left部分
<sup>
examplesup
<sub>
<ins>
<del>
exampledel
<iframe>
<img>
<summary>
<nicovideoplayer>
<twitter-widget>
関連項目
- ニコニコ大百科: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 - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴 |
依頼 | 一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語 |
公式企画 | 百チャレ - 大百科グランプリ |
ヘルプ | よくある質問 - エラー・不具合情報 |
編集者 | 編集者一覧 - ★ - ∞ - ♢ |
その他 | 今週のオススメ記事 - おすすめトレンド - 急上昇ワード改 |
r20231215 | ve
脚注
- *擬似クラス:last-child適用箇所の場合margin-bottom: 0;
- *擬似クラス:first-child適用箇所の場合margin-top: 0;
- *擬似クラス:first-child適用箇所の場合margin-top: 0;
- *スマホ版では記述されていないが、ほとんどのブラウザの場合ブラウザ側のスタイルシートにより太字化される
- *擬似クラス:first-child適用箇所の場合margin-top: 0;
- *擬似クラス:first-child適用箇所の場合margin-top: 0;
- *市場iframeはclassがnicoichibaまたはnicoichiba2なので適用外、ニコナレはclass属性の設定がない為適用外。
- *twitter-widget側の仕様 編集用のHTMLエディタ上の<blockquote class="twitter-tweet tweetblockt>とはmax-widthなどのサイズが違うので必ずプレビューして実際の表示を確認してください
- 56
- 0pt