Help:ウィキテキストにおけるHTML

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索
ようこそ - ガイドブック - チュートリアル - 早見表 - FAQ - ヘルプ - 用語集 - 利用案内 - 質問

ウィキペディア日本語版のヘルプページです。メタウィキヘルプが元になっています。


編集の基本
ページの編集
新規ページの作成
記事名チェック
文書の体裁
セクションと目次
箇条書き   表の作り方
脚注 | ISBNのリンク
特殊文字
HTMLタグの使用
画像などの利用
画像の表示
ファイルページ
数式の書き方
リンクする
リンク | URL
パイプ付きリンク
言語間・ウィキ間リンク
ウィキデータ
カテゴリ
リダイレクトソフト
ページの位置づけ
名前空間
サブページ
ミスなどの修正
新規ページのパトロール
以前の版にページを戻す方法
ページの移動
作業の効率化
マジックワード
テンプレート早わかり
テンプレートの制限
条件文 | テンプレートの説明文
ナビゲーションボックス
コミュニケーション
要約欄
細部の編集
ノートページ | 過去ログ
ウィキラブ
ウィキメール | 感謝
その他
編集の競合
ページ名の働き
記事の定義
ページサイズ
音声・動画の作成と利用
棒グラフの書き方
サンドボックス
ウィキポータル
携帯端末でのアクセス
ヘルプの目次へ

記事編集時のウィキテキストの中でのHTMLの使用について解説します。HTMLにおけるHTML要素・属性のうち許容されている一部が使えます。それ以外ではそのまま表示されてしまいます。ウィキペディアでは一部の要素はHTMLの仕様とは振る舞いが異なります。またウィキペディアでは、出典を示すのに用いるref要素など独自のウィキテキスト言語の要素が用意されています。

HTMLを使えば、ウィキテキスト言語でカバーできていないこともできます。id属性を利用してリンク先として指定したりといったこともできます[注釈 1]

一方で、ウィキペディアではHTML要素の大部分をウィキテキスト言語で簡易的に記述できます。ウィキペディアで使用しているウィキテキスト言語によるマークアップ(ウィキマークアップ)についてはHelp:ページの編集などをご覧ください。

使用できないHTMLの実際[編集]

HTMLソースを直接記述する場合とは一部振るまいが違いますので注意してください。使用できない要素は、HTMLコードの生成時に、タグ開始<とタグ終了>が、文字実体参照&lt;&gt;)に変換されます。

例えば、A要素(アンカー)を使った外部リンクは使用できません。以下のようになります。

マークアップ
<a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>
表示結果 <a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>
生成されるソースコード
&lt;a href="<a class="external free" href="http://meta.wikimedia.org/">http://meta.wikimedia.org/</a>"&gt;メタウィキメディア・メインページ&lt;/a&gt;</td>

おそらく執筆者の意図と異なる結果となります。これはソースコードでおそらく上記のように変換されてしまうためです。

外部リンクのためには、かわりに角括弧で囲むウィキテキスト言語のマークアップを用います。

