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

ニコニコダイヒャッカエイチティーエムエルタグイチラン

1.7万文字の記事
これはリビジョン 2020120 の記事です。
内容が古い・もしくは誤っている可能性があります。
最新版をみる

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

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

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

ニコニコ大百科は2008年9月17日現在、文書型宣言として「HTML4.01 Strict」が記述されています。

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

<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"」を付けると、リンク先が新しいウインドウ(タブ)で開かれます。「HTML4.01 Strict」ではtarget属性が廃止されました。また、HTML4では、rel属性値としてnofollowが定義されていません。

例:

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

name属性

通常のリンクではページの先頭から表示されますが、ページが長くなったときなどに途中にある項目へ飛ぶ時にはリンク先に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>。

<abbr>~</abbr>

略称や頭文字を表します。
title属性を使って、正式名称を表します。しかし、ニコニコ大百科ではtitle属性が使えないため、このタグを使う意味が薄くなっています。

例:

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

<acronym>~</acronym>

略称や頭文字を表します。<abbr>タグと違い頭字語のみに利用できます。<abbr>タグがあるため、あえてこのタグを使う必要はありません。
title属性を使って、正式名称を表します。しかし、ニコニコ大百科ではtitle属性が使えないため、このタグを使う意味が薄くなっています。

例:

MPEGはデータの圧縮方式群である。
<acronym>MPEG</acronym>はデータの圧縮方式群である。

<b>~</b>

意味的に区別したいテキストを表します。

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

例:

あるベクトル a と同じ方向で大きさの比率が k であるようなベクトルを ka と表す
あるベクトル <b>a</b> と同じ方向で大きさの比率が k であるようなベクトルを k<b>a</b> と表す

<blockquote>~</blockquote>

引用を表します。

cite属性を利用することができます。「HTML4.01 Strict」では、直下にテキストやインライン要素を置くことはできません。

例:

これは引用文です

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

<br>

テキストをこのタグがある位置で強制改行させます。
このタグは終了タグがありません。
clear属性を利用することができます。画像などの回り込みを解消したい場合には、clear="all"と設定してください。
→<br>は条件によっては投稿時に消えるので回り込み解除は<p>~</p>で指定してください。

例:

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

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

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

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

<center>~</center>

文字を中央ぞろえにします。
このタグの使用は非推奨です。「HTML4.01 Strict」では廃止されています。
スタイルシート(text-align: center;)を使用しましょう。

例:

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

<cite>~</cite>

他の書籍やサイト・著作者等への引用元を参照であることを示す場合に使います。
ニコニコ大百科では、<cite>タグで囲んだ部分は脚注へ移動し、脚注へのリンクに置き換えられます。
内容を引用する場合は<blockquote>を使用します。

例:

詳しくはWikipedia[1]を参照してください。
詳しくはWikipedia<cite><a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language" rel="nofollow" target="_blank">HyperText Markup Language(Wikipedia)</a></cite>を参照してください。

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

<code>~</code>

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

例:

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

<del>~</del>

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

例:

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

<dfn>~</dfn>

用語例の定義を表します。

例:

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

<div>~</div>

囲んだ部分をグループ化します。

例:

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

<em>~</em>

そのコンテンツの強調を表します。

以下の例は、動物の種類が論点になっていることを表します。

例:

はかわいい動物だ。
<em>猫</em>はかわいい動物だ。

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

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

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

例:

h3のサンプル

h4のサンプル

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

<hr>

段落レベルでのテーマの変わり目を表します。
ニコニコ大百科ではwidth属性を利用することができます。「HTML4.01 Strict」ではwidth属性が廃止されました。

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

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

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

例1:


<hr>

例2:


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

<i>~</i>

声やムードを表すテキストの範囲や、通常の文から区別したい範囲を表します。

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

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

例:

カラオケは英語でも karaoke である。
カラオケは英語でも <i>karaoke</i> である。

<iframe>~</iframe>

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

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

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

非推奨な属性

利用するのはあまりオススメできない属性たち。代わりにスタイルシートを利用しよう。
「HTML4.01 Strict」ではすべて廃止されている。

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人

