ニコニコ大百科:HTMLタグ一覧 単語
ニコニコダイヒャッカエイチティーエムエルタグイチラン
- ほめる
(135) - 掲示板を見る
(397) - その他
ニコニコ大百科で使えるタグ・スタイルシートの一覧と解説です。文法については、HTMLの簡単な説明を参照してください。
htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。アルファベット順にならんでいます。
ニコニコ大百科のHTMLには、「HTML4.01 Strict」で使われていたDOCTYPE文字列が記述されていますが、内容はHTML Standard (旧称HTML5) に近い構文となっています。[1]
ニコニコ大百科で使用できるタグ・属性の一覧
| タグ | 属性 |
|---|---|
| (共通属性) | style
|
<a>
|
href id name rel rev[2] target title
|
<abbr>
|
|
<acronym>[3]
|
|
<b>
|
|
<blockquote>
|
cite
|
<br>
|
clear[4]
|
<caption>
|
|
<center>[5]
|
|
<code>
|
|
<col>
|
span
|
<colgroup>
|
span
|
<dd>
|
|
<del>
|
|
<details>
|
|
<dfn>
|
|
<div>
|
align[6]title
|
<dl>
|
|
<dt>
|
|
<em>
|
|
<h2> <h3> <h4> <h5> <h6>
|
|
<hr>
|
align[7] width[8]
|
<i>
|
|
<iframe>
|
class frameborder[9] height scrolling[10] src width
|
<img>
|
align[11] alt border height hspace[12] longdesc[13] src title vspace[14] width
|
<ins>
|
|
<kbd>
|
|
<li>
|
value
|
<nobr>
|
|
<ol>
|
start
|
<optgroup>
|
label
|
<option>
|
selected
|
<p>
|
align[15]title
|
<pre>
|
|
<q>
|
cite
|
<rp>
|
|
<rt>
|
|
<ruby>
|
|
<samp>
|
|
<span>
|
|
<select>
|
|
<strong>
|
title
|
<sub>
|
|
<summary>
|
|
<sup>
|
|
<table>
|
align[16] border[17] frame[18] rules[19] summary[20] width[21]
|
<tbody>
|
|
<td>
|
abbr[22] align[23] axis[24] bgcolor[25] colspan headers[26] height[27] nowrap[28] rowspan scope[29] valign[30] width[31]title
|
<tfoot>
|
|
<th>
|
abbr align[32] axis[33] headers valign[34]title
|
<thead>
|
|
<tr>
|
align[35] valign[36]
|
<tt>[37]
|
|
<ul>
|
|
<var>
|
|
<wbr>
|
|
コメント (<!-- -->)
|
|
脚注 (<cite>)
|
※ (ニコニコ大百科に投稿できるタグ・属性のうち) 廃止されたタグ・属性は灰色で表し、代替方法などを脚注に示しています。
単独でつかったりするモノ
<a>〜</a>
ハイパーリンクを表します。href属性を設定するか、name属性を設定するかで動作が全く異なります。
<a>タグの中身のテキストについては、自動リンクが働かないようになっているため、入れ子になる心配はありません。
属性
| href | URL。 |
|---|---|
| id | タグに一意な識別子 (ID) を結び付けます。ニコニコ大百科ではname属性が存在する場合にしか指定できません。 |
| name | 非推奨であり、代わりに<h2>タグなどへ直接id属性が指定されるべきですが、ニコニコ大百科でアンカーを作成するにはこの属性を使うしかありません。id属性が存在する場合はname属性を同じ値にしなければなりませんが、ニコニコ大百科ではid属性は自動的に同じ値に設定されます。 |
| rel | 1つ以上のリンク型 を空白区切りで記述し、リンクの種類を表します。ニコニコ大百科では、記事以外へのリンクは、「rel="nofollow"」に強制されます。 |
| target | キーワードなどを記述し、リンク先をどこに表示するかを指定します。ニコニコ大百科では、記事以外へのリンクは、「target="_blank"」に強制されます。 |
| title | ツールチップに表示するテキストとして適切な、タグが表す内容に対する参考情報を記述します。たとえば、リンク先のタイトルや説明を表したりします。2016年現在の携帯端末ではこの属性値をツールチップとして簡単に参照できないため、この属性に依存しないことが推奨されています。 |
href属性
リンクを作成します。
ニコニコ大百科内では記事になっている単語は自動でリンクされるため、 外部サイトや動画へリンクする場合によく使用されます。
ニコニコ大百科の記事以外へリンクする場合に<a>タグを使用すると、自動的に「rel="nofollow"」「target="_blank"」という属性が追加されます。「rel="nofollow"」は管理者がリンク先について承認していないことを表し、スパム編集対策として使われているとか考えられます。「target="_blank"」を付けると、リンク先が新しいウインドウ (タブ) で開かれます。
例
name属性
通常のリンクではページの先頭から表示されますが、ページが長くなったときなどに途中にある項目へ飛ぶ時にはリンク先にname属性の<a>タグを打ちます。
<a name="hoge"></a>(内容)
|
まず、このようにリンク先にアンカーを打ち込みます。基本的に内側には何も書けません。 |
|
編集後はid属性が付加されます。アンカー名を修正する場合は、nameとid両方とも変更しなければいけません。
|
|
リンク元ではこのようにします。同じページの「hoge」アンカーに飛ぶ場合は記事のURLは省略可能です。
|
例
<abbr>〜</abbr>
略称や頭字語 (頭文字を並べたもの) を表します。title属性で展開形 (正式名称) を表しますが、ニコニコ大百科ではtitle属性は使えません。
例
<b>〜</b>
意味的に区別したいテキストを表します。見出しを表すときは<h2>タグなど、強勢を表すときは<em>タグ、重要性を表すときは<strong>タグを使ってください。
例
<blockquote>〜</blockquote>
引用を表します。出典は外に書く必要があります。
属性
| cite | 引用元のURLを指定します。 |
|---|
例
blockquote 要素は、別のソースから引用された一節を表現する。
blockquote の内側にある内容は、別のソースから引用されていなければならない。 その引用元アドレスがあれば, それを cite 属性にあてがってよい。
<p>blockquote 要素は、別のソースから引用された一節を表現する。</p>
<p>blockquote の内側にある内容は、別のソースから引用されていなければならない。 その引用元アドレスがあれば, それを <dfn>cite</dfn> 属性にあてがってよい。</p>
</blockquote>
<p style="text-align: right;">(<a href="https://triple-underscore.github.io/HTML-grouping-ja.html">HTML Standard — Grouping content（日本語訳）</a>より)</p>
<br>
詩文や住所などにおける改行を表します。このタグは終了タグがありません。
※上記のように<br>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください！
例えば、Vistaで使われている「メイリオ」フォントはXPまでの「MS Pゴシック」と比べて幅が広いので、レイアウトが盛大に崩れる恐れがあります。他にもMacで使われているヒラギノフォントは、また幅が異なります。
長文は<br>で折り返さず、幅いっぱいまで書いて勝手に折り返るのに任せた方が安全です。
例
<code>〜</code>
例
<a href="https://dic.nicovideo.jp/">ニコニコ大百科</a>
<del>〜</del>
文書から削除した部分を表します。<ins>タグと合わせて、文書に対する編集を表すタグとして用いられます。
例
<dfn>〜</dfn>
用語の定義を表します。
例
<div>〜</div>
意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。class、lang、title属性を指定することで中身に意味を持たせることもできますが、いずれもニコニコ大百科では使えません。
例
<h3><div>〜</div></h3>
<p>意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。class、lang、title属性を指定することで中身に意味を持たせることもできますが、いずれもニコニコ大百科では使えません。</p>
<p><article>、<section>、<nav> など適切なタグがあれば……というものの、ニコニコ大百科では使用できるタグなどが制限されているため、難しいかもしれません。</p>
<p>この例では、セクション全体にまとめてスタイルを設定しています。</p>
</div>
<em>〜</em>
強勢 (アクセント、発音上の強調) を表します。
以下の例は、動物の種類が論点になっていることを表します。仕様書の<em>タグの例がわかりやすいので、参照してください。
例
<h2>〜</h2>・<h3>〜</h3>・<h4>〜</h4>など
見出しです。新規作成時に見出しとなる部分に使われているアレです。数字の部分は階級 (※レベルではなく) と呼ばれます。<h1>は記事タイトルのみに使用されるため、ニコニコ大百科の記事編集で使用できるのは<h2>から<h6>までです。
階級は適切なものを利用しましょう。例えば<h2>の次に<h4>が登場した場合、レベルは1つしか下がらないので、構造などがわかりづらくなります。
例
不適切な例
<hr>
CSSで見た目を変えたい場合、左寄せ・右寄せは width で幅を設定して margin を使用、線の色は border-color を使用します。
例
ニコニコ大百科 と入力してください。
ニコニコ大百科 と入力されました。
<samp><kbd>ニコニコ大百科</kbd></samp> と入力されました。
メニューから <kbd><kbd><samp>その他▼</samp></kbd> → <kbd><samp>大百科</samp></kbd></kbd> を開きます。
Ctrl + C で選択した文字列をクリップボードにコピーできます。
<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> で選択した文字列をクリップボードにコピーできます。
<p style="border: 1px solid #8cc700; margin: 0.5em 3em; padding: 1em;"><samp><kbd>ニコニコ大百科</kbd> と入力してください。</samp></p>
<p style="border: 1px solid #99ccff; margin: 0.5em 3em; padding: 1em;"><code><kbd>ニコニコ大百科</kbd> と入力してください。</code>
<hr />
<p style="border: 1px solid #8cc700; margin: 0.5em 3em; padding: 1em;"><samp><kbd>ニコニコ大百科</kbd></samp> と入力されました。</samp></p>
<p style="border: 1px solid #99ccff; margin: 0.5em 3em; padding: 1em;"><code><samp><kbd>ニコニコ大百科</kbd></samp> と入力されました。</code></p>
<hr />
<p style="border: 1px solid #8cc700; margin: 0.5em 3em; padding: 1em;"><samp>メニューから <kbd><kbd><samp>その他▼</samp></kbd> → <kbd><samp>大百科</samp></kbd></kbd> を開きます。</samp></p>
<p style="border: 1px solid #99ccff; margin: 0.5em 3em; padding: 1em;"><code>メニューから <kbd><kbd><samp>その他▼</samp></kbd> → <kbd><samp>大百科</samp></kbd></kbd> を開きます。</code></p>
<hr />
<p style="border: 1px solid #8cc700; margin: 0.5em 3em; padding: 1em;"><samp><kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> で選択した文字列をクリップボードにコピーできます。</samp></p>
<p style="border: 1px solid #99ccff; margin: 0.5em 3em; padding: 1em;"><code><kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> で選択した文字列をクリップボードにコピーできます。 </code></p>
<i>〜</i>
本文と異なる声や雰囲気、または技術用語、頭の中で考えていることなど通常の文から区別したい部分を表します。
なお、デフォルトのスタイルはイタリック体 (斜体) ですが、メイリオなど一部の日本語フォントでは和文部が斜体になりません (メイリオの場合、通常の文字を斜体フォントとしてそのままコピーしているため)。使用する際、スタイルの設定には注意が必要かもしれません。
例
(あやしい……！)
僕は急いで彼を追った。
<iframe>〜</iframe>
他のページを埋め込むインラインフレームを作るタグです。ニコニコ大百科では、動画紹介などのインラインコンテンツを貼り付けるときに使用します。
詳細な使用方法は、ニコニコ大百科:HTMLテンプレート集のニコニコ動画の各サービスの貼り方を参照してください。
属性
| class | タグに属するクラスを結び付けます。ニコニコ大百科では、URLに応じて特定のクラスが強制されます。 |
|---|---|
| height | コンテンツの高さをCSSピクセルで指定します。単位は付けません。 |
| scrolling | 廃止された属性であり、CSSで置き換えることとされています。しかしスクロールバーを消すには、フレーム内に表示しているHTMLの方で <body> タグに overflow を設定する必要がありますが、niconicoはいずれのサービスの埋め込みコンテンツでもこの設定を行っていないため、scrolling="no" に頼らざるを得ません。 |
| src | インラインコンテンツのURLを指定します。ニコニコ大百科では、niconicoの各サービスに対応する埋め込みコンテンツのURLしか使用できません。 |
| width | コンテンツの幅をCSSピクセルで指定します。単位は付けません。 |
<img …>
属性
| alt |
きわめて特殊な場合を除いて必須です。画像が利用できないときに表示する置換テキストを指定します。 画像を削除してalt属性値に置き換えても違和感がないような値を記述します。つまり画像の説明やアイコンのキャラクター名などは基本的に正しくありません。 デザイン目的などで画像を使う場合、空文字列 (alt="") にします。 HTML仕様書の画像に対して代替として動作するテキストを提供に対する要件 |
|---|---|
| border | 非推奨です。値は「0」のみ指定可能です。枠線を付けたい場合は、CSSの border などを利用しましょう。 |
| height | 画像の高さをCSSピクセルで指定します。単位は付けません。 |
| src | 画像のURL。ニコニコ大百科では指定できるURLが後述のように制限されています。 |
| title | ツールチップに表示するテキストとして適切な、タグが表す内容に対する参考情報を記述します。たとえば、画像の作者や説明を表したりします。2016年現在の携帯端末ではこの属性値をツールチップとして簡単に参照できないため、この属性に依存しないことが推奨されています。 |
| width | 画像の幅をCSSピクセルで指定します。単位は付けません。 |
src属性
| 画像の種類 | URL |
|---|---|
| お絵カキコ | https://dic.nicovideo.jp/oekaki/〜.png
|
| お絵カキコのサムネイル | https://dic.nicovideo.jp/oekaki_thumb/〜.png
|
| ニコニコ動画のサムネイル | https://tn.smilevideo.jp/smile?i=〜
|
| ニコニコミュニティのシンボル | http://icon.nicovideo.jp/community/co〜.jpg
|
| ニコニ・コモンズのサムネイル | http://deliver.niconicommons.jp/thumbnail/nc〜?size=l
|
| ニコニコ静画 | https://lohas.nicoseiga.jp/thumb/～
|
例
<ins>〜</ins>
文書へ追加した部分を表します。<del>タグと合わせて、文書に対する編集を表すタグとして用いられます。
例
<kbd>〜</kbd>
ユーザー入力を表します。
例
<nobr>～</nobr>
改行禁止を表します。ブラウザ等の横幅関係なく、このタグで囲まれた文章は改行なしで表示されます。
行内に収まらない場合、領域からはみ出て表示されるか、スクロールバーを伴って表示されます。
例
<p>〜</p>
段落を表します。
画像などの回り込みを解除したい場合 <p style="clear: both;">〜</p> を指定してください。
例
ニコニコ大百科で使えるタグ・スタイルシートの一覧と解説です。文法については、HTMLの簡単な説明を参照してください。
htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。アルファベット順にならんでいます。
<p>htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。アルファベット順にならんでいます。</p>
<pre>〜</pre>
整形済みのテキストであることを表します。たとえば、メールの内容、コンピューターコード片、アスキーアートなどを表示するときに利用します。
アスキーアートの表示について詳しくはアスキーアート#ニコニコ大百科編集用テンプレート、ニコニコ大百科:HTMLテンプレート集#AAを正しく表示するを参照してください。
例
ニコニコ大百科:HTMLタグ一覧
===========================
概要
----
ニコニコ大百科で使えるタグ・スタイルシートの一覧と解説です。
文法については、 **[HTMLの簡単な説明]** を参照してください。
htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。
アルファベット順にならんでいます。
ニコニコ大百科のHTMLには、「HTML4.01 Strict」で使われていたDOCTYPE文字列が記述されていますが、内容はHTML Standard (旧称HTML5) に近い構文となっています。
[HTMLの簡単な説明]: https://dic.nicovideo.jp/a/html#grammar
ニコニコ大百科で使用できるタグ・属性の一覧
------------------------------------------
- (共通属性)
+ style
- <a>
+ href
+ rel
+ target
===========================
概要
----
ニコニコ大百科で使えるタグ・スタイルシートの一覧と解説です。
文法については、 **[HTMLの簡単な説明]** を参照してください。
htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。
アルファベット順にならんでいます。
[HTMLの簡単な説明]: https://dic.nicovideo.jp/a/html#grammar
ニコニコ大百科で使用できるタグ・属性の一覧
------------------------------------------
- (共通属性)
+ style
- <a>
+ href
+ rel
+ target</code></pre>
また、アスキーアートを正しく表示させる目的でもよく使われます。詳しくはアスキーアート#ニコニコ大百科編集用テンプレート、ニコニコ大百科:HTMLテンプレート集#AAを正しく表示するを参照してください。
<samp>〜</samp>
例
<samp style="display: block; border: 1px solid #99ccff; padding: 1em;"><a href="https://dic.nicovideo.jp/">ニコニコ大百科</a></samp>
<span>〜</span>
意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。
<strong>〜</strong>
強い重要性、真剣さ、緊急性などを表します。<em>タグなどとは違い、文の意味は変わりません。
例
詩文や住所などにおける改行を表します。このタグは終了タグがありません。
※上記のように<br>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください！
<p><strong style="color: red;">※上記のように<code><br></code>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください！</strong></p>
<sub>〜</sub>
下付き文字を表します。
例
<sup>〜</sup>
上付き文字を表します。
例
<var>〜</var>
変数を表します。
例
<q>〜</q>
引用を表します。出典は外に書く必要があります。<q>タグを使った場合、引用符や鍵括弧などを使ってはいけません。
ニコニコ大百科では引用符がCSSで非表示にされているため、<q>タグは使わず、代わりに引用文を鍵括弧などで囲んだ方が良いでしょう。
属性
| cite | 引用元のURLを指定します。 |
|---|
例
基本方針は、「ニコニコ大百科の記事は、面白くて迷惑をかけなければOK」です。と書かれています。
<wbr>
改行してもよい箇所を表します。このタグは終了タグがありません。
改行の必要がない場合はそのまま表示されます。
例
<!--〜-->
コメントを記述する構文で、タグとは呼ばれません。囲んだテキストを閲覧時・htmlエディタ使用時に非表示にします (元から存在しないものとして扱う)。ソースには残るので、編集者向けの註釈などに使えます。
例
<cite>〜</cite>
脚注を作ります。ニコニコ大百科特有の構文です。表示されるときは脚注へのリンクに置き換わります。[38]
<cite>〜</cite>の中には、段落内レベルのタグしか書けません。
例
<p>脚注を作ります。ニコニコ大百科特有の構文です。表示されるときは脚注へのリンクに置き換わります。<cite>なお、HTMLにも<code><cite></code>タグがありますが、あまり関係はありません。</cite></p>
<p><cite>〜</cite>の中には、段落内レベルのタグしか書けません。</p>
複数の要素を組み合わせて使うもの
詳細折りたたみ
<details>〜</details>
折りたたみ要素を表します。
<summary>〜</summary>
要約を表します。<details>要素の最初の子要素として使用します。省略した場合はブラウザ規定の要約が表示されます。
例
<summary>折りたたんでも表示される部分</summary>
折りたたまれている部分
<ul>
<li><a href="https://ch.nicovideo.jp/nico-nico-pedia/blomaga/ar2103515" rel="nofollow" target="_blank">大百科でdetailsタグとsummaryタグが使用可能になりました:ニコニコ大百科ブロマガ(仮):ニコニコ大百科チャンネル(大百科運営)</a></li>
<li><a href="https://ch.nicovideo.jp/nico-nico-pedia/blomaga/ar2105143" rel="nofollow" target="_blank">大百科でrubyタグとrtタグ、rpタグが使用可能になりました:ニコニコ大百科ブロマガ(仮):ニコニコ大百科チャンネル(大百科運営)</a></li>
</ul>
</details>
ルビ
<ruby>〜</ruby>
<rt>〜</rt>
ルビの内容となるテキストを表します。
<rp>〜</rp>
ルビの内容となるテキストを囲む括弧を表します。rubyタグに対応していないブラウザでルビ部分の前後に( )を挿入するのに使用します。
例
<ruby style="margin-right: 0.5em;">不運<rp>(</rp><rt>ハードラック</rt><rp>)</rp></ruby>と<ruby style="margin-right: 0.5em; margin-left: 0.5em;">踊<rp>(</rp><rt>ダンス</rt><rp>)</rp></ruby>っちまったんだよ....</p>
テーブル
<table>〜</table>
表形式のデータを表します。
<caption>〜</caption>
表にタイトルを表します。<table>タグ直下の一番最初に書きます。無くてもかまいません。
<colgroup>〜</colgroup>
1つ以上の列のグループを表します。<caption>タグに次に書きます。無くてもかまいません。1つの<table>タグの中で複数使用できます。
属性
| span | <colgroup>タグの中に<col>タグが無い場合にのみ指定可能です。またがる列数を指定します。 |
|---|
<col>
列グループ内の1つ以上の列を表します。<colgroup>タグの直下に書きます。1つの<colgroup>タグの中で複数使用できます。
属性
| span | またがる列数を指定します。 |
|---|
<thead>〜</thead>
表のヘッダーにあたる行グループを表します。<colgroup>タグの次に書きます。無くてもかまいません。
<tbody>〜</tbody>
表の本体にあたる行グループを表します。<thead>タグの次に書きます。無くてもかまいません。1つの<table>タグの中で複数使用できます。
<tfoot>〜</tfoot>
表のフッターにあたる行グループを表します。<tbody>タグの次に書きます。無くてもかまいません。
<tr>〜</tr>
表の行を表します。行グループを表すタグ (<thead>、<tbody>、<tfoot>) の直下に書きます。1つの行グループの中で複数使用できます。
<th>〜</th>
表のヘッダーセルを表します。<tr>タグ直下に書きます。1つの<tr>タグの中で複数使用できます。
一般的なブラウザでは中のテキストがセンタリングされる要素ですが、ニコニコ大百科のデフォルトスタイルでは左寄せになります。センタリングしたい場合はstyle属性を指定してください。
属性
| abbr | ヘッダーセルの内容の省略形などを指定します。たとえば音声ブラウザなどにおいて、データセルに対応する見出しセルを読み上げる際などに利用されます (一行ごとに「ヘッダーセルの内容」→「データセルの内容」と読み上げるとき、ヘッダーセルの内容が短くないと不便)。 |
|---|
<td>〜</td>
表のデータセルを表します。<tr>タグ直下に書きます。1つの<tr>タグの中で複数使用できます。
属性
| colspan | またがる列数を指定します。 |
|---|---|
| nowrap | 廃止された属性であり、代わりCSSの white-space 使わなければなりませんが、ニコニコ大百科では同プロパティが使えません。 |
| rowspan | またがる行数を指定します。 |
colspan、rowspan属性
セルの結合をします。colspanは横方向 (左→右) に、rowspanは縦 (上→下) に結合します。<td colspan="2">や<td rowspan="2">のように使用します。
colspan、rowspanを指定した場合、そのセルの次の行の同じ列・または隣のセルは記述しません。
例: 簡単な表
<caption>年齢調査</caption>
<thead>
<tr><th>年齢</th><th>男性</th><th>女性</th><th>合計</th></tr>
</thead>
<tfoot>
<tr><th>合計</th><td>400</td><td>120</td><td>520</td></tr></tfoot>
<tbody>
<tr><th>10代</th><td>100</td><td>30</td><td>130</td></tr>
<tr><th>20代</th><td>120</td><td>50</td><td>170</td></tr>
<tr><th>30代</th><td>80</td><td>10</td><td>90</td></tr>
<tr><th>40代以上</th><td>100</td><td>30</td><td>130</td></tr>
</tbody>
</table>
リスト
<ul>〜</ul>
順不同リストを表します。各項目の順序が重要でないリストを作るときに使いましょう。
<ol>〜</ol>
順序つきリストを表します。各項目の先頭に数字が表示されます。順序が関係してくるリストを作るときに使いましょう。
属性
| start | リストが何番目の項目から始まるか指定します。 |
|---|
<li>〜</li>
属性
| value | <li>タグが<ol>タグの中にあるときのみ使用可能です。何番目の項目であるか指定します。 |
|---|
例
<ol>
<li>「牛」、牛を使う。</li>
<li>牛のお肉を、なんかね、味が付いてるの。味付けるの。</li>
<li>なんかね、あんね、外できっと食べたら、食べた事があるはず。</li>
</ol>
<p>(中略)</p>
<ol start="9">
<li>わかんない、あっ、でもあれかも、シチューっぽいかも。</li>
</ol>
下の階層を作成する
<li>タグと</li>タグの中に、<ul>タグ (<ol>タグ) でリストを作成すると入れ子にすることが出来ます。
作るとしても1階層程度でしょう。それ以上作るとややこしいですし、ニコニコ大百科ではインデントが削除されるためソースが見づらくなります。
<li>
リスト1
<ul>
<li>リスト1-1</li>
<li>
リスト1-2
<ul>
<li>リスト1-2-1</li>
</ul>
</li>
<li>
リスト1-3
<ul>
<li>
リスト1-3-1
<ol>
<li>リスト1-3-1-1</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
記述リスト
<dl>〜</dl>
名前と値のグループを複数持つリストを作成します。登場人物紹介とかたくさんある用語の説明など、見出しにするにはちょっと項目数が多すぎるようなものを説明するときに有用です。
<dt>〜</dt>
用語、または名前を表します。対応する<dd>タグの前に置きます。1つの<dd>タグに対し、複数の<dt>タグがあってもかまいません。
<dd>〜</dd>
説明、定義、値を表します。対応する<dt>タグの次に記述します。1つの<dt>タグに対し、複数の<dd>タグがあってもかまいません。
例
これらを使うと以下のようになります。(引用元: ローズ&柴犬りょう)
<dt>りょう（柴犬♀ 11歳）</dt>
<dd>ワンコボーロが大好物。ヒエラルキー最下層。太り気味だが、そこがいい。自宅警備に励むが、近所の猫にはガン無視される。「解せぬ」の発祥地。</dd>
<dt>ローズ（ワカケホンセイインコ♂ 10歳）</dt>
<dd>よくしゃべる。口癖は「ローズ、おはよ！」「緑クリボー」。「リョー！」「お手」「おすわり！」「ワン！」などいろいろしゃべる。別名「ニラ」。デニーロっぽいポーズでにぃにに求愛するが、なかなか実らない。</dd>
<dt>ウッシー</dt>
<dd>あ゙っあ゙っ あ゙っあ゙っあ゙ーっ あ゙ぁ゙ーっ</dd>
</dl>
セレクトボックス
<select>〜</select>
<option>〜</option>
<optgroup>〜</optgroup>
選択式メニュー（セレクトボックス）の選択肢のグループを表します。
例
<option>あいうえお</option>
<option>かきくけこ</option>
<option>さしすせそ</option>
<option>たちつてと</option>
<option>なにぬねの</option>
</select>
共通属性
| 属性名 | 意味 |
|---|---|
style
|
スタイルシートを指定します。スタイルシートについてはニコニコ大百科:CSSプロパティ一覧を参照。 |
ニコニコ大百科で使えない・制限されるHTML
「HTML4.01 Strict」において、ニコニコ大百科で使えない・制限されるHTMLを列挙します。
ニコニコ大百科で使えないタグ
<body>～</body>の外に書かなければならないタグは除きます。
- <address>～</address>
- <area>
- <bdo>～</bdo>
- <big>～</big>
- <form>～</form>と、その中で使うタグ
- <h1>～</h1>
- <map>～</map>
- <noscript>～</noscript>
- <object>～</object>
- <param>～</param>
- <script>～</script>
- <small>～</small>
ニコニコ大百科で使えない属性
- 共通属性
- <a>～</a>
- <del>～</del>
- <ins>～</ins>
- <img>
- テーブル
記述が制限されるタグや属性
- 共通属性
- <a>～</a>
- <abbr>～<abbr>
- <acronym>～</acronym>
- <cite>～</cite>
- <del>～</del>
- ブロック要素を囲むことができない。
- <dfn>～</dfn>
- <i>～</i>
- <img>
- <ins>～</ins>
- ブロック要素を囲むことができない。
- <strong>～<strong>
- テーブル
ニコニコ大百科:CSSプロパティ一覧
スタイルシートについての説明は省略します（知りたい人は各自調べてください）。
ここではニコニコ大百科で使えるものを書き出しておきます。
以降の表に記述されていないプロパティ、値は使えません。
もし記述漏れがあれば追記してください。
書き方
タグの中にstyle属性を指定して記述します。
ほとんどのタグで使えますが、おもに<span>、<p>、<div>、<table>タグで使用します。
例：
「span」以降にある「font-size: xx-small; color: #ff0000;」がスタイルシートです。
style=でスタイルシートですよ、と言ってるようなもんです。
""の中にプロパティ名（コロンの前にあるヤツ。font-sizeとか）を書いていきます。
コロンの後は値です。font-sizeなら「xx-large」って書いてあるのがそうです。
プロパティは一つのタグの中に複数指定できます（例のように）。
プロパティ同士はセミコロンで区切ります。style属性値の末尾にセミコロンがあっても構いません。
同じプロパティ名のプロパティを一つのタグ内に複数指定した場合、後に記述したものが反映されます。
| プロパティ | 意味 | 値 |
|---|---|---|
| background-attachment: | スクロールしたときの背景画像の挙動を指定します。 | fixed scroll |
| background-color: | 背景色です。 | transparent #RRGGBB それぞれ（Red Green Blue）の略です。 値は16進数で表記します（00～FF）。 詳細はニコニコ大百科:CSSでの色指定参照。 |
| background-image: | 背景画像を指定します。 指定できるアドレスは、<img>タグのsrc属性値と同じです。 |
none url(http://example.com/image.png) |
| background-position: xxx yyy | 背景画像の位置を指定します。 横方向・縦方向の順にスペース区切りで記述します。 |
center left right top bottom <単位付きの数値1> |
| background-repeat: | 背景画像の繰り返しを指定します。 | repeat：縦方向・横方向に繰り返す repeat-x：横方向にのみ繰り返す repeat-y：縦方向にのみ繰り返す no-repeat：繰り返さない |
| background: linear-gradient 
|
背景色に線形のグラデーションを指定します | 2つ以上の色を指定することで使用できます。 background:linear-gradient(#RRGGBB,#RRGGBB); background:radial-gradient(#RRGGBB,#RRGGBB); |
| background: radial-gradient
|
背景色に円形のグラデーションを指定します。 | |
| background-size:
|
背景画像のサイズを指定します。 | auto : 自動(初期値) cover : 背景領域に収まる最大サイズ(縦横比保持)画像の縦横比が要素の縦横比と異なる場合は画像の縦横どちらかを切り取ります。 contain : 背景領域が全て隠れるサイズ(縦横比保持) <単位付きの数値1>※ひとつの値(表示幅の指定)のみ使用可能です。高さはautoが適用されるので縦横比は保持されます。 |
| background: aaa bbb ccc xxx yyy zzz | 上記の背景に関する指定を、スペース区切りでまとめて行うことができます。順不同です。 | |
| border-bottom-color: | 枠線の色を指定します。 | #RRGGBB |
| border-left-color: | ||
| border-right-color: | ||
| border-top-color: | ||
| border-color: top right bottom left | ||
| border-bottom-style: | 枠線の形状を指定します。 デフォルトではsolid（1本線）になっています。 ブラウザによって形状の見え方が違うので注意が必要です。 |
solid：1本線 double：2本線（幅が狭いと表示されない） groove：奥にくぼんだ形 ridge：手前にでっぱった形 inset：上と左が濃く、右と下が薄くなる outset：insetの逆 dashed：破線 dotted：点線 |
| border-left-style: | ||
| border-right-style: | ||
| border-top-style: | ||
| border-style: | ||
| border-bottom-width: | 枠線の太さを指定します。 デフォルトではthin（細い）になっています。 |
thin：細い medium：普通 thick：太い <単位付きの数値2> |
| border-left-width: | ||
| border-right-width: | ||
| border-top-width: | ||
| border-width: | ||
| border-radius:
|
枠や画像の角を丸くするための数値を指定します。 border-radius:(左上) (右上) (右下) (左下) |
水平方向と垂直方向の半径を個別に指定したい場合は「/」で区切って指定します。区切らない場合は水平方向も垂直方向も同じ値として扱われます。 <単位付きの数値1> |
| border-bottom: xxx yyy zzz | 上記の枠線に関する指定を、スペース区切りでまとめて行うことができます。順不同です。 | |
| border-left: xxx yyy zzz | ||
| border-right: xxx yyy zzz | ||
| border-top: xxx yyy zzz | ||
| border: xxx yyy zzz | ||
| clear: | 回り込みを解除します。 | none left right both |
| color: | 文字色を指定します。 | #RRGGBB |
| display: | 表示形式を指定します。 | none block inline compact run-in list-item table |
| filter:
|
グラフィック効果を指定します。 | blur()関数：ぼかし brightness()関数：明度 contrast()関数：コントラスト drop-shadow()関数：ドロップシャドウ効果 grayscale()関数：グレースケール hue-rotate()関数：グレースケール invert()関数：色相変換 opacity()関数：不透明度 saturate()関数：彩度 sepia()関数：セピア効果 |
| float: | 回り込みを指定します。 | none left right |
| font-family: | 文字のフォントを指定します。 カンマ区切りで複数記述することができ、左側のフォントほど優先順位が高くなります。 |
Mona IPAMonaPGothic 'IPA モナー Pゴシック' 'MS PGothic AA' 'MS PGothic' 'ＭＳ Ｐゴシック' sans-serif serif cursive fantasy monospace |
| font-size: | 文字の大きさです。 何もしない場合使用しません。 |
上から小～大になっています。指定しなければ通常の文字サイズになります。 xx-small x-small small medium：（既定値） large x-large xx-large これ以外にも単位付きの数値も使用できます。 <単位付きの数値1> |
| font-style: | 文字の形です。 何もしない場合使用しません。 |
normal italic：イタリック体 oblique：斜体 |
| font-weight: | テキストの太さを指定します。 デフォルトは「normal」です。 |
上から順に太くなります 数値キーワード 100 200 300 400normal（既定値） 500 600 700bold 800 900 |
| height: | 高さを指定します。 | <単位付きの数値1> |
| max-height:
|
高さの最大値を指定します。 | <単位付きの数値1> |
| image-rendering:
|
画像の拡大縮小アルゴリズムを指定します。 | auto（初期値） crisp-edges pixelated |
| letter-spacing: | 文字同士の間隔を指定します。 | normal <単位付きの数値3> |
| line-height: | 行の高さ（行送り）を指定します。 | <数値>：emと同じ意味になります。数値では1.0未満は扱えません。emや%で代用してください。 <単位付きの数値1> |
| list-style-image: | リストマーカーとして用いる画像を指定します。 指定できるアドレスは、<img>タグのsrc属性値と同じです。 |
none url(http://example.com/image.png) |
| list-style-position: | リストマーカーの位置を指定します。 | outside inside |
| list-style-type: | リストマーカーとして用いる記号を指定します。 | none disc circle square decimal upper-roman lower-roman upper-alpha lower-alpha |
| list-style: xxx yyy zzz | 上記のリストマーカーに関する指定を、スペース区切りでまとめて行うことができます。順不同です。 | |
| margin-bottom: | 外側の余白を指定します。ボックス要素に使うとインデント風の表示に。 marginで上下左右の余白をまとめて指定する場合、 一方向だけ余白がほしいとき、上記のmarginでは設定できない組み合わせ（たとえば上と右だけ）の方向に余白がほしいときは、margin-***を使います。
|
auto：自動調整 <単位付きの数値2> |
| margin-left: | ||
| margin-right: | ||
| margin-top: | ||
| margin: top right bottom left | ||
| overflow: | はみ出した部分の表示方法を指定します。 | visible hidden scroll auto |
| padding-bottom: | 内側の余白を指定します。 borderを表示させた場合などにどうぞ。 |
<単位付きの数値2> |
| padding-left: | ||
| padding-right: | ||
| padding-top: | ||
| padding: top right bottom left | ||
| text-align: | 文字列の位置を指定します。 | left：左寄せ center：中央寄せ right：右寄せ |
| text-decoration: | 文字列を装飾します。 | none：何もなし underline：下線 overline：上線 line-through：打ち消し線 |
| table-layout: | 表の表示方法を指定します。 | auto fixed |
| text-indent: | 段落の字下げを指定します。 | <単位付きの数値1> |
| text-transform: | 大文字小文字を変換します。 | none lowercase uppercase capitalize |
| vertical-align: | 文字列の縦位置を指定します。 デフォルトはbaselineです。<td>タグのデフォルトはtopです。 |
baseline：ベースラインに揃える top：上揃えにする middle：中央揃えにする bottom：下揃えにする super：上付き文字として揃える sub：下付き文字として揃える text-top：テキストの上揃え text-bottom：テキストの下揃え |
| width | 幅を指定します。 | <単位付きの数値1> |
| max-width
|
幅の最大値を指定します。 | <単位付きの数値1> |
| box-shadow:
|
枠や画像の影を指定します |
box-shadow:X Y #RRGGBB; insetを指定することで枠内に影を付けることができます。 |
| transform: rotate
|
画像や枠の角度を指定することができます |
rotateX、rotateY、rotate3dを使用して奥行きのある枠を作成したい場合は、指定したい枠の前にperspectiveを指定した枠を設定し、その中で使用する必要があります。 <単位付きの数値3> |
| perspective:
|
奥行きの深さを指定します。 | <単位付きの数値3> |
| opacity:
|
枠や画像、文字などの要素の透明度を指定します。 | 0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。 |
<単位付きの数値1>で利用できる単位は、 px|em|pt|mm|cm|in|pc|ex|%です。
<単位付きの数値2>で利用できる単位は、 px|em|pt|mm|cm|in|pc|exです。%は大百科で利用が制限されている単位です。
<単位付きの数値3>で利用できる単位は、 px|em|pt|mm|cm|in|pc|ex|%です。%の利用は大百科では制限されていませんが扱えない単位です。
扱える数値は整数が百の位まで、少数は小数点以下第四位まで。%は少数点以下は扱えません。
CSS3で追加された単位は大百科では扱えません。
関連コミュニティ
関連項目
- テスト記事
- ニコニコ大百科:記事の編集方法
- ニコニコ大百科:編集者向けのページ
- ニコニコ大百科:ガイドブック
- ニコニコ大百科:HTMLテンプレート集
- ニコニコ大百科:HTML各要素のデフォルトCSS
- ニコニコ大百科:CSSでの色指定
- 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
- HTMLカラーコード
オススメ記事(HTMLによる記事の作成参考例)
 編集者向けページ |
|
|---|---|
| マニュアル | 記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン |
| マナー | 編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために |
| 素材 | 素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント |
| テンプレ | お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用 |
| カラー | HTMLカラーコード - CSSでの色指定 |
| 仕様 | 仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴 |
| 依頼 | 一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語 |
| 公式企画 | 百チャレ - 大百科グランプリ |
| ヘルプ | よくある質問 - エラー・不具合情報 |
| 編集者 | 編集者一覧 - ★ - ∞ - ♢ |
| その他 | 今週のオススメ記事 - おすすめトレンド - 急上昇ワード改 |
| ver20231215 | |
脚注
- *なお、非推奨ではあるものの、HTML Standardでも
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">のようなDOCTYPE文字列も許可されています。 - *
反対の用語をもつ、
(HTML Standard 日本語訳の旧式の機能rel属性を代わりに使用する。（たとえば、rev="made"の代わりに、rel="author"を使用する。）より引用) - *
代わりに
(HTML Standard 日本語訳の旧式の機能abbrを使用する。より引用) - *代わりにCSSの
clearを使いましょう。 - *代わりにCSSの
margin、またはtext-alignを使いましょう。 - *代わりにCSSの
text-alignを使いましょう。 - *代わりにCSSの
margin、またはtext-alignを使いましょう。 - *代わりにCSSの
widthを使いましょう。 - *そもそもニコニコ大百科では効果のない属性です。
- *代わりにフレーム内に表示しているHTMLの方で
<body>タグにCSSのoverflowを設定する必要がありますが、niconicoはいずれのサービスの埋め込みコンテンツでもこの設定を行っていないため、この属性に頼らざるを得ません。 - *代わりにCSSの
float、またはvertical-alignを使いましょう。 - *代わりにCSSの
marginを使いましょう。 - *
説明へのリンクのために
(HTML Standard 日本語訳の旧式の機能a要素を使用する、より引用) - *代わりにCSSの
marginを使いましょう。 - *代わりにCSSの
text-alignを使いましょう。 - *代わりにCSSの
float、またはmarginを使いましょう。 - *そもそもニコニコ大百科では効果のない属性です。
- *そもそもニコニコ大百科では効果のない属性です。
- *そもそもニコニコ大百科では効果のない属性です。
- *
(HTML Standard 日本語訳の旧式の機能tableのセクションで指定されたテーブルを記述するための手法のいずれかを代わりに使用する。より引用) - *代わりにCSSの
widthを使いましょう。 - *
曖昧さのない簡潔な方法で始まるテキストを使用し、その後に任意のより精巧なテキストを含める。[…] 見出しである場合、（
(HTML Standard 日本語訳の旧式の機能abbr属性を持つ）thを使用する。より引用) - *代わりにCSSの
text-alignを使いましょう。 - *
代わりに該当する
(HTML Standard 日本語訳の旧式の機能th要素でscope属性を使用する。より引用) - *代わりにCSSの
background-colorなどを使いましょう。 - *ヘッダーセルのIDをスペース区切りで指定しどのヘッダーセルと結びついているか指定する属性ですが、ニコニコ大百科ではヘッダーセル (<td>) のid属性が削除されるため、headers属性は使わないでください。
- *代わりにCSSの
heightを使いましょう。 - *代わりにCSSの
white-spaceを使いましょう。 - *
見出しセルに対して
(HTML Standard 日本語訳の旧式の機能th要素を使用する。より引用) - *代わりにCSSの
vertical-alignを使いましょう。 - *代わりにCSSの
widthを使いましょう。 - *代わりにCSSの
text-alignを使いましょう。 - *
代わりに該当する
(HTML Standard 日本語訳の旧式の機能th要素でscope属性を使用する。より引用) - *代わりにCSSの
vertical-alignを使いましょう。 - *代わりにCSSの
text-alignを使いましょう。 - *代わりにCSSの
vertical-alignを使いましょう。 - *
(HTML Standard 日本語訳の旧式の機能tt要素がキーボード入力をマークアップするために使用されるであろう場所において、kbd要素を考慮する。変数に対しては、var要素を考慮する。コンピューターコードに対しては、code要素を考慮する。コンピューター出力に対しては、samp要素を考慮する。より引用) - *なお、HTMLにも
<cite>タグがありますが、あまり関係はありません。
親記事
子記事
- なし
兄弟記事
- テスト記事
- ニコニコ大百科での記事の書き方
- 編集履歴
- ニコニコ大百科:仕様
- ニコニコ大百科:編集者一覧
- ニコニコ大百科:記事の編集方法
- ニコニコ大百科:Wikipediaとの相違点
- ニコニコ大百科:HTMLテンプレート集
- ニコニコ大百科:HTMLエディタヘルプ
- ニコニコ大百科:素材集
- リビジョン番号
- ページ番号
- ニコニコ大百科:お知らせ表示の一覧
- ニコニコ大百科:ユーザーボックスの一覧
- 編集競合
- 記事編集初心者へ
- 編集合戦
- ニコニコ大百科:編集時のマナー
- 記事名変更機能
- 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
- 白紙化
- まだ単語記事が作られていないポピュラーなタグ一覧
- 作品テンプレートの一覧
- ニコニコ大百科:テンプレートボックス
- ニコニコ大百科:∞
- ニコニコ大百科:★
- ニコニコ大百科:Twitter引用
- ニコニコ大百科:右カラム
- 編集テスト
- ニコニコ大百科:◇
- ニコニコ大百科:初版作成日
- ニコニコ大百科:パンくずリスト
- ニコニコ大百科:最終更新日
- 記事編集依頼の一覧
▶もっと見る
掲示板
-
395 ななしのよっしん
2024/03/10(日) 20:12:03 ID: cW+45qdQ4Y
-
👍1👎0
-
396 ななしのよっしん
2024/05/25(土) 06:37:13 ID: 07f6I8kQNf
pタグ増殖バグっていつからあるんだ
かなり目立つでかいバグな気がするが -
👍1👎0
-
397 ななしのよっしん
2024/08/22(木) 01:02:04 ID: BAvaMERpyF
ネタバレで白文字にするやつスマホだと見づらいからホバー時に表示されるようにしたいけどどうやっても消されてしまう
折りたたみや改行で伏せるほどの長文ではないけど重大なネタバレだから隠したい -
👍0👎0
おすすめトレンド
ニコニ広告で宣伝された記事
急上昇ワード改
- 432
- 196
- 248
- 33
- 378
最終更新：2024/11/07(木) 22:00
- 430
- 106
- 58
- 319
- 378
最終更新：2024/11/07(木) 22:00
ウォッチリストに追加しました！
すでにウォッチリストに
入っています。
追加に失敗しました。
ほめた！
ほめるを取消しました。
ほめるに失敗しました。
ほめるの取消しに失敗しました。