ニコニコ大百科:HTMLタグ一覧

ニコニコ大百科:HTMLタグ一覧

ニコニコ大百科で使える（と思う）タグ一覧と解説です。文法については→ HTMLの簡単な説明参照

HTMLエディタが表示されている場合は見る必要はないでしょうけど、
万が一表示されていない場合にタグを使いたい、でもタグがわからない……という人、
タグを知っていてもどのタグが使えるかわからない、
といった人向けに書いておきます。
アルファベット順にならんでいます。多分。

ニコニコ大百科は2008年9月17日現在、「HTML4.01 Strict DTD」（標準準拠）で記述されています。

↑

単独でつかったりするモノ

<a>～</a>

<a>はアンカー(anchor)タグです。href属性を設定するか、name属性を設定するかで動作が全く異なります。

Aタグの中身のテキストについては、自動リンクが働かないように設定されています。

href属性

リンクを作成します（このタグは正確には<a>タグです）。[addr]の部分にアドレスを記述します。
href属性使用時はrel, rev, name, title, target属性を利用することができます。

ニコニコ大百科内では記事になっている単語は自動でリンクされるため、 外部サイトや動画へリンクする場合によく使用されます。

外部サイトへリンクする場合に<a>タグを使用すると、自動的に「rel="nofollow"」「target="_blank"」という属性が追加されます。「rel="nofollow"」を付けると、検索エンジンにスパムサイトとみなされなくなります。「target="_blank"」を付けると、リンク先が新しいウインドウ(タブ)で開かれます。

例：

ニコニコ大百科

<a href="https://dic.nicovideo.jp/" rel="nofollow" target="_blank">ニコニコ大百科</a>

name属性

通常のリンクではページの先頭から表示されますが、ページが長くなったときなどに途中にある項目へ飛ぶ時にはリンク先にname属性の<a>タグを打ちます。

<a name="hoge">（内容）</a>	まず、下記のようにリンク先にアンカーを打ち込みます。（内容）の部分は無くてもかまいません（<a name="hoge"></a>でも大丈夫）。
<a name="hoge" id="hoge">（内容）</a>	反映後はXHTMLとの互換性のため、id属性が付加されます。これ以降にアンカー名を修正する場合はnameとid両方とも変更しなければいけません。
<a href="記事のURL#hoge">（内容）に飛びます！</a>	リンク元は左のようにします。同じページの「hoge」アンカーに飛ぶ場合は記事のURLは省略可能です。

以下は編集例です。

例えば、このリンクはニコニコ大百科:HTMLタグ一覧の一番最後の項目へ飛びます。

例えば、<a href="https://dic.nicovideo.jp/a/ニコニコ大百科%3AHTMLタグ一覧#ext2">このリンクはニコニコ大百科:HTMLタグ一覧の一番最後の項目へ飛びます</a>。

<b>～</b>

テキストを太字にします。

このタグの使用はHTML4.01ではあまり推奨されていませんが、エディタにより勝手に書き換えられてしまうことがあります(<strong> → <b>)。

例：

ふとーい

<b>ふとーい</b>

<blockquote>～</blockquote>

引用を表します。

cite属性を利用することができます。

例：

これは引用文です

<blockquote>
これは引用文です
</blockquote>

<br />

テキストをこのタグがある位置で強制改行させます。
このタグは終了タグがありません。
clear属性を利用することができます。画像などの回り込みを解消したい場合には、clear="all"と設定してください。

例：

このタグの後に文章があっても
強制的に改行されます。

このタグの後に文章があっても<br />強制的に改行されます。

※<br />は安易に使わず、自分以外の環境での見え方のことを熟慮してください！

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

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

<center>～</center>

文字を中央ぞろえにします。
このタグの使用は非推奨です。
スタイルシート（text-align: center;）を使用しましょう。

例：

こんな風になります

<center>こんな風になります</center>

<cite>～</cite>

他の書籍やサイト・著作者等への引用元を参照であることを示す場合に使います。
内容を引用する場合は<blockquote>を使用します。

