単語記事: ニコニコ大百科:HTMLタグ一覧

編集

ニコニコ大百科で使えるタグスタイルシート一覧と解説です。文法については、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>
<dfn>
<div> align[6]
<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
<ol> start
<p> align[15]
<pre>
<q> cite
<samp>
<span>
<strong>
<sub>
<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]
<tfoot>
<th> abbr align[32] axis[33] headers valign[34]
<thead>
<tr> align[35] valign[36]
<tt>[37]
<ul>
<var>
コメント (<!-- -->)
脚注 (<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>(内容) まず、このようにリンク先にアンカー打ち込みます。基本的に内側には何も書けません。
<a name="hoge" id="hoge"></a>(内容) 編集後はid属性が付加されます。アンカー名を修正する場合は、nameid両方とも変更しなければいけません。
<a href="記事のURL#hoge">(内容) に飛びます!</a> リンク元ではこのようにします。同じページの「hogeアンカーに飛ぶ場合は記事のURL省略です。
例えば、<a href="http://dic.nicovideo.jp/a/ニコニコ大百科%3AHTMLタグ一覧#ext2">このリンクニコニコ大百科:HTMLタグ一覧の一番最後の項へ飛びます</a>。

<abbr>〜</abbr>

略称頭字語 (頭文字を並べたもの) を表します。title属性で展開形 (正式名称) を表しますが、ニコニコ大百科ではtitle属性は使えません。

HTMLウェブページを記述するための言である。
<abbr>HTML</abbr>はウェブページを記述するための言である。

<b>〜</b>

意味的に区別したいテキストを表します。見出しを表すときは<h2>タグなど、強勢は表すときは<em>タグ、重要性を表すときは<strong>タグを使ってください。

ニコニコ大百科で使えるタグスタイルシート一覧と解説です。
<b>ニコニコ大百科</b>で使える<b>タグ</b>・<b>スタイルシート</b>の一覧と解説です。

<blockquote>〜</blockquote>

引用を表します。出典は外に書く必要があります。

属性

cite 引用元のURL定します。

blockquote 要素は、別のソースから引用された一節を表現する。

blockquote の内側にある内容は、別のソースから引用されていなければならない。 その引用アドレスがあれば, それを cite 属性にあてがってよい。

(HTML Standard — Grouping content(日本語訳)より)

<blockquote cite="https://triple-underscore.github.io/HTML-grouping-ja.html#the-blockquote-element">
<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 StandardGrouping content日本語訳)</a>より)</p>

<br>

文や住所などにおける改行を表します。このタグは終了タグがありません。

※上記のように<br>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください!

例えば、Vistaで使われている「メイリオフォントXPまでの「MS Pゴシック」とべて幅が広いので、レイアウトが盛大に崩れる恐れがあります。他にもMacで使われているヒラギノフォントは、また幅が異なります。

長文は<br>で折り返さず、幅いっぱいまで書いて勝手に折り返るのに任せた方が安全です。

170-0013<br />東京都豊島区池袋1‐5035<br />池袋P’PARCO B1F,B2F<br />ニコニコ本社

<code>〜</code>

コンピュータコードの断片を表します。

<code style="border: 1px solid #99ccff; padding: 1em;">&lt;a href="http://dic.nicovideo.jp/"&gt;ニコニコ大百科&lt;/a&gt;</code>

<del>〜</del>

文書から削除した部分を表します。<ins>タグと合わせて、文書に対する編集を表すタグとして用いられます。

打ち消されました。
<del>打ち消されました。</del>

<dfn>〜</dfn>

の定義を表します。

HTMLウェブページを記述するための言である。
<dfn>HTML</dfn>はウェブページを記述するための言である。

<div>〜</div>

意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。class、langtitle属性定することで中身に意味を持たせることもできますが、いずれもニコニコ大百科では使えません。

<div>〜</div>

意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。class、langtitle属性定することで中身に意味を持たせることもできますが、いずれもニコニコ大百科では使えません。

<article>、<section>、<nav> など適切なタグがあれば……というものの、ニコニコ大百科では使用できるタグなどが制限されているため、難しいかもしれません。

この例では、セクション全体にまとめてスタイルを設定しています。

