Yourpedia:ユアプロジェクト テンプレート/マークアップ

このサブページではXHTMLによるマークアップの注意点、及び非推奨要素・属性のCSSへの置き換えなどの指針を示します。

用語の説明

<span style="color:red">これはspan要素の内容です。</span>

これを細かく分割すると、以下のようになります。

XHTML要素の概念図

<	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%などに置き換えてください。

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とすべきです。

属性

表に関するものが全てを占めています。

align="（left|center|right）" - テキストなどの水平方向の配置

td要素とth要素での利用は非推奨とされていません。表のセル内のテキストに対し配置を指定します。意見の分かれるところでしょうが、この属性が使用されているのを見て他の非推奨となっている要素にも適用されてしまうおそれがあるため、極力style属性によるtext-align:rightなどの指定に置き換えた方がいいでしょう。

valign="（top|middle|bottom|baseline）" - セル内テキストの垂直方向の配置

style属性でvertical-align:topなどに置き換えが可能です。

width="xx" - 表示幅の指定

table要素での利用は非推奨とされていません。意見の分かれるところでしょうが、この属性が使用されているのを見て他の非推奨となっている要素にも適用されてしまうおそれがあるため、極力style属性によるwidth:80%などの指定に置き換えた方がいいでしょう。

border="x" - 罫線の幅の指定

table要素に指定する属性です。style属性で各セルにborder-width:1pxなどを指定することで置き換えが可能です。とは言え、Wikiテキスト上ではセル全体に対してCSSによる包括的な指定ができないため、各セルにいちいち指定しなければなりません。全てのセルで罫線を指定すると非常に煩雑になるため、状況によってはborder属性は有用になります。frame属性やrules属性と組み合わせることでより複雑な指定が可能です。

特に複雑なことをする必要がなければ、MediaWiki:Common.cssなどで規定されているclass="wikitable"などのクラスを適用することで、簡単に見栄えのする表を作成可能です。

cellpadding="x" - 各セル内の余白の指定

table要素に指定する属性です。style属性でpadding:0.1emなどに置き換えが可能ですがやはり各セルに指定する必要があり煩雑なので、状況によってはcellpadding属性は有用になります。class="wikitable"を適用した場合はpaddingも設定されるため、特に理由がなければcellpadding属性は必要ありません。

cellspacing="x" - セル同士の間隔の設定

style属性でborder-spacingに置き換えが可能です。

ブロック要素の配置

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プロパティ指定により、リンク文字の色を変更することが可能です（サンプル）。しかし、これは以下の理由で好ましくありません。

状況によるリンクの色分けがされなくなる

通常のリンク、既読リンク、存在しない記事へのリンク、スタブ閾値未満のリンクなど状況によるリンクの色の変化が反映されなくなってしまい、ユーザに不便を強いることになります。

リンクであることが認識されにくくなる

ユーザはリンクに特定の色が付いていることを期待してブラウズするので、特にリンクの下線を表示しない設定の時などリンクの発見が著しく困難になってしまいます。

このようにユーザビリティの低下を招いてしまうため、通常名前空間に使用するテンプレートでは原則として使用しない方がよいでしょう。

外部リンク

• HTML 4.01 Specification - W3C勧告
  • HTML 4.01 Specification（ja） - 日本語訳（参考）
• XHTML 1.0：The Extensible HyperText Markup Language（Second Edition） - W3C勧告
  • XHTML 1.0：拡張可能ハイパーテキストマークアップ言語 - 日本語訳（参考）