例：

詳しくは^[1]を参照してください。

詳しくは<cite>wikipedia</cite>を参照してください。

文字を装飾するために使うのは誤りです。

<del>～</del>

削除した文章を表します。インライン要素としてもブロック要素としても振る舞える特殊な要素です。

例：

打ち消されました。

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

<div>～</div>

囲んだ部分をグループ化します。
style属性を利用することができます。

例：

こんな風につかいます

<div>こんな風につかいます</div>

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

見出しです。新規作成時に見出しとなる部分に使われているアレです。
数字の部分は見出しのレベルを意味し、小さいほど重要であることを意味し、h6まで存在します。
見出しのレベルが連続になるようにしましょう。h2の次にh4が登場したりするのはよろしくありません。

※menu実装に伴ってh1～h5のタグ全てが降格しました（よって記述されているh1タグ（編集中以外）は全てh2以下に置き換わっています）。
h1は記事タイトルのみの使用になっているため、ニコニコ大百科の記事編集では利用できません。

例：

h2のサンプル

h3のサンプル

h4のサンプル

h5のサンプル

h6のサンプル

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

<hr />

水平方向へ罫線を引きます。
ニコニコ大百科ではwidth, style属性を利用することができます。

なおstyle属性で適用されるプロパティはブラウザによって異なります。

装飾	ブラウザ	プロパティ
左寄せ・右寄せ	IE, Opera	text-align
	それ以外	margin-left, margin-right
線の色	IE	border-color
	それ以外	background-color

上記の装飾を施したい場合、各ブラウザに対応するために両方のプロパティを記述することが推奨されます（例2）。

例：

---

<hr />

例2：

---

<hr style="border-color: orange; background-color: orange; border-style: solid;"/>

<i>～</i>

テキストを斜体（イタリック体）にします。

……とだけ書ければ話は早いのですが、メイリオなど一部の日本語フォントでは和文部が斜体になりません。そのため、環境によって強調として機能しないことが考えられるので、安易には使わないほうがよいかもしれません。

このタグの使用はHTML4.01ではあまり推奨されていませんが、エディタにより勝手に書き換えられてしまうことがあります(<em> → <i>)。

例：

i(italic)のサンプル

<i>i(italic)のサンプル</i>

<iframe>～</iframe>

他のページを埋め込むインラインフレームを作るタグです。
動画等を貼り付ける時に使用します。
ニコニコ動画で再生画面の「iframe：」の部分をコピー&ペーストすれば動画を貼り付けられます。
width, height, src, scrolling, frameborderの属性を利用することができます。

動画・関連商品・マイリスト・ニコニコミュニティの貼り方はガイドブックのそれぞれの項目を参照してください。

<img …>

画像を貼り付けます。多分よく使われると思います。
この要素は終了タグ・内容がありません。

img要素の属性は以下の通り。

必須の属性

src

画像のURL。指定できるURLは以下の通りです。

画像の種類	URL
お絵カキコ	https://dic.nicovideo.jp/oekaki/～.png
お絵カキコのサムネイル	https://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

alt

画像の代替テキスト。画像が表示されない時などに代わりに表示される文字列です。画像のツールチップとして利用するのは間違いですし、一部のブラウザでしか有効ではありません。

必須ではない属性

width

画像の横幅

height

画像の高さ

longdesc

画像についての長い説明文のURL

title

画像についての付加的情報を与える属性。ツールチップとして表示するブラウザが多い

非推奨な属性

利用するのはあまりオススメできない属性たち。代わりにスタイルシートを利用しよう。

align

画像の配置。left, right, center, top, bottom, middle

border

画像の周りのボーダーの太さ

hspace

画像の横方向マージン

vspace

画像の縦方向マージン

例：

<img alt="ニコニコ大百科（仮）" height="300" src="/oekaki/22.png" title= "ニコニコ大百科（仮）" width="500">

<ins>～</ins>

本文の中で、追加された部分を示します。
<del>タグと意味的に対になっています。

例：