<div style="background: beige; border: seagreen dotted 0.5em; color: forestgreen;">
<h3>&lt;div&gt;〜&lt;/div&gt;</h3>
<p>意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。class、langtitle属性定することで中身に意味を持たせることもできますが、いずれもニコニコ大百科では使えません。</p>
<p>&lt;article&gt;、&lt;section&gt;、&lt;nav&gt; など適切なタグがあれば……というものの、ニコニコ大百科では使用できるタグなどが制限されているため、難しいかもしれません。</p>
<p>この例では、セクション全体にまとめてスタイルを設定しています。</p>
</div>

<em>〜</em>

強勢 (アクセント、発音上の強調) を表します。

以下の例は、動物の種類が論点になっていることを表します。仕様書の<em>タグの例がわかりやすいので、参照してください。

<h2>〜</h2>・<h3>〜</h3>・<h4>〜</h4>など

見出しです。新規作成時に見出しとなる部分に使われているアレです。数字の部分は階級 (※レベルではなく) と呼ばれます。<h1>は記事タイトルのみに使用されるため、ニコニコ大百科の記事編集で使用できるのは<h2>から<h6>までです。

階級は適切なものを利用しましょう。例えば<h2>の次に<h4>が登場した場合、レベルは1つしか下がらないので、構造などがわかりづらくなります。

h2のサンプル
h3のサンプル
h4のサンプル
h5のサンプル
h6のサンプル
<h2>h2のサンプル</h2>
<h3>h3のサンプル</h3>
<h4>h4のサンプル</h4>
<h5>h5のサンプル</h5>
<h6>h6のサンプル</h6>

これは次のようなアウトラインを生成します。

  1. h2のサンプル
    1. h3のサンプル
      1. h4のサンプル
        1. h5のサンプル
          1. h6のサンプル

不適切な例

h2のサンプル
h4のサンプル
h3のサンプル
h2のサンプル
<h2>h2</h2>
<h4>h4</h3>
<h3>h3</h3>
<h2>h2</h2>

これは見たに反して次のようなアウトラインを生成します。

  1. h2
    1. h4
    2. h3
  2. h2

<hr>

段落レベルでのテーマの変わりを表します。

CSSで見たを変えたい場合、左寄せ・右寄せは width で幅を設定して margin を使用、線の色は border-color を使用します。

組み合わせの例

ニコニコ大百科 と入してください。

<kbd>ニコニコ大百科</kbd> と入してください。


ニコニコ大百科 と入されました。

<samp><kbd>ニコニコ大百科</kbd></samp> と入されました。


メニューから その他▼大百科 を開きます。

メニューから <kbd><kbd><samp>その他▼</samp></kbd> → <kbd><samp>大百科</samp></kbd></kbd> を開きます。


Ctrl + C で選択した文字列をクリップボードコピーできます。

<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> で選択した文字列をクリップボードコピーできます。

<h3>組み合わせの例</h3>
<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>&lt;kbd&gt;ニコニコ大百科&lt;/kbd&gt; と入してください。</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>&lt;samp&gt;&lt;kbd&gt;ニコニコ大百科&lt;/kbd&gt;&lt;/samp&gt; と入されました。</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>メニューから &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;その他▼&lt;/samp&gt;&lt;/kbd&gt; → &lt;kbd&gt;&lt;samp&gt;大百科&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt; を開きます。</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>&lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt;&lt;/kbd&gt; で選択した文字列をクリップボードコピーできます。 </code></p>

<i>〜</i>

本文と異なるや雰囲気、または技術用、頭の中で考えていることなど通常の文から区別したい部分を表します。

なお、デフォルトスタイルはイタリック体 (斜体) ですが、メイリオなど一部の日本語フォントでは和文部が斜体になりません (メイリオの場合、通常の文字を斜体フォントとしてそのままコピーしているため)。使用する際、スタイルの設定には注意が必要かもしれません。

(あやしい……!)

は急いで彼を追った。

<p><i>(あやしい……!)</i></p>
<p>は急いで彼を追った。</p>

<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定できるURLは以下の通りです。