<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>~</p>で囲った部分を1つの段落として表示します。
画像などの回り込みを解消したい場合<p style="clear: both;">~</p>を指定してください。

<pre>~</pre>

改行やスペースで整形したテキストをそのまま表示します。

例:






ス ペ ー ス を
そ の ま ま 表 示 し ま す 。
<pre>
改<br />
行<br />
や<br />
、<br />
<br />
               ス   ペ   ー   ス   を               <br />
そ の ま ま 表 示 し ま す 。
</pre>

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

<samp>~</samp>

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

例:

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

<span>~</span>

何の要素もないタグです。他に適当な要素が見つからない場合に使われます。

<strong>~</strong>

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

例:

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

<sub>~</sub>

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

例:

H2O
H<sub>2</sub>O

<sup>~</sup>

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

例:

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

<tt>~</tt>

囲んだテキストを等幅フォントで表示します。

CSSのfont-family : monospace;で代替すべきですが、ニコニコ大百科ではmonospaceが使えないため、<tt>タグに頼らざるを得ません。

例:

CSSのfont-family : monospace;で代替すべきです。
CSSの<tt><code style="background: #dddddd; margin: 0.5em;">font-family : monospace;</code></tt>で代替すべきです。

<var>~</var>

変数を表します。

例:

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

<q>~</q>

インラインレベルの引用を表します。

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

例:

基本方針は、ニコニコ大百科の記事は、面白くて迷惑をかけなければOKです。
基本方針は、<q cite="https://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エディタ使用時に非表示にします(ソースには残っています)。

例:

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

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

テーブル

<table>~</table>

表を作ります。例えるなら表の外枠。
これだけでは使えません。
rules, summary, border, frame属性が利用可能です。align属性はIE系のブラウザでは有効ですが、その他のブラウザでは無視されるため非推奨です。

<caption>~</caption>

表にタイトルをつけます。
<table>タグの直下の一番最初に書きます。

<colgroup>~</colgroup>

列のグループ化になります。1つ以上の列のグループを表します。
無くてもかまいません。
中に<col>が無ければ、span属性が利用可能です。

<col>

表の列にあたるタグです。1つ以上の列を表します。
<colgroup>タグの直下に書きます。
span属性が利用可能です。

<thead>~</thead>

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

<tfoot>~</tfoot>

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

<tbody>~</tbody>

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

<tr>~</tr>

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

<th>~</th>

表の見出しセルです。
abbr, axis, headers, align, valign属性が利用可能です。

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

<td>~</td>

表のセルです。
abbr, axis, headers, valign, align, scope, bgcolor, colspan, rowspan, nowrap, width, height属性が利用可能です。
「HTML4.01 Strict」ではbgcolor, nowrap, width, height属性が廃止されました。

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>

リストを作成します。これだけではリストになりません。

<li>~</li>

リスト項目です。タグの中に項目を入れます。
value属性を利用することができます。「HTML4.01 Strict」ではvalue属性が廃止されました。

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

例:

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

<ol>~</ol>

順序つきリストを作成します。<ul>と同じですが、<li>部分が数字になります。
順序が関係してくるリストを作るときに使いましょう。
start属性を利用することができます。「HTML4.01 Strict」ではstart属性が廃止されました。

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

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