日本の人口は平成17年10月1日現在、127,767,994人

日本の人口は<ins>平成17年10月1日現在、</ins>127,767,994人

<p>～</p>

段落タグです。
<p>～</p>で囲った部分を1つの段落として表示します。

<span>～</span>

何の要素もないタグです。他に適当な要素が見つからない場合に使われます。
style属性を利用することができます。

<strong>～</strong>

テキストを強調します。<b>タグとほぼ一緒ですが、Firefox＋HTMLエディタではstrong要素は勝手にb要素に置換されてしまいます。

例：

普通の文。重要な文

普通の文。<strong>重要な文</strong>

_～

テキストを下付き文字にします。

例：

H₂O

H₂O

^～

テキストを上付き文字にします。

例：

πr²

πr²

<!--～-->

囲んだテキストを閲覧時・htmlエディタ使用時に非表示にします（ソースには残っています）。

例：

<!--このコメントは編集者により非表示にされています-->

↑

複数の要素を組み合わせて使うもの

テーブル

<table>～</table>

表を作ります。例えるなら表の外枠。
これだけでは使えません。
ニコニコ大百科で使用可能な属性はwidth, style属性のみです。align属性はIE系のブラウザでは有効ですが、その他のブラウザでは無視されるため非推奨です。このほかの属性（bgcolor, border, bordercolor, bordercolorlight, bordercolordark, frame, rules, vspace, hspace, height）は、使えないかもしくは無視されます。

<caption>～</caption>

表にタイトルをつけます。<table>タグの直下に記述します。

<thead>～</thead>

表のグループ化（ヘッダー行）になります。
captionの次に書きます。
無くてもかまいません。

<tfoot>～</tfoot>

表のグループ化（フッター行）になります。
theadの次に書きますが、表の一番下に表示されます。
無くてもかまいません。

<tbody>～</tbody>

<tr>よりも外側に来る、表の本体を表すタグです。

<tr>～</tr>

表の行にあたるタグです。<th>や<td>よりも外側に来ます。
align, style属性が利用可能です。

<th>～</th>

表の見出しセルです。

一般的なブラウザでは中のテキストがセンタリングされる要素ですが、ニコニコ大百科のデフォルトスタイルでは左寄せになります。センタリングしたい場合は適宜align属性かstyle属性を指定してください。

<td>～</td>

表のセルです。
align, scope, bgcolor, colspan, rowspan, nowrap, width, height, style属性が利用可能です。

align属性はOperaだと表示がおかしくなるため使用しないようにしましょう。

colspan、rowspan属性

セルの結合をします。td要素、th要素で利用できます。
colspanは横（左→右）に、rowspanは縦（上→下）に結合します。
<td colspan="2">や<td rowspan="2">のように使用します。
この要素は（ニコニコ大百科では）thタグでは使えません。

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>

リストを作成します。これだけではリストになりません。
style属性を利用することができます。

<li>～</li>

リスト項目です。タグの中に項目を入れます。
value, style属性を利用することができます。

これらを使うと以下のようになります。

例：

• 晴れ
• 曇り
• 雨

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

<ol>～</ol>

順序つきリストを作成します。<ul>と同じですが、<li>部分が数字になります。
順序が関係してくるリストを作るときに使いましょう。
start, style属性を利用することができます。

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

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

(中略)

9. わかんない、あっ、でもあれかも、シチューっぽいかも。

<ol>
<li>「牛」、牛を使う。</li>
<li>牛のお肉を、なんかね、味が付いてるの。味付けるの。　</li>
<li>なんかね、あんね、外できっと食べたら、食べた事があるはず。</li>
</ol>
<p>中略</p>
<ol start="9">
<li>わかんない、あっ、でもあれかも、シチューっぽいかも。 </li>
</ol>

下の階層を作成する

<li>タグと</li>タグの中に、<ul>タグ(<ol>タグ)でリストを作成すると子要素にすることが出来ます。
（作るとしても1階層程度でしょう。それ以上作るとややこしいしソース的に見栄えが悪い）