画像の種類 URL
お絵カキコ http://dic.nicovideo.jp/oekaki/〜.png
お絵カキコサムネイル http://dic.nicovideo.jp/oekaki_thumb/〜.png
ニコニコ動画サムネイル http://tn-skr.smilevideo.jp/smile?i=〜
ニコニコミュニティシンボル http://icon.nicovideo.jp/community/co〜.jpg
ニコニ・コモンズサムネイル http://deliver.niconicommons.jp/thumbnail/nc〜?size=l

ニコニコ大百科 (仮)

<ins>〜</ins>

文書へ追加した部分を表します。<del>タグと合わせて、文書に対する編集を表すタグとして用いられます。

日本の人口は平成17年10月1日現在1億2776万7994
日本の人口は<ins>平成17年10月1日現在、</ins>1億2776万7994

<kbd>〜</kbd>

ユーザーを表します。

Ctrl+Cで選択した文字列をクリップボードコピーできます。
<kbd style="padding: 0.2em;"><kbd style="border: outset #000000;">Ctrl</kbd>+<kbd style="border: outset #000000;">C</kbd></kbd>で選択した文字列をクリップボードコピーできます。

<p>〜</p>

段落を表します。

画像などの回り込みを解除したい場合 <p style="clear: both;">〜</p> を定してください。

ニコニコ大百科で使えるタグスタイルシート一覧と解説です。文法については、HTMLの簡単な説明を参照してください。

htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。アルファベット順にならんでいます。

<p>ニコニコ大百科で使えるタグスタイルシート一覧と解説です。文法については、<b><a href="http://dic.nicovideo.jp/a/html#grammar">HTMLの簡単な説明</a></b>を参照してください。</p>
<p>htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。アルファベット順にならんでいます。</p>

<pre>〜</pre>

整形済みのテキストであることを表します。たとえば、メールの内容、コンピューターコード片、アスキーアートなどを表示するときに利用します。

アスキーアートの表示について詳しくはアスキーアート#ニコニコ大百科編集用テンプレートニコニコ大百科:HTMLテンプレート集#AAを正しく表示するを参照してください。

ニコニコ大百科:HTMLタグ一覧
===========================
概要
----
ニコニコ大百科で使えるタグスタイルシート一覧と解説です。
文法については、 **[HTMLの簡単な説明]** を参照してください。

htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。
アルファベット順にならんでいます。

ニコニコ大百科HTMLには、「HTML4.01 Strict」で使われていたDOCTYPE文字列が記述されていますが、内容はHTML Standard (旧称HTML5) に近い構文となっています。

[HTMLの簡単な説明]: http://dic.nicovideo.jp/a/html#grammar

ニコニコ大百科で使用できるタグ属性一覧
------------------------------------------
- (共通属性)
    + style
- <a>
    + href
    + rel
    + target
        
<pre><code>ニコニコ大百科:HTMLタグ一覧
===========================
概要
----
ニコニコ大百科で使えるタグスタイルシート一覧と解説です。
文法については、 **[HTMLの簡単な説明]** を参照してください。

htmlエディタでは編集できない・編集しづらい部分でタグを使いたい、でもタグがわからないという人、タグを知っていてもどのタグが使えるかわからないという人、スタイルシートを使いたい人向けなどに書いておきます。
アルファベット順にならんでいます。

[HTMLの簡単な説明]: http://dic.nicovideo.jp/a/html#grammar

ニコニコ大百科で使用できるタグ属性一覧
------------------------------------------
- (共通属性)
    + style
- &lt;a&gt;
    + href
    + rel
    + target</code></pre>

また、アスキーアートを正しく表示させる的でもよく使われます。詳しくはアスキーアート#ニコニコ大百科編集用テンプレートニコニコ大百科:HTMLテンプレート集#AAを正しく表示するを参照してください。

<samp>〜</samp>

プログラムコンピューターシステムからの出を表します。

<a>タグを使うと、以下のようにリンクることができます。

ニコニコ大百科
<p><code>&lt;a&gt;</code>タグを使うと、以下のようにリンクることができます。</p>
<samp style="display: block; border: 1px solid #99ccff; padding: 1em;"><a href="http://dic.nicovideo.jp/">ニコニコ大百科</a></samp>

<span>〜</span>

意味を持たないタグです。他に適切なタグがあればそちらに置き換えましょう。

