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

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

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


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

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

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

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

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

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

例えば、アンカー要素 <a> を使った外部リンクは使用できません。以下のように記述すると、表示はその次のようになります。

<a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

表示結果:<a href="http://meta.wikimedia.org/">メタウィキメディア・メインページ</a>

おそらく執筆者の意図と異なる結果となります。これはソースコードでは&lt;a href="http://meta.wikimedia.org/"&gt;メタウィキメディア・メインページ&lt;/a&gt;と変換されてしまうためです。

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

[http://meta.wikimedia.org/ メタウィキメディア・メインページ]

表示結果:メタウィキメディア・メインページ

使用できる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 centerfontsstrikett

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

以下で上記のHTML要素について簡単に解説します。

見出し
  • <h1> 見出し </h1> …「ページ名」とおなじレベルの見出しが生成されますので実際には使用しないでください
  • <h2> 見出し </h2>== 見出し == に相当。
  • <h3> 見出し </h3>=== 見出し === に相当。
  • <h4> 見出し </h4>==== 見出し ==== に相当。
  • <h5> 見出し </h5>===== 見出し ===== に相当。
  • <h6> 見出し </h6>====== 見出し ====== に相当。
目次が作成されなど、違いについては#見出し節を参照。
文字装飾
  • <em> 文字列 </em> …弱い強調(サンプル)。
  • <strong> 文字列 </strong> …強い強調(サンプル)。
  • <i> 文字列 </i> …イタリック体。''文字列'' に相当(サンプル)。
  • <b> 文字列 </b> …ボールド体。'''文字列''' に相当(サンプル)。
  • <tt> 文字列 </tt> …タイプライター体(サンプル)。
  • <big> 文字列 </big> …サイズを大きく(サンプル)。
  • <small> 文字列 </small> …サイズを小さく(サンプル)。
  • <sub> 文字列 </sub> …下付き文字(サンプル)。
  • <sup> 文字列 </sup> …上付き文字(サンプル)。
  • <del> 文字列 </del> …抹消部分の表示。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
  • <s> 文字列 </s> または <strike> 文字列 </strike> …取り消し線を引く。非推奨(代わりとなるCSS:{text-decoration:line-through}サンプルサンプル)。
  • <ins> 文字列 </ins> …挿入部分の表示。古いブラウザや一部の読み上げブラウザでは未対応(サンプル)。
  • <u> 文字列 </u> …下線を引く。非推奨(代わりとなるCSS:{text-decoration:underline}サンプル)。Template:Uを使用するとよい。)
  • <font> 文字列 </font> …フォントの指定。非推奨(サンプル)。
  • <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 /> となりますので、どれを利用しても結果は同じです。[注釈 3]
  • <center> 文字列 </center> …テキストの中央揃え。非推奨(代わりに <div> と CSS を組み合わせるのが望ましい)。
  • <blockquote> 文字列 </blockquote> …段落の引用に使用。
  • <cite> 文字列 </cite> …行中の引用に使用。
  • <hr> …水平行を引く。---- に相当。
リスト・箇条書き
  • <dl> 文字列 </dl> …定義リスト。次の <dt> とあわせて ; に相当。
  • <dt> 文字列 </dt> …定義リストの項目指定。
  • <dd> 文字列 </dd> …定義リストの定義内容指定。: に相当。
  • <ol> 文字列 </ol> …番号付き箇条書き。<li> とあわせて # に相当。
  • <ul> 文字列 </ul> …番号なし箇条書き。<li> とあわせて * に相当。
  • <li> 文字列 </li> …箇条書きの各項目指定。
ルビ
ウィキペディアのWikipedia:表記ガイドではこのルビタグの使用は推奨されていません。
  • <ruby> 文字列 </ruby> …ルビの開始。
  • <rb> 文字列 </rb> …ルビをかける文字列を指定。
  • <rt> 文字列 </rt> …ルビ文字列を指定。
  • <rp> 文字列 </rp> …ルビ表示未対応の際に後続の括弧内にいれて表示する文字列を指定。
  • <table> 表 </table> …表の開始。{| に相当。
  • <th> 文字列 </th> …表内の見出し。! に相当。
  • <tr> 文字列 </tr> …列を作成。|- に相当。
  • <td> 文字列 </td> …セルを作成。| に相当。
  • <caption> 文字列 </caption> …表のキャプション。|+ に相当。
  • コメントアウト
  • <!-- 文字列 -->文字列 の部分をコメントアウト。

個別の注意[編集]

見出し[編集]

<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>[注釈 4]といった要素が用意されています。

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

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コード中にはいっさい現れません[注釈 5]

属性[編集]

大部分の要素には 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で使える< >で囲んだ要素があります。以下に代表的なものを紹介します。

nowiki[編集]

<nowiki> 文字列 </nowiki>

タグなどを全て無効化する要素です。

ref[編集]

<ref> 文字列 </ref>

脚注を生成する要素です。<references />とセットで使います。Help:脚注参照。

includeonly, noinclude, onlyinclude[編集]

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

gallery[編集]

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

画像などを並べたギャラリーを生成する要素です。Help:画像の表示参照。

poem[編集]

<poem> 文字列 </poem>

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

syntaxhighlight / source[編集]

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

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

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

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

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>

下の例は <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 />です。これは<span style="color:red">赤い</span>テキスト<br />です。これは<span style="color:red">赤い</span>テキスト<br />です。これは<span style="color:red">赤い</span>テキスト<br />です。
</div>

下の例は <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 />です。これは<span style="color:red">赤い</span>テキスト<br />です。これは<span style="color:red">赤い</span>テキスト<br />です。これは<span style="color:red">赤い</span>テキスト<br />です。 </div>


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

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


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

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

注釈[編集]

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

関連項目[編集]