• リスト1
  • リスト1-1
  • リスト1-2
    • リスト1-2-1
  • リスト1-3
    • リスト1-3-1
      1. リスト1-3-1-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>

定義リストです。登場人物紹介とかたくさんある用語の説明など、見出しにするにはちょっと項目数が多すぎるようなものを説明するときに有用です。
他のリスト同様dlだけでは意味を成しません。

<dt>～</dt>

定義する用語を記述します。

<dd>～</dd>

dtで記述した定義の説明文を書きます。
dtの次に記述します。1つのdtに対して複数のddがあってもかまいません。

これらを使うと以下のようになります。

例：（引用元：ローズ&柴犬りょう）

りょう（柴犬♀ 11歳）

ワンコボーロが大好物。ヒエラルキー最下層。太り気味だが、そこがいい。
自宅警備に励むが、近所の猫にはガン無視される。「解せぬ」の発祥地。

ローズ（ワカケホンセイインコ♂　１０歳）

よくしゃべる。口癖は「ローズ、おはよ！」「緑クリボー」。「リョー！」「お手」「おすわり！」「ワン！」などいろいろしゃべる。別名「ニラ」。デニーロっぽいポーズでにぃにに求愛するが、なかなか実らない。

ウッシー

あ゛っあ゛っ　あ゛っあ゛っあ゛ーっ　あ゛ぁ゛ーっ

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

↑

属性一覧

各属性の一覧です。共通する項目があるので一つに纏めました。

属性	意味	使用タグ
align	文字・画像の位置を指定します。 ニコニコ大百科では、Operaで表示がおかしくなる、またIE以外のブラウザにおいて<tr><td>タグ以外で無視されるので基本的には推奨されません。
cite	引用先のURLを指定する。	<blockquote>
height	高さをピクセル単位かパーセンテージで指定します。	<hr> <iframe> <img> <td>
href	リンク要素です。URLを記述します。	<a>
name	リンクターゲットです。特定の項目にリンクさせたい場合に指定しておきます。 リンクさせる場合はターゲット名の前に#をつけます 例：aname→#aname	<a>
rel	hrefで指定するURLを記述したページとそのURLとの関係を表す （これの記述ページから見た別のページの関係）	<a>
rev	relの逆。リンク先から見たこのページとの関係	<a>
style	スタイルシートを指定します。 スタイルシートについては次の項目を参照。	※タグによって使える要素が違う
target	リンクぺージを新しいウィンドウで開きます。 タブ機能を使用している場合は新しいタブを開きます。 （ニコニコ大百科内では外部リンクの場合「target="_blank"」が自動して指定されます）	<a>
title	ツールチップ（マウスポインタを持っていくと表示される説明文）	<a> <img>
width	幅をピクセル単位かパーセンテージで指定します。	<hr> <iframe> <img> <table> <th><td>

↑

スタイルシート

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

書き方

タグの中にstyle属性を指定して記述します。
殆どのタグで使えますが、基本的に<span>、<p>、<div>、<table>タグで使用します。

例：

僕怒っちゃいますよ？

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

「span」以降にある「style="font-size: xx-small; color: #ff0000;"」がスタイルシートです。
style=でスタイルシートですよ、と言ってるようなもんです。
""の中にプロパティ（コロンの前にあるヤツ。font-sizeとか）を書いていきます。
コロンの後は値です。font-sizeなら「xx-large」って書いてあるのがそうです。
セミコロンをつけて終了します。
スタイルシートは1つのタグの中に複数指定できます（例のように）。
同じ要素を1つのタグ内に指定した場合、後に記述したものが反映されます。