<strong>〜</strong>

強い重要性、真剣さ、緊急性などを表します。<em>タグなどとは違い、文の意味は変わりません。

文や住所などにおける改行を表します。このタグは終了タグがありません。

※上記のように<br>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください!

<p>文や住所などにおける改行を表します。このタグは終了タグがありません。</p>
<p><strong style="color: red;">※上記のように<code>&lt;br&gt;</code>は本来見栄えの調整やリストに使うタグではありません。安易に使用せず、自分以外の環境での見え方のことを熟慮してください!</strong></p>

<sub>〜</sub>

下付き文字を表します。

H2O
H<sub>2</sub>O

<sup>〜</sup>

上付き文字を表します。

πr2
πr<sup>2</sup>

<var>〜</var>

変数を表します。

0::/txt='テスト';dt(txt)
0::/<var>txt</var>='テスト';dt(<var>txt</var>)

<q>〜</q>

引用を表します。出典は外に書く必要があります。<q>タグを使った場合、引用符や鍵括弧などを使ってはいけません。

ニコニコ大百科では引用符がCSSで非表示にされているため、<q>タグは使わず、代わりに引用文を鍵括弧などで囲んだ方が良いでしょう。

属性

cite 引用元のURL定します。

ニコニコ大百科:Wikipediaとの相違点には、基本方針は、「ニコニコ大百科の記事は、面くて迷惑をかけなければOK」です。と書かれています。
ニコニコ大百科:Wikipediaとの相違点には、<q cite="http://dic.nicovideo.jp/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91%3Awikipedia%E3%81%A8%E3%81%AE%E7%9B%B8%E9%81%95%E7%82%B9" style="font-style: oblique;">基本方針は、「ニコニコ大百科の記事は、面くて迷惑をかけなければOK」です。</q>と書かれています。

<!--〜-->

コメントを記述する構文で、タグとは呼ばれません。囲んだテキストを閲覧時・htmlエディタ使用時に非表示にします (元から存在しないものとして扱う)。ソースには残るので、編集者向けの註釈などに使えます。

<!-- このテキスト編集者によりコメントアウトされています -->

<cite>〜</cite>

脚注を作ります。ニコニコ大百科特有の構文です。表示されるときは脚注へのリンクに置き換わります。[38]

<cite>〜</cite>の中には、段落レベルタグしか書けません。

<cite>〜</cite>

脚注を作ります。ニコニコ大百科特有の構文です。表示されるときは脚注へのリンクに置き換わります。[1]

<cite>〜</cite>の中には、段落レベルタグしか書けません。

  1. *なお、HTMLにも<cite>タグがありますが、あまり関係はありません。
<h3><a name="cite" id="cite"></a>&lt;cite&gt;〜&lt;/cite&gt;</h3>
<p>脚注を作ります。ニコニコ大百科特有の構文です。表示されるときは脚注へのリンクに置き換わります。<cite>なお、HTMLにも<code>&lt;cite&gt;</code>タグがありますが、あまり関係はありません。</cite></p>
<p>&lt;cite&gt;〜&lt;/cite&gt;の中には、段落レベルタグしか書けません。</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 止された属性であり、代わりCSSwhite-space 使わなければなりませんが、ニコニコ大百科では同プロパティが使えません。
rowspan またがる行数を定します。
colspan、rowspan属性

セルの結合をします。colspanは横方向 (左→右) に、rowspanは縦 (上→下) に結合します。<td colspan="2">や<td rowspan="2">のように使用します。

colspan、rowspan定した場合、そのセルの次の行の同じ列・または隣のセルは記述しません。

例: 簡単な表

年齢調
年齢 男性 女性 合計
合計 400 120 520
10代 100 30 130
20代 120 50 170
30 80 10 90
40代以上 100 30 130
<table>
<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>

1つのリストを表します。

属性
value <li>タグが<ol>タグの中にあるときのみ使用可です。何番の項であるか定します。

<ul>
<li>晴れ</li>
<li>曇り</li>
<li></li>
</ul>

ビーフストロガノフの作り方

  1. 」、を使う。
  2. のおを、なんかね、味が付いてるの。味付けるの。
  3. なんかね、あんね、外できっと食べたら、食べた事があるはず。