ウィキペディアにおける正しいマークアップ
マークアップ
[http://meta.wikimedia.org/ メタウィキメディア・メインページ]
表示結果 メタウィキメディア・メインページ
生成されるソースコード
<a class="external text" href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

使用できるHTML[編集]

ウィキペディアの利用しているMediaWikiのプログラムで指定されているHTML要素と属性のみが使用できます[注釈 2]。以下の要素は、使用できる要素についてのそのプログラムからの抜粋です。

  • abbr
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • caption
  • cite
  • code
  • data
  • dd
  • del
  • dfn
  • div
  • dl
  • dt
  • em
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hr
  • i
  • ins
  • kbd
  • li
  • mark
  • ol
  • p
  • pre
  • q
  • rb
  • rp
  • rt
  • ruby
  • samp
  • small
  • span
  • strong
  • sub
  • table
  • td
  • th
  • time
  • tr
  • u
  • var
  • wbr

以下は、HTML5では廃止されたタグです。

  • big
  • center
  • font
  • s
  • strike
  • tt

ウィキペディアは最終的にHTML5で出力されているため、上記の廃止されたタグはこれに合致しません。これらは表示スタイルの指定に関するもので、スタイルの指定によって代替できます。

上記のHTML要素について簡単に解説します。左に相当と書かれているものはウィキマークアップです。他の編集者との共同作業を円滑にするため、通常はHTMLではなくウィキマークアップを用いてください。

見出し
セクション編集ができないなど、違いについては#見出し節を参照。
<h1>見出し</h1> 
「ページ名」と同じレベルの見出しが生成されますので実際には使用しないでください
<h2>見出し</h2> 
== 見出し == に相当。
<h3>見出し</h3> 
=== 見出し === に相当。
<h4>見出し</h4> 
==== 見出し ==== に相当。
<h5>見出し</h5> 
===== 見出し ===== に相当。
<h6>見出し</h6> 
====== 見出し ====== に相当。
文字装飾
<em>文字列</em> 
強勢を示す(サンプル)。
<strong>文字列</strong> 
重要性を示す(サンプル)。
<i>文字列</i> 
他と区別したい文字。イタリック体。''文字列'' に相当(サンプル)。
<b>文字列</b> 
他と区別したい文字。ボールド体。'''文字列''' に相当(サンプル)。
<tt>文字列</tt> 
タイプライター体。非推奨(代替:<span style="font-family: monospace;">文字列</span>)(サンプル)。
<big>文字列</big> 
サイズを大きく。非推奨(代替:<span style="font-size: larger;">文字列</span>)(サンプル)。
<small>文字列</small> 
細目。サイズを小さく(代替:<span style="font-size: smaller;">文字列</span>)(サンプル)。
<sub>文字列</sub> 
下付き文字(サンプル)。
<sup>文字列</sup> 
上付き文字(サンプル)。
<del>文字列</del> 
削除部分を示す。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
<s>文字列</s> 
正しくなくなったことを示す(サンプル)。
<strike>文字列</strike> 
取り消し線を引く。非推奨(代替:<span style="text-decoration:line-through">文字列</span>)(サンプル)。
<ins>文字列</ins> 
挿入部分の示す。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
<u>文字列</u> 
下線を引く[注釈 3]。非推奨(代替:<span style="text-decoration:underline">文字列</span>)(サンプル)。{{U|文字列}}を使用するとよい。
<font>文字列</font> 
フォントについて指定する。非推奨(代替:<span style="color:red">文字列</span>など)(サンプル)。
<code>文字列</code> 
ソースコードを示す(サンプル)。
<var>文字列</var> 
変数を示す(サンプル)。
<pre>文字列</pre> 
整形済みテキスト。ソースのまま表示する。ウィキテキスト中の先頭が空白で始まる行にほぼ相当。HTMLとの違いについては#Pre節を参照。
レイアウト
<p>文字列</p> 
パラグラフ。ウィキテキスト中の2回改行に相当。
<span>文字列</span> 
インラインについてスタイル指定。class や CSS の style などと併用。
<div>文字列</div> 
ブロックについてスタイル指定。class や CSS の style などと併用。
<br /> 
強制改行。主に表中での改行に使用する。なお、<br> <br/> <br /> は HTML ソースが生成される際にすべて <br /> となりますので、どれを利用しても結果は同じです。これをどちらかに直すだけの編集はお控えください[注釈 4]
<center>文字列</center> 
テキストの中央揃え。非推奨(代替: <div class="center" style="width:auto; margin-left:auto; margin-right:auto">文字列</div>)。{{center|文字列}}を使用するとよい。
<blockquote>文字列</blockquote> 
段落の引用。
<cite>文字列</cite> 
出典・参照先。
<q>文字列</q> 
行中の引用。
<hr /> 
セクション内での話題の区切りを示す。水平線。---- に相当。
リスト・箇条書き
<dl>dt, dd</dl> 
説明/定義リスト。次の <dt>文字列</dt> とあわせて ; に相当。
<dt>文字列</dt> 
説明/定義する語。
<dd>文字列</dd> 
説明/定義する内容。: に相当。
<ol>項目li</ol> 
番号付き箇条書き。<li>文字列</li> とあわせて # に相当。
<ul>項目li</ul> 
番号なし箇条書き。<li>文字列</li> とあわせて * に相当。
<li>文字列</li> 
箇条書きの各項目。
ルビ
ウィキペディアのWikipedia:表記ガイドではこれらのタグの使用は推奨されていません。
<ruby>文字列</ruby> 
ルビの開始/終了。
<rb>文字列</rb> 
ルビの対象文字列。HTML5では不要。
<rt>文字列</rt> 
ルビ。
<rp>記号</rp>
ルビ表示未対応の環境においてインラインに表示するルビを囲む記号。
<table>以下のタグ</table> 
表の外枠。開始は{|、終了は|} に相当。
<caption>文字列</caption> 
表のキャプション。|+ に相当。
<tr>セルth, td</tr> 
横1列を定義する。|- に相当。
<th>文字列</th> 
見出しセル。! に相当。
<td>文字列</td> 
データセル。| に相当。
コメントアウト
<!-- 文字列 --> 
文字列 の部分をコメントアウト。

個別の注意[編集]

見出し[編集]

<h1>から<h6>までの見出し要素は、ウィキテキスト言語における=を使用したマークアップと同じほぼ表示結果となります。また同様に目次にも表示されます。違いは、「[編集]」リンクが付属していないことです。これを利用することで、特定のセクションからはセクション編集ができないようにすることが可能です。

以下のように記述すると。

<h4>サンプルの見出し(4レベル)</h4>

表示結果は次のようになります。

サンプルの見出し(4レベル)

スタイル指定[編集]

<span> は行中のテキストのスタイルなどを指定する要素で、この要素の使用が推奨されます。<font> も同じことができる効果をもつ古くからある要素ですが、現在では HTML の仕様を策定している World Wide Web Consortium(W3C) により非推奨となっています。

例えば以下2つの記述は、同じ表示結果が得られます。

<span style="color:red">赤い</span>文字
<font color="red">赤い</font>文字

<div> はブロック単位でスタイルを指定する要素です。

なお多くの場合には <div><span> を使ってスタイル指定をせずとも、既に用意された要素を使うほうが利用者に対して親切です。スタイルの指定に対応していない古いブラウザや、読み上げソフトを使用している場合などでも、執筆者の強調の意図が伝わります。

例えば、文中の言葉を強調したいときには、その文字列が強調されていることを明示する <strong><em>[注釈 5]といった要素が用意されています。

ウィキテキスト言語では '''で囲むことで強調タグが作成されます。見栄えも統一されるため、最初にウィキテキスト言語でも記述できないか考慮してください。

Pre[編集]

ウィキテキスト中の <pre> 要素は、HTMLとは異なった振る舞いをします。要素で囲まれたテキストは、HTMLのように改行や空白が維持されますが、かつタグも見た通りに表示されます。これは、ウィキペディアでは、処理の途中でウィキテキスト言語の <nowiki> が組み合わさるためです。

以下のように記述すると、結果はその次のようになります。

<pre>This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{PAGENAME}} </pre>

表示結果(注・囲いなどウィキペディアによるスタイルの指定も反映され表示されたものが実際の表示結果です):

This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{PAGENAME}}

HTMLの <pre> 要素のような表示結果を得たい場合には、ウィキペディアでは行頭に半角スペースを入れてください。タグ等は展開しつつ改行や空白などをソース通りに維持したテキストを表示させたい場合です。以下のように記述します。

 This word is <b>bold</b>.    [[ウィキペディア]]の URL は[http://ja.wikipedia.org] です。{{PAGENAME}}

表示結果(上の表示結果の注に同じ):

This word is bold.    ウィキペディアの URL は[1] です。ウィキテキストにおけるHTML

コメント[編集]

ウィキテキスト中で <!-- ... --> を使ったHTMLのコメントは、生成されたHTMLコード中にはいっさい現れません[注釈 6]

属性[編集]

大部分の要素には style 属性があります。例えば

<div style="font-size:80%">
これは<span style="color:red">赤い</span>テキストです。
</div>

は次を生成します。

これは赤いテキストです。

また大部分の要素は、クラス(class)と ID を指定できます。クラスはスタイルシートと連動して、指定部分のスタイルを指定します。例えば

<div class="infobox">インフォボックスの例</div>
インフォボックスの例

は右のように生成されます。これは、 infobox クラスが Mediawiki:Common.css の記述によって右端揃えの浮動ボックスとして定義されているからです。

クラスと ID はJavScriptのコードからHTML要素を参照するときにも使えます。例として{{UserName}}があります。

他にも、例えば title 属性が利用できます。

海抜<span title="6.1 km" style="border-bottom:1px dotted">20000 ft</span>

は次のように生成されます(点線の下線部の上にカーソルを置いた時のポップアップを指定しています)。

海抜20000 ft

例外[編集]

MediaWiki名前空間にあるページの一部(ボタンのラベルなど)では HTMLが使えません。

例えば以下のように記述すると、その次のようになります。

<button type=button>ボタン</button>

生成されるコード:<button type=button>ボタン</button>&lt;span id=abc&gt;

表示結果:<button type=button>ボタン</button>

他方で純粋なHTML コードとして認識されるものもあり、その場合 HTMLしか使えず、ウィキテキスト言語はHTMLに変換されません。

サイト全体の CSS および JS スタイルシートおよび利用者指定の CSS や JS スタイルシート(Help:外装の詳細設定参照)のページを表示すると、自動的に <pre> タグで囲まれているような体裁で表示されます。

ウィキペディア独自の要素[編集]

HTML 要素以外にも、MediaWikiで使える< >で囲んだ要素があります。以下に代表的なものを紹介します。

ref[編集]

<ref> 文字列 </ref>

脚注を作ります。<references />とセットで使います。Help:脚注参照。

nowiki[編集]

<nowiki> 文字列 </nowiki>

HTMLタグ、ウィキマークアップを全て無効化します。

gallery[編集]

<gallery> 画像ファイル名|文字列 </gallery>

画像を並べて描画します。横幅は自動的に折り返され閲覧環境に依存しません。Help:画像の表示#ギャラリー参照。

imagemap[編集]

画像をクリックした位置によって異なるリンク先を指定できます。Help:画像の表示#クリッカブル画像です。

poem[編集]

<poem> 文字列 </poem>

詩や歌詞などの引用に用います。HTMLソース生成の際、<div class="poem"></div>で囲まれ、ウィキテキストの各行毎に自動的に<br />が付加されます。

score[編集]

楽譜を描画します。Help:Scoreです。

math, math chem, ce[編集]

数式や化学式を描画します。en:Help:Displaying a formula (英語)を参照してください。

timeline[編集]

時系列の図を描画します。mw:Extension:EasyTimelineです。

includeonly, noinclude, onlyinclude[編集]

テンプレート呼び出しをする時に呼び出し部分や非呼び出し部分を指定する要素です。Help:テンプレート参照。

syntaxhighlight / source[編集]

GeSHi 構文ハイライト機能を利用してプログラミング言語などをみやすく表示するタグです。長らく <source> が使われてきましたが、このタグを使用するプログラミング言語を表示する際に不都合なため、同じ意味を持つ要素 <syntaxhighlight> が追加されました[注釈 7]lang= 言語を指定して使います。

例:

<syntaxhighlight lang="Java">
public class HelloWorld
  {
  public static void main (String [] args)
    {
    // Java言語の HelloWorld プログラム
    System.out .println ("Hello, World.") ;
    }
  }
</syntaxhighlight>

結果:

public class HelloWorld
  {
  public static void main (String [] args)
    {
    // Java言語の HelloWorld プログラム
    System.out .println ("Hello, World.") ;
    }
  }

lang= で指定できるプログラミング言語等は、以下で示す約140言語です(2009年6月現在)。サポートされていない言語を指定した場合、または言語指定がない <syntaxhighlight>(および <source>)を使用した場合、使用したページがCategory:構文ハイライトエラーがあるページへ登録されます。最新情報は編集画面に <syntaxhighlight></syntaxhighlight> と打ち込めば表示されます。

ほかに次のパラメータが指定できます。

  • line と書くとソースの行番号が出力されます。
  • start=整数 は開始行番号を指定します。
  • highlight=整数 は強調する行を指定します。
  • enclose= は囲みのスタイルを指定します。値には "none", "div", "pre" のいずれかが指定できます。"pre" がデフォルトです。ただし、拡張機能の更新に伴い、枠線が表示されなくなりました(bugzilla:10967bugzilla:19416参照)。 "none" は地の文に埋め込み、"div" はテキストを折り返します。
  • strict と書くと厳密モード (strict mode) で出力されます。

下の例は <syntaxhighlight lang="html5" line start="3" highlight="2-4, 6"> と指定したものです。

3 <div style="font-size:80%">
4 これは<span style="color:red">赤い</span>テキスト<br />です。
5 これは<span style="color:red">赤い</span>テキスト<br />です。
6 これは<span style="color:red">赤い</span>テキスト<br />です。
7 </div>
8 <hr />

下の例は <syntaxhighlight lang="html5" enclose="div"> と指定したものです。

<div style="font-size:80%">
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
これは<span style="color:red">赤い</span>テキスト<br />です。
</div>
<hr />

下の例は <syntaxhighlight lang="html5" enclose="none"> と指定したものです。

<div style="font-size:80%"> これは<span style="color:red">赤い</span>テキスト<br />です。 これは<span style="color:red">赤い</span>テキスト<br />です。 これは<span style="color:red">赤い</span>テキスト<br />です。 </div> <hr />


なお、MediaWiki:Geshi.css にて専用のクラスを指定できます。また、ユーザーCSS では div と span (enclose=none にしている場合用) にセレクター(.mw-geshi)が使用できます。

より詳しくはmw:Extension:SyntaxHighlight GeSHiを参照してください。

テンプレート引数をタグで囲むためには[編集]

テンプレートの引数をXML風タグで囲んでテンプレート呼び出しをするとうまく機能しません。この時には {{#tag:}} を使用することで、この問題を回避できます。

注釈[編集]

  1. ^ Help:セクション#セクションへのリンクを参照。
  2. ^ MediaWiki の Sanitizer.php に記述されています。
  3. ^ u要素はHTML5では発音しない注記を示します。例えばスペルミスの箇所や中国語内での固有名詞の箇所など、本来とは異なった表記であることを明示する場合に使用します。
  4. ^ <br><br /> になおすだけの編集や、他の利用者に対してどちらかを使うように注意することは無意味ですのでやめてください。気になる方は、Wikipedia:サンドボックスで試し、ブラウザのソースを表示してみてください。
  5. ^ em は emphasized = 強調されたの略。
  6. ^ 次の括弧内の<!-- コメントアウトしました -->という文字列がどうなっているか、ブラウザのソースを表示する機能を利用して確認してみてください。確認用括弧「」 。
  7. ^ rev:50696(MediaWiki)

関連項目[編集]