プロパティ	意味	値
background-color:	背景色です。<table>タグにも使用できます。	#RRGGBB それぞれ（Red Green Blue）の略です。 値は16進数で表記します（00～FF）。
background-repeat:	背景画像の繰り返しを指定します。	repeat：縦方向・横方向に繰り返す repeat-x：横方向にのみ繰り返す repeat-y：縦方向にのみ繰り返す no-repeat：繰り返さない
border:xxx yyy zzz	枠線の設定です。 このプロパティはborder要素全てを指定します （1部分だけを指定する方法もありますがここでは割愛）。 便宜上xxx、yyy、zzzといった分け方をしていますが、 正確に設定してあればどれが先に来ても問題ありません。 これは<table>タグ系、<p>タグ、<span>タグで使用できます。 <div>タグでは使えません。<div>タグでも使えます。
	xxx…枠線の色を指定します。	#RRGGBB
	yyy…枠線の太さを指定します。 デフォルトではthin（細い）になっています。	thin：細い medium：普通 thick：太い px（ピクセル）やpt（ポイント）での指定も可能
	zzz…枠線の形状を指定します。 デフォルトではsolid（1本線）になっています。 ブラウザによって形状の見え方が違うので注意が必要です。	solid：1本線 double：2本線（幅が狭いと表示されない） groove：奥にくぼんだ形 ridge：手前にでっぱった形 inset：上と左が濃く、右と下が薄くなる outset：insetの逆 dashed：破線 dotted：点線
color:	文字色	#RRGGBB
font-family:	文字のフォントを指定します。	Mona IPA MONAPGOTHIC MS PGothic MS Pゴシック sans-serif
font-style:	文字の形です。 何もしない場合使用しません。	italic（イタリック）：斜体
font-size:	文字の大きさです。 何もしない場合使用しません	上から小～大になっています。 指定しなければ通常の文字サイズになります。 xx-small x-small small medium(既定値) large x-large xx-large これ以外にも単位付きの数値も使用できます。 px|em|pt|mm|cm|in|pc|ex
font-weight:	テキストの太さを指定します。 デフォルトは「normal」です。 ニコニコ大百科ではnormalとboldしか 対応していません。 pタグ、spanタグで使えます。	normal bold
line-height:	行の高さ（行送り）を指定します。	使える値は以下の通り px|em|pt|mm|cm|in|pc|ex
margin:	要素の外側の余白を指定します。 ボックス要素に使うとインデント風の表示に 数値を1つだけ指定：上下左右一括 数値を2つ指定：順に「上下」「左右」 数値を3つ指定：順に「上」「左右」「下」 数値を4つ指定：順に「上」「右」「下」「左」	使える値は以下の通り px|em|pt|mm|cm|in|pc|ex autoを指定すれば自動調整
margin-***:	要素のうち、記述した部分のみの余白を指定します。 1部分だけ余白がほしいときに使うか、上記のmarginでは設定できない部分（たとえば上と右だけ）に余白がほしい場合などで使います。 margin-top：要素の上側の余白を指定します。 margin-bottom：要素の下側の余白を指定します。 margin-left:要素の左側の余白を指定します。 margin-right:要素の右側の余白を指定します。 なお、margin-leftとmargin-rightを両方autoに指定すると中央揃えと同じ効果が得られます。
padding:	要素の内側の余白を指定します。 borderを表示させた場合などにどうぞ
text-align:	テキストの位置を指定します。 pタグ、tableタグで使えます。	left(左寄せ) center(中央揃え) right(右寄せ)
text-decoration:	テキストを装飾します。 pタグ、spanタグで使えます。	none：何もなし underline：下線 overline：上線 line-through：打消し線
vertical-align:	テキストの縦位置を指定します。 pタグ、spanタグ、tdタグで使えます。 デフォルトはbaselineです。	baseline：ベースラインに揃える top：上揃えにする(tdタグではデフォ) middle：中央揃えにする bottom：下揃えにする super：上付き文字として揃える sub：下付き文字として揃える

↑

関連商品

関連コミュニティ

関連項目

• テスト記事
• ニコニコ大百科:記事の編集方法
• ニコニコ大百科:編集者向けのページ
• ニコニコ大百科:ガイドブック
• ニコニコ大百科：HTMLテンプレート集
• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
• HTMLカラーコード

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

• MASTER ARTIST
• ゆめにっき

脚注

1. *wikipedia