(中略)

  1. わかんない、あっ、でもあれかも、シチューっぽいかも。
<p>ビーフストロガノフの作り方</p>
<ol>
<li>「」、を使う。</li>
<li>のおを、なんかね、味が付いてるの。味付けるの。</li>
<li>なんかね、あんね、外できっと食べたら、食べた事があるはず。</li>
</ol>
<p>(中略)</p>
<ol start="9">
<li>わかんない、あっ、でもあれかも、シチューっぽいかも。</li>
</ol>

下の階層を作成する

<li>タグと</li>タグの中に、<ul>タグ (<ol>タグ) でリストを作成すると入れ子にすることが出来ます。

作るとしても1階層程度でしょう。それ以上作るとややこしいですし、ニコニコ大百科ではインデント削除されるためソースが見づらくなります。

<ul>
<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>タグがあってもかまいません。

定義である場合、中身を<dfn>タグで囲みます。

<dd>〜</dd>

説明、定義、値を表します。対応する<dt>タグの次に記述します。1つの<dt>タグに対し、複数の<dd>タグがあってもかまいません。

これらを使うと以下のようになります。(引用元: ローズ&柴犬りょう)

りょう柴犬 11歳)
ワンコボーロが大好物。ヒエラキー最下層。太り気味だが、そこがいい。自宅警備に励むが、近所のにはガン視される。「解せぬ」の発祥地。
ローズワカケホンセイインコ 10歳)
よくしゃべる。口癖は「ローズ、おはよ!」「クリボー」。「リョー!」「お手」「おすわり!」「ワン!」などいろいろしゃべる。別名「ニラ」。デニーロっぽいポーズにぃにするが、なかなか実らない。
ウッシー
あ゙っあ゙っ あ゙っあ゙っあ゙ーっ あ゙ぁ゙ーっ
<dl>
<dt>りょう柴犬 11歳)</dt>
<dd>ワンコボーロが大好物。ヒエラキー最下層。太り気味だが、そこがいい。自宅警備に励むが、近所のにはガン視される。「解せぬ」の発祥地。</dd>
<dt>ローズワカケホンセイインコ 10歳)</dt>
<dd>よくしゃべる。口癖は「ローズ、おはよ!」「クリボー」。「リョー!」「お手」「おすわり!」「ワン!」などいろいろしゃべる。別名「ニラ」。デニーロっぽいポーズにぃにするが、なかなか実らない。</dd>
<dt>ウッシー</dt>
<dd>あ゙っあ゙っ あ゙っあ゙っあ゙ーっ あ゙ぁ゙ーっ</dd>
</dl>

共通属性

すべてのタグで使用できる属性です。

属性 意味
style スタイルシート定します。スタイルシートについてはニコニコ大百科:CSSプロパティ一覧を参照。

ニコニコ大百科で使えない・制限されるHTML

HTML4.01 Strict」において、ニコニコ大百科で使えない・制限されるHTMLを列挙します。

ニコニコ大百科で使えないタグ

<body>~</body>の外に書かなければならないタグは除きます。

ニコニコ大百科で使えない属性

記述が制限されるタグや属性

ニコニコ大百科:CSSプロパティ一覧

スタイルシートについての説明は省略します(知りたい人は各自調べてください)。
ここではニコニコ大百科で使えるものを書き出しておきます。

以降の表に記述されていないプロパティ、値は使えません。
もし記述漏れがあれば追記してください。

書き方

タグの中にstyle属性定して記述します。
ほとんどのタグで使えますが、おもに<span>、<p>、<div>、<table>タグで使用します。

例:

っちゃいますよ?
<span style= "font-size: xx-large; color: #ff0000;">怒</span>っちゃいますよ?

「span」以降にある「font-size: xx-small; color: #ff0000;」がスタイルシートです。
style=でスタイルシートですよ、と言ってるようなもんです。
""の中にプロパティ名(コロンの前にあるヤツ。font-sizeとか)を書いていきます。
コロンの後は値です。font-sizeなら「xx-large」って書いてあるのがそうです。
プロパティは一つのタグの中に複数定できます(例のように)。
プロパティ同士はセミコロンで区切ります。style属性値の末尾にセミコロンがあっても構いません。
同じプロパティ名のプロパティを一つのタグ内に複数定した場合、後に記述したものが反映されます。