(中略)

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

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

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

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

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

  • <address>~</address>
  • <area>
  • <bdo>~</bdo>
  • <big>~</big>
  • <form>~</form>と、その中で使うタグ
    • <button>~</button>
    • <fieldset>~</fieldset>
    • <input>
    • <label>~</label>
    • <legend>~</legend>
    • <optgroup>~</optgroup>
    • <option>~</option>
    • <select>~</select>
    • <textarea>~</textarea>
  • <h1>~</h1>
  • <map>~</map>
  • <noscript>~</noscript>
  • <object>~</object>
  • <param>~</param>
  • <pre>~</pre>
  • <script>~</script>
  • <small>~</small>

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

  • 共通属性
    • class属性
    • dir属性
    • lang属性
    • イベント関連属性
      • onclick属性
      • ondblclick属性
      • onmousedown属性
      • onmousemove属性
      • onmouseout属性
      • onmouseover属性
      • onmouseup属性
      • onkeypress属性
      • onkeydown属性
      • onkeyup属性
  • <a>~</a>
    • charset属性
    • coords属性
    • hreflang属性
    • onblur属性
    • onfocus属性
    • shape属性
    • type属性
  • <del>~</del>
    • cite属性
    • datetime属性
  • <ins>~</ins>
    • cite属性
    • datetime属性
  • <img>
    • ismap属性
    • usemap属性
  • テーブル
    • <table>~</table>
      • cellpadding属性
      • cellspacing属性
    • <colgroup>~</colgroup>
      • align属性
      • char属性
      • charoff属性
      • valign属性
      • width属性
    • <col>
      • align属性
      • char属性
      • charoff属性
      • valign属性
      • width属性
    • <thead>~</thead>
      • align属性
      • char属性
      • charoff属性
      • valign属性
    • <tfoot>~</tfoot>
      • align属性
      • char属性
      • charoff属性
      • valign属性
    • <tbody>~</tbody>
      • align属性
      • char属性
      • charoff属性
      • valign属性
    • <tr>~</tr>
      • char属性
      • charoff属性
    • <th>~</th>
      • char属性
      • charoff属性
    • <td>~</td>
      • char属性
      • charoff属性

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

  • 共通属性
    • accesskey属性
      <a>タグでしか利用できない。
    • id属性
      中身がない<a>タグでしか利用できない。また、同じ属性値を持つname属性が必要。
    • tabindex属性
      <a>タグでしか利用できない。
    • title属性
      <a>タグ<img>タグでしか利用できない。
    • style属性
      利用できるプロパティや値に制限がある。
  • <a>~</a>
    • 外部リンクの場合、rel属性値が「nofollow」に固定される。
  • <abbr>~<abbr>
    • title属性を利用できないため、正式名称を指定できない。
  • <acronym>~</acronym>
    • title属性を利用できないため、正式名称を指定できない。
  • <cite>~</cite>
    • 中身が脚注へのリンクに置き換わるため、作品のタイトルを表すことができない。
  • <del>~</del>
    • ブロック要素を囲むことができない。
  • <dfn>~</dfn>
    • title属性を指定できないため、タグの中身でしか定義用語を示すことができない。
  • <i>~</i>
    • lang属性を指定できないため、別言語の用語であることを示せない。
  • <img>
    • src属性値に指定できるアドレスが制限されている。
  • <ins>~</ins>
    • ブロック要素を囲むことができない。
  • <strong>~<strong>
    • <strong><strong>極めて重要</strong></strong>のように入れ子にできないため、重要性の度合いを表せない。
  • テーブル
    • <th>タグにid属性を指定できないため、<th>タグ、<td>タグのheaders属性が無意味に。

ニコニコ大百科: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 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で上下左右の余白をまとめて指定する場合、
  • 数値を1つだけ指定:上下左右一括
  • 数値を2つ指定:順に「上下」「左右」
  • 数値を3つ指定:順に「上」「左右」「下」
  • 数値を4つ指定:順に「上」「右」「下」「左」
一方向だけ余白がほしいとき、上記のmarginでは設定できない組み合わせ(たとえば上と右だけ)の方向に余白がほしいときは、margin-***を使います。
  • margin-bottom: 要素の下側の余白を指定します。
  • margin-left: 要素の左側の余白を指定します。
  • margin-right: 要素の右側の余白を指定します。
  • margin-top: 要素の上側の余白を指定します。
なお、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|%です。

関連商品

ニコニコ市場は2023年11月に終了しました。ニコニコ市場は2023年11月に終了しました。

関連コミュニティ

ニコニコミュニティは2024年8月に終了しました。

関連項目

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

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

  • MASTER ARTIST
  • ゆめにっき

脚注

  1. *HyperText Markup Language(Wikipedia)
関連記事

親記事

子記事

  • なし

兄弟記事

おすすめトレンド

ニコニ広告で宣伝された記事

記事と一緒に動画もおすすめ!
VOICEROIDキッチン[単語]

提供: さくらねこ

もっと見る

急上昇ワード改

最終更新:2025/12/06(土) 22:00

ほめられた記事

最終更新:2025/12/06(土) 22:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP