プロジェクト:テンプレート/マークアップ
このプロジェクト:テンプレートのサブページでは、XHTML によるマークアップの注意点、及び非推奨要素・属性の CSS への置き換えなどの指針を示します。
用語の説明
<span style="color:red">これは span 要素の内容です。</span>
これを細かく分割すると、以下のようになります。
| < | span | style | = | "color:red" | > | これは span 要素の内容です。 | </ | span | > |
| 要素タイプ名 | 属性名 | 属性値 | 内容 | 要素タイプ名 | |||||
| 属性 | |||||||||
| 開始タグ | 終了タグ | ||||||||
| 要素 | |||||||||
大きく分けて「開始タグ」「終了タグ」とそれらに囲まれた「内容」があり、これらで「要素」を構成しています。要素はその性質を表す「属性」を持つことがあり、これは開始タグの中に「属性名」と「属性値」をペアで記述します。
XHTML要素
いわゆる「タグ」と呼ばれるものです。Wiki マークアップだけでは視覚的な表現には限界があるので、特に div 要素や span 要素は多用されます。XHTML で指定できるのは基本的に文書の構造だけで、文字の大きさ、色、背景など見た目にかかわることはすべて CSS で行うのが原則です。
XHTML は XML の一種ですので、次のような制約があります。
- 終了タグを省略できません。
- 内容のない要素（空要素）はタグを /> で閉じます（例：<br />）。
- 要素タイプ名・属性名は小文字で記述します（○ <table border="1"> × <TABLE BORDER="1">）。
- 属性値は全て引用符で囲みます（○ colspan="3" × colspan=3）。
空要素以外については、Wiki テキストが XHTML として間違った記述になっていても、ほとんどの場合 MediaWiki によって吸収されます。例えば、 Wiki テキストが <TABLE BORDER=1> となっていても、XHTML として出力されるときには <table border="1"> と変換されます。しかし、例えば <table class=infobox bordered> は <table class="infobox" bordered> と解釈されてしまい、bordered という存在しない属性を指定した状態になっている（正確には、MediaWiki で使用可能な属性に含まれない）ので、出力は <table class="infobox"> となってしまいます。混乱を避けるために、Wiki テキストの段階で XHTML の仕様に適合する状態にしておく方が無難です。
仕様で非推奨とされているもの
要素や属性のうち、表示方法を直接規定するものは多くが非推奨とされています。
要素
- <font> - 文字サイズ、色、フォントの指定
- XHTML では非推奨です。表示サイズや色などの変更は style 属性で指定しましょう。文字サイズなら font-size:smaller など、文字色なら color:#ff0000 など、フォントなら font-family:sans-serif などとします。
- <center> - 中央寄せ
- XHTML では非推奨です。これは <div align="center"> の略記として解釈されますが、後述するように align 属性が非推奨となっているのでこれも同様に非推奨となります。ブロック要素全体を中央寄せするならばマージンの設定によって行い (margin:0 auto) 、要素内の文字を中央揃えにするなら text-align:center とします。#ブロック要素の配置を参照。
属性
- align="(left|center|right)" - テキストなどの水平方向の配置
- 主に要素の配置を指定する属性です。指定する要素によって動作は異なりますが、td 要素と th 要素に対するものを除いては非推奨です。この属性が使用されているのを見て他の非推奨となっている要素にも適用されてしまうおそれがあるためです。
- div 要素や p 要素などでは、この中に含まれるテキストの配置を指定します。この場合は、style 属性で text-align:(left|center|right) とします。
- table 要素では、表全体の文書内における位置を指定し、値が left か right の場合は以降のテキストは回り込み処理がなされます。中央に配置したい場合は style 属性で margin:0 auto とし、左か右に寄せる場合は style 属性を float:left などとするか、class 属性に floatleft などを指定します。#ブロック要素の配置を参照。
- bgcolor="#xxxxxx" - 背景色の指定
- この属性は非推奨です。style 属性で background-color:#xxxxxx などに置き換えてください。
- width="xx" - 表示幅の指定
- table 要素に対するものを除いては非推奨です。style 属性で width:xx% などに置き換えてください。この属性が使用されているのを見て他の非推奨となっている要素にも適用されてしまうおそれがあるためです。とは言え、Wiki テキスト上ではセル全体に対してCSSによる包括的な指定ができないため、各セルにいちいち指定しなければなりません。全てのセルで罫線を指定すると非常に煩雑になるため、状況によっては border 属性は有用になります。frame 属性や rules 属性と組み合わせることでより複雑な指定が可能です。
- nowrap - 折り返しの禁止
- この属性は非推奨です。style 属性で white-space:nowrap に置き換えてください。
表示方法を規定するが、非推奨とされていないもの
いくつかの要素や属性は、見た目を規定するにもかかわらず非推奨ではありません。積極的に利用する必要はありませんが、CSS に置き換えるとかえって煩雑になるような場合もありますので、状況に応じて判断してください。
要素
- <b>, <i> - 太字・斜体
- これらに替わるWikiマークアップとして「''' '''」「'' ''」があるので、XHTML で記述する必然性はありません。
- 見た目を規定する要素ですが非推奨とはされていません。とは言え、デザイン上の問題なら style 属性で font-weight:bold や font-style:italic とすべきです。また、日本語フォントではほとんどの場合斜体の専用フォントを持っておらず、単純に傾けて表示するだけなので見づらくなってしまいます。<i> にせよ '' '' にせよ使用には注意してください。
- <small>, <big> - 文字サイズを小さめ / 大きめに表示する
- 見た目を規定する要素ですが非推奨とはされていません。とは言え、デザイン上の問題なら style 属性で font-size:smaller や font-size:larger とすべきです。
属性
表に関するものが全てを占めています。
- valign="(top|middle|bottom|baseline)" - セル内テキストの垂直方向の配置
- style 属性で vertical-align:top などに置き換えが可能です。
- border="x" - 罫線の幅の指定
- table 要素に指定する属性です。style 属性で、各セルに border-width:1px などを指定することで置き換えが可能です。
- 特に複雑なことをする必要がなければ、MediaWiki:Common.css などで規定されている class="wikitable" などのクラスを適用することで、簡単に見栄えのする表を作成可能です。
- cellpadding="x" - 各セル内の余白の指定
- table 要素に指定する属性です。style 属性で padding:0.1em などに置き換えが可能ですが、やはり各セルに指定する必要があり煩雑なので、状況によっては cellpadding 属性は有用になります。class="wikitable" を適用した場合は padding も設定されるため、特に理由がなければ cellpadding 属性は必要ありません。
- cellspacing="x" - セル同士の間隔の設定
- style 属性で border-spacing に置き換えが可能です。cellspacing="0" の場合はstyle属性で「border-collapse:collapse」としてもかまいません。
ブロック要素の配置
div 要素や table 要素などの配置については、歴史的な慣行から XHTML では推奨されない記述がされやすい傾向にあります。
中央寄せ
中央寄せのために center 要素や align 属性を使うケースがよく見られます。これらはいずれも非推奨です。いずれの場合も、style 属性で次のように指定します。
style="margin:0 auto"
最初の 0 は上下のマージンを表します。次の auto は左右のマージンですが、これを auto （自動処理）としておくことで親要素の左右から等しい位置、つまり中央にブロックが配置されます。
左寄せ、右寄せ
table 要素は align="left" または align="right" とすると表が左または右に寄せられ、テキストが回り込みます（フロート）。align 属性は非推奨なので、次のように置き換えます。
style="clear:left; float:left" style="clear:right; float:right"
clear:left (right) としているのは、直前に同じく左（右）寄せされたブロック要素があった場合、その右（左）側に回り込んでしまうことを避けるためです。
また style 属性を直接指定するかわりに、
class="floatright"
とすることでも、同様の効果を得られます。
リンクの文字色変更
font 要素や style 属性の color プロパティ指定により、リンク文字の色を変更することが可能です（サンプル）。しかし、これは以下の理由で好ましくありません。
- 状況によるリンクの色分けがされなくなる
- 通常のリンク、既読リンク、存在しない記事へのリンク、スタブ閾値未満のリンクなど、状況によるリンクの色の変化が反映されなくなってしまい、ユーザに不便を強いることになります。
- リンクであることが認識されにくくなる
- ユーザはリンクに特定の色が付いていることを期待してブラウズするので、特にリンクの下線を表示しない設定の時などリンクの発見が著しく困難になってしまいます。
このようにユーザビリティの低下を招いてしまうため、通常名前空間に使用するテンプレートでは原則として使用しない方がよいでしょう。