ニコニコ大百科で使える(と思う)タグ一覧と解説です。文法については→ HTMLの簡単な説明参照
HTMLエディタが表示されている場合は見る必要はないでしょうけど、
万が一表示されていない場合にタグを使いたい、でもタグがわからない……という人、
タグを知っていてもどのタグが使えるかわからない、
といった人向けに書いておきます。
アルファベット順にならんでいます。多分。
ニコニコ大百科は2008年9月17日現在、文書型宣言として「HTML4.01 Strict」が記述されています。
<a>はアンカー(anchor)タグです。href属性を設定するか、name属性を設定するかで動作が全く異なります。
aタグの中身のテキストについては、自動リンクが働かないように設定されています。
リンクを作成します(このタグは正確には<a>タグです)。[addr]の部分にアドレスを記述します。
href属性使用時はrel, rev, name, title, target属性を利用することができます。
ニコニコ大百科内では記事になっている単語は自動でリンクされるため、 外部サイトや動画へリンクする場合によく使用されます。
外部サイトへリンクする場合に<a>タグを使用すると、自動的に「rel="nofollow"」「target="_blank"」という属性が追加されます。「rel="nofollow"」を付けると、検索エンジンにスパムサイトとみなされなくなります。「target="_blank"」を付けると、リンク先が新しいウインドウ(タブ)で開かれます。「HTML4.01 Strict」ではtarget属性が廃止されました。また、HTML4では、rel属性値としてnofollowが定義されていません。
例:
通常のリンクではページの先頭から表示されますが、ページが長くなったときなどに途中にある項目へ飛ぶ時にはリンク先にname属性の<a>タグを打ちます。id属性に取って代わられたため、「HTML4.01 Strict」では廃止されました。
<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>。 |
略称や頭文字を表します。
title属性を使って、正式名称を表します。しかし、ニコニコ大百科ではtitle属性が使えないため、このタグを使う意味が薄くなっています。
例:
略称や頭文字を表します。<abbr>タグと違い頭字語のみに利用できます。<abbr>タグがあるため、あえてこのタグを使う必要はありません。
title属性を使って、正式名称を表します。しかし、ニコニコ大百科ではtitle属性が使えないため、このタグを使う意味が薄くなっています。
例:
意味的に区別したいテキストを表します。
このタグの使用はHTML4.01ではあまり推奨されていませんが、エディタにより勝手に書き換えられてしまうことがあります(<strong> → <b>)。
例:
引用を表します。
cite属性を利用することができます。「HTML4.01 Strict」では、直下にテキストやインライン要素を置くことはできません。
例:
これは引用文です
テキストをこのタグがある位置で強制改行させます。
このタグは終了タグがありません。
clear属性を利用することができます。画像などの回り込みを解消したい場合には、clear="all"と設定してください。
→<br>は条件によっては投稿時に消えるので回り込み解除は<p>~</p>で指定してください。
例:
※<br>は安易に使わず、自分以外の環境での見え方のことを熟慮してください!
例えば、Vistaで使われている「メイリオ」フォントはXPまでの「MS Pゴシック」と比べて幅が広いので、レイアウトが盛大に崩れる恐れがあります。他にもMacで使われているヒラギノフォントは、また幅が異なります。
長文は<br>で折り返さず、幅いっぱいまで書いて勝手に折り返るのに任せた方が安全です。
文字を中央ぞろえにします。
このタグの使用は非推奨です。「HTML4.01 Strict」では廃止されています。
スタイルシート(text-align: center;)を使用しましょう。
例:
他の書籍やサイト・著作者等への引用元を参照であることを示す場合に使います。
ニコニコ大百科では、<cite>タグで囲んだ部分は脚注へ移動し、脚注へのリンクに置き換えられます。
内容を引用する場合は<blockquote>を使用します。
例:
文字を装飾するために使うのは誤りです。
コンピュータ言語のコードの断片を表します。
例:
<a href="https://dic.nicovideo.jp/">ニコニコ大百科</a>
削除した文章を表します。インライン要素としてもブロック要素としても振る舞える特殊な要素です。
例:
用語例の定義を表します。
例:
囲んだ部分をグループ化します。
例:
そのコンテンツの強調を表します。
以下の例は、動物の種類が論点になっていることを表します。
例:
見出しです。新規作成時に見出しとなる部分に使われているアレです。
数字の部分は見出しのレベルを意味し、小さいほど重要であることを意味し、h6まで存在します。
見出しのレベルが連続になるようにしましょう。h2の次にh4が登場したりするのはよろしくありません。
※menu実装に伴ってh1~h5のタグ全てが降格しました(よって記述されているh1タグ(編集中以外)は全てh2以下に置き換わっています)。
h1は記事タイトルのみの使用になっているため、ニコニコ大百科の記事編集では利用できません。
例:
段落レベルでのテーマの変わり目を表します。
ニコニコ大百科ではwidth属性を利用することができます。「HTML4.01 Strict」ではwidth属性が廃止されました。
なおstyle属性で適用されるプロパティはブラウザによって異なります。
| 装飾 | ブラウザ | プロパティ |
|---|---|---|
| 左寄せ・右寄せ | IE, Opera | text-align |
| それ以外 | margin-left, margin-right | |
| 線の色 | IE | border-color |
| それ以外 | background-color |
上記の装飾を施したい場合、各ブラウザに対応するために両方のプロパティを記述することが推奨されます(例2)。
例1:
例2:
声やムードを表すテキストの範囲や、通常の文から区別したい範囲を表します。
テキストを斜体(イタリック体)にします……とだけ書ければ話は早いのですが、メイリオなど一部の日本語フォントでは和文部が斜体になりません。そのため、環境によって強調として機能しないことが考えられるので、安易には使わないほうがよいかもしれません。
このタグの使用はHTML4.01ではあまり推奨されていませんが、エディタにより勝手に書き換えられてしまうことがあります(<em> → <i>)。
例:
他のページを埋め込むインラインフレームを作るタグです。
動画等を貼り付ける時に使用します。
ニコニコ動画で再生画面の「iframe:」の部分をコピー&ペーストすれば動画を貼り付けられます。
width, height, src, scrolling, frameborderの属性を利用することができます。
「HTML4.01 Strict」には存在しません。
動画・関連商品・マイリスト・ニコニコミュニティの貼り方はガイドブックのそれぞれの項目を参照してください。
画像を貼り付けます。多分よく使われると思います。
この要素は終了タグ・内容がありません。
img要素の属性は以下の通り。
| 画像の種類 | 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 |
利用するのはあまりオススメできない属性たち。代わりにスタイルシートを利用しよう。
「HTML4.01 Strict」ではすべて廃止されている。
例:
本文の中で、追加された部分を示します。
<del>タグと意味的に対になっています。
例:
ユーザー入力を表します。
例:
段落タグです。
<p>~</p>で囲った部分を1つの段落として表示します。
画像などの回り込みを解消したい場合<p style="clear: both;">~</p>を指定してください。
改行やスペースで整形したテキストをそのまま表示します。
例:
改
行
や
、
ス ペ ー ス を
そ の ま ま 表 示 し ま す 。
ス ペ ー ス を <br />
そ の ま ま 表 示 し ま す 。
</pre>
また、アスキーアートを正しく表示させる目的でもよく使われます。詳しくはアスキーアート#ニコニコ大百科編集用テンプレート、ニコニコ大百科:HTMLテンプレート集#AAを正しく表示するを参照してください。
プログラムやコンピューターシステムからの出力を表します。
例:
何の要素もないタグです。他に適当な要素が見つからない場合に使われます。
テキストを強調します。<b>タグとほぼ一緒ですが、Firefox+HTMLエディタではstrong要素は勝手にb要素に置換されてしまいます。
例:
テキストを下付き文字にします。
例:
テキストを上付き文字にします。
例:
囲んだテキストを等幅フォントで表示します。
CSSのfont-family : monospace;で代替すべきですが、ニコニコ大百科ではmonospaceが使えないため、<tt>タグに頼らざるを得ません。
例:
font-family : monospace;で代替すべきです。
変数を表します。
例:
インラインレベルの引用を表します。
cite属性を利用することができます。
例:
ニコニコ大百科の記事は、面白くて迷惑をかけなければOKです。
囲んだテキストを閲覧時・htmlエディタ使用時に非表示にします(ソースには残っています)。
例:
表を作ります。例えるなら表の外枠。
これだけでは使えません。
rules, summary, border, frame属性が利用可能です。align属性はIE系のブラウザでは有効ですが、その他のブラウザでは無視されるため非推奨です。
表にタイトルをつけます。
<table>タグの直下の一番最初に書きます。
列のグループ化になります。1つ以上の列のグループを表します。
無くてもかまいません。
中に<col>が無ければ、span属性が利用可能です。
表の列にあたるタグです。1つ以上の列を表します。
<colgroup>タグの直下に書きます。
span属性が利用可能です。
表のグループ化(ヘッダー行)になります。
captionの次に書きます。
無くてもかまいません。
表のグループ化(フッター行)になります。
theadの次に書きますが、表の一番下に表示されます。
無くてもかまいません。
<tr>よりも外側に来る、表の本体を表すタグです。
表の行にあたるタグです。<th>や<td>よりも外側に来ます。
align, valign属性が利用可能です。
表の見出しセルです。
abbr, axis, headers, align, valign属性が利用可能です。
一般的なブラウザでは中のテキストがセンタリングされる要素ですが、ニコニコ大百科のデフォルトスタイルでは左寄せになります。センタリングしたい場合は適宜align属性かstyle属性を指定してください。
表のセルです。
abbr, axis, headers, valign, align, scope, bgcolor, colspan, rowspan, nowrap, width, height属性が利用可能です。
「HTML4.01 Strict」ではbgcolor, nowrap, width, height属性が廃止されました。
align属性はOperaだと表示がおかしくなるため使用しないようにしましょう。
セルの結合をします。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 |
リストを作成します。これだけではリストになりません。
リスト項目です。タグの中に項目を入れます。
value属性を利用することができます。「HTML4.01 Strict」ではvalue属性が廃止されました。
これらを使うと以下のようになります。
例:
順序つきリストを作成します。<ul>と同じですが、<li>部分が数字になります。
順序が関係してくるリストを作るときに使いましょう。
start属性を利用することができます。「HTML4.01 Strict」ではstart属性が廃止されました。
例:ビーフストロガノフの作り方
(中略)
<li>タグと</li>タグの中に、<ul>タグ(<ol>タグ)でリストを作成すると子要素にすることが出来ます。
(作るとしても1階層程度でしょう。それ以上作るとややこしいしソース的に見栄えが悪い)
定義リストです。登場人物紹介とかたくさんある用語の説明など、見出しにするにはちょっと項目数が多すぎるようなものを説明するときに有用です。
他のリスト同様dlだけでは意味を成しません。
定義する用語を記述します。
dtで記述した定義の説明文を書きます。
dtの次に記述します。1つのdtに対して複数のddがあってもかまいません。
これらを使うと以下のようになります。
例:(引用元:ローズ&柴犬りょう)
各属性の一覧です。共通する項目があるので一つに纏めました。
| 属性 | 意味 | 使用タグ |
|---|---|---|
| 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> |
「HTML4.01 Strict」において、ニコニコ大百科で使えない・制限されるHTMLを列挙します。
<body>~</body>の外に書かなければならないタグは除きます。
<strong><strong>極めて重要</strong></strong>のように入れ子にできないため、重要性の度合いを表せない。スタイルシートについての説明は省略します(知りたい人は各自調べてください)。
ここではニコニコ大百科で使えるものを書き出しておきます。
以降の表に記述されていないプロパティ、値は使えません。
もし記述漏れがあれば追記してください。
タグの中に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: | 背景色です。 | #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 Pゴシック' 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で上下左右の余白をまとめて指定する場合、
|
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|%です。
▶もっと見る
急上昇ワード改
最終更新:2025/12/06(土) 22:00
最終更新:2025/12/06(土) 22:00
ウォッチリストに追加しました!
すでにウォッチリストに
入っています。
追加に失敗しました。
ほめた!
ほめるを取消しました。
ほめるに失敗しました。
ほめるの取消しに失敗しました。