プロパティ 意味
background-attachment: スクロールしたときの背景画像の挙動を定します。 fixed
scroll
background-color: 背景色です。 #RRGGBB
それぞれ(Red Green Blue)の略です。
値は16進数で表記します(00~FF)。
background-image: 背景画像を定します。
定できるアドレスは、<img>タグのsrc属性値と同じです。
none
url(http://example.com/image.png)
background-position: xxx yyy 背景画像の位置を定します。
横方向・縦方向の順にスペース区切りで記述します。
center
left
right
top
bottom
<単位付きの数値>
background-repeat: 背景画像の繰り返しを定します。 repeat:縦方向・横方向に繰り返す
repeat-x:横方向にのみ繰り返す
repeat-y:縦方向にのみ繰り返す
no-repeat:繰り返さない
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:太い
<単位付きの数値>
border-left-width:
border-right-width:
border-top-width:
border-width:
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
float: 回り込みを定します。 none
left
right
font-family: 文字フォント定します。
カンマ区切りで複数記述することができ、左側のフォントほど優先順位が高くなります。
Mona
IPAMonaPGothic
'IPA モナー Pゴシック'
'MS PGothic AA'
'MS PGothic'
'MSゴシック'
sans-serif
serif
font-size: 文字の大きさです。
何もしない場合使用しません。
上から小~大になっています。定しなければ通常の文字サイズになります。
xx-small
x-small
small
medium:(既定値)
large
x-large
xx-large
これ以外にも単位付きの数値も使用できます。
<単位付きの数値>
font-style: 文字の形です。
何もしない場合使用しません。
normal
italic:イタリック
oblique:斜体
font-weight: テキストの太さを定します。
デフォルトは「normal」です。
ニコニコ大百科ではnormalとboldしか対応していません。
normal
bold
height: 高さを定します。 <単位付きの数値>
letter-spacing: 文字同士の間隔を定します。 normal
<単位付きの数値>
line-height: 行の高さ(行送り)を定します。 <数値>:emと同じ意味になります。
<単位付きの数値>
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で上下左右の余白をまとめて定する場合、
  • 数値を1つだけ定:上下左右一括
  • 数値を2つ定:順に「上下」「左右」
  • 数値を3つ定:順に「上」「左右」「下」
  • 数値を4つ定:順に「上」「右」「下」「左」
一方向だけ余白がほしいとき、上記のmarginでは設定できない組み合わせ(たとえば上と右だけ)の方向に余白がほしいときは、margin-***を使います。
なお、margin-leftとmargin-rightを両方auto定すると中央えの効果が得られます。
auto:自動調整
<単位付きの数値>
margin-left:
margin-right:
margin-top:
margin: top right bottom left
overflow: はみ出した部分の表示方法を定します。 visible
hidden
scroll
auto
padding-bottom: 内側の余白定します。
borderを表示させた場合などにどうぞ。
<単位付きの数値>
padding-left:
padding-right:
padding-top:
padding: bottom right left top
text-align: 文字列の位置を定します。 left:左寄せ
center:中央寄せ
right:右寄せ
text-decoration: 文字列を装飾します。 none:何もなし
underline:下線
overline:上線
line-through:打ち消し線
table-layout: 表の表示方法を定します。 auto
fixed
text-indent: 段落の字下げを定します。 <単位付きの数値>
text-transform: 文字文字を変換します。 none
lowercase
uppercase
capitalize
vertical-align: 文字列の縦位置を定します。
デフォルトbaselineです。<td>タグデフォルトtopです。
baselineベースラインえる
top:上えにする
middle:中央えにする
bottom:下えにする
super:上付き文字としてえる
sub:下付き文字としてえる
text-topテキストの上
text-bottomテキストの下
width 幅を定します。 <単位付きの数値>

<単位付きの数値>で利用できる単位は、 px|em|pt|mm|cm|in|pc|ex|%です。

関連商品

関連コミュニティ

関連項目

オススメ記事(HTMLによる記事の作成参考例)

脚注

  1. *なお、非推奨ではあるものの、HTML Standardでも <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> のようなDOCTYPE文字列も許可されています。
  2. *反対の用をもつ、rel属性を代わりに使用する。(たとえば、rev="made"の代わりに、rel="author"を使用する。) (HTML Standard 日本語訳の旧式の機能より引用)
  3. *代わりにabbrを使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  4. *代わりにCSSclear を使いましょう。
  5. *代わりにCSSmargin、または text-align を使いましょう。
  6. *代わりにCSStext-align を使いましょう。
  7. *代わりにCSSmargin、または text-align を使いましょう。
  8. *代わりにCSSwidth を使いましょう。
  9. *そもそもニコニコ大百科では効果のない属性です。
  10. *代わりにフレーム内に表示しているHTMLの方で <body> タグCSSoverflow を設定する必要がありますが、niconicoはいずれのサービスの埋め込みコンテンツでもこの設定を行っていないため、この属性に頼らざるを得ません。
  11. *代わりにCSSfloat、または vertical-align を使いましょう。
  12. *代わりにCSSmargin を使いましょう。
  13. *説明へのリンクのためにa要素を使用する、 (HTML Standard 日本語訳の旧式の機能より引用)
  14. *代わりにCSSmargin を使いましょう。
  15. *代わりにCSStext-align を使いましょう。
  16. *代わりにCSSfloat、または margin を使いましょう。
  17. *そもそもニコニコ大百科では効果のない属性です。
  18. *そもそもニコニコ大百科では効果のない属性です。
  19. *そもそもニコニコ大百科では効果のない属性です。
  20. *tableのセクションで定されたテーブルを記述するための手法のいずれかを代わりに使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  21. *代わりにCSSwidth を使いましょう。
  22. *曖昧さのない簡潔な方法で始まるテキストを使用し、その後に任意のより精巧なテキストを含める。[…] 見出しである場合、(abbr属性を持つ)thを使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  23. *代わりにCSStext-align を使いましょう。
  24. *代わりに該当するth要素でscope属性を使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  25. *代わりにCSSbackground-color などを使いましょう。
  26. *ヘッダーセルIDスペース区切りで定しどのヘッダーセルと結びついているか定する属性ですが、ニコニコ大百科ではヘッダーセル (&lttd>) のid属性削除されるため、headers属性は使わないでください。
  27. *代わりにCSSheight を使いましょう。
  28. *代わりにCSSwhite-space を使いましょう。
  29. *見出しセルに対してth要素を使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  30. *代わりにCSSvertical-align を使いましょう。
  31. *代わりにCSSwidth を使いましょう。
  32. *代わりにCSStext-align を使いましょう。
  33. *代わりに該当するth要素でscope属性を使用する。 (HTML Standard 日本語訳の旧式の機能より引用)
  34. *代わりにCSSvertical-align を使いましょう。
  35. *代わりにCSStext-align を使いましょう。
  36. *代わりにCSSvertical-align を使いましょう。
  37. *tt要素がキーボードマークアップするために使用されるであろう場所において、kbd要素を考慮する。変数に対しては、var要素を考慮する。コンピューターコードに対しては、code要素を考慮する。コンピューターに対しては、samp要素を考慮する。 (HTML Standard 日本語訳の旧式の機能より引用)
  38. *なお、HTMLにも<cite>タグがありますが、あまり関係はありません。

【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91%3Ahtml%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7
ページ番号: 96827 リビジョン番号: 2481078
読み:ニコニコダイヒャッカエイチティーエムエルタグイチラン
初版作成日: 08/05/19 06:48 ◆ 最終更新日: 17/04/19 15:47
編集内容についての説明/コメント: 関連商品を新版に差替
記事編集 / 編集履歴を閲覧

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

お絵カキコがありません

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

ピコカキコがありません

ニコニコ大百科:HTMLタグ一覧について語るスレ

311 : ななしのよっしん :2016/10/01(土) 10:15:40 ID: kth4NIowaG
>>310
かなり昔に要望が出たこともあったようですが、実現しませんでした。スマホ版のレイアウトがなかったか未完成の頃だったような気がするので、もう一度要望したら変わるかもしれませんが、現在運営の体制では、仕様善される可性がゼロに近いです。

現在仕様への対策としては、divフレームを使用する方法がありますが、スクロールが難しくなるのと、視野がdivフレーム内に制限されて狭くなるので個人的には反対です。

記事を分割するもしくは、ページアンカーを用いて次を作成するといった方法をがよいのではないかと思います。
自分の書いたもので恐縮ですが、次にするなら以下のような形です。
http://dic.nicovideo.jp/id/5366699

上級者になると、div フレームアンカーを組み合わせてタブ表示を作ったりする人もいますが、普通の人が編集できなくなるのでおすすめしません。
312 : ななしのよっしん :2017/01/21(土) 23:13:49 ID: JyW+jnggTe
すみません、箇条書きの二列化のやり方が分からなくて解説記事探しているのですが、ここにも載ってなくて(読み逃したか?)お手上げです。どうやったらできますか?
313 : ななしのよっしん :2017/01/22(日) 00:40:40 ID: edhK5zkmZc
>>312
まずエディタで1列2行の表を作って、それぞれのセルに箇条書きを載せる。次にエディタオフにして2箇所の「<td>」を「<td style="border: 0;">」に書き換える。最後にエディタを再びオンにすれば箇条書きの二列化ができるようになる。
314 : ななしのよっしん :2017/01/22(日) 00:47:15 ID: l2uOUk0AVT
>>312
凝ったレイアウトを作りたい人向け:スタイルシート活用講座
にある「tableで3列2段のボックスをつくる」が近いかと思われます
これを箇条書きにして2列にした例↓↓↓
<table style="width: 100%;">
<tbody>
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
(省略しています。全て読むにはこのリンクをクリック!)
315 : ななしのよっしん :2017/04/18(火) 18:48:51 ID: ttQx4r+Yvx
http://dic.nicovideo.jp/a/%E5%A4%A7%E8%85%B8%E7%B7%A8%E3%83%89%E3%83%90%E3%81%88%E3%82%82%E3%82%93%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA
この記事で動画サムネイルHTMLでトリミングして用いた一覧表を作ったのですが、PC版だと綺麗に表示されるのにスマホ版で見るとサムネイル画像だけがすごく小さくなってしまいます…(記事はいわゆる「淫夢系」なので耐性のない方は注意)
http://dic.nicovideo.jp/u/29855722
自分のマイページで色々編集を試してみたのですが、どれもスマホ版のみサムネイルがちゃんとしたサイズで表示されず困っています(編集履歴で見られます)。どうにかなりませんでしょうか?
316 : ななしのよっしん :2017/04/19(水) 02:10:31 ID: 5KQK96F4pU
>>315
プレミアム会員じゃないので試せませんが
<img width="90" height="90" src="http://dic.nicovideo.jp/oekaki/******.png" />
これのwidthとheightの数値をpxの単位に置き換えてみるのはどうでしょうか?もしくは%と付け加えてみるとか
317 : 314 :2017/04/19(水) 09:31:06 ID: ttQx4r+Yvx
>>316
ご回答ありがとうございます、ただimg属性においてwidth,heightの値は単位なししか使えないんですよね…
後、正方形お絵カキコスマホ版でも正常に表示されています。スマホ版で異様に小さくなるのは縦長のサムネ画像のみです…
318 : ななしのよっしん :2017/04/19(水) 15:41:35 ID: e4h7pHsf7N
>>317
width属性とheight属性は「style="width:90px;height:90px;"」で代替出来るのでは?
319 : ななしのよっしん :2017/04/20(木) 00:11:33 ID: l2uOUk0AVT
>>315
原因はおそらく、スマホ版で定してあるmax-widthだと思われます
本来ならこれを解除してあげればいいだけなんですが、大百科仕様で使えないんですよね・・・
他にも色々と試してみましたが理でした・・・
320 : ななしのよっしん :2017/04/21(金) 08:05:49 ID: ttQx4r+Yvx
>>318>>319
過去に同じようにサムネ画像を貼っ付けた記事は普通に表示されているのでに思っていましたが、表の中に入れるとどのように配置してもサムネ画像の表示が崩れるようです…(表の外に貼ると普通に表示される)
おそらくこれ以上はどうにもならないので、ここで解決とさせていただきます、アドバイスありがとうございました
  JASRAC許諾番号: 9011622001Y31015