How to add style to XMLの翻訳

Posted on by editor

原文”How to add style to XML” (http://www.w3.org/Style/styling-XML.html)原著作権者W3C翻訳者久保渓注意公式版はW3Cに掲載されている英語版であり、日本語版はあくまでW3Cから権威付けられた参考文書にすぎません。この文書には、翻訳上の誤りがあり得ます。翻訳者は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。その他このサイトに置かれているその他の翻訳物の一覧は、トップページをご覧ください。

XMLへのスタイルの適用方法

(このページはCSSスタイルシートを使用しています。)

スタイル

どちらを使うべきか?

外部

CSS

埋め込み型

XSL

CSS2勧告は、CSSをXMLを一緒に 使用するためのチュートリアルを含んでいます。 (? 2.2をご覧ください。) CSS2が書かれた時には、公式の XML内でのスタイリングの仕様は準備できていませんでした。 下記は、チュートリアルに含めるべき事柄です。 例は、CSSを使用している点を 書き留めておきますが、多くの場合はスタイルのルールは XSLでも記述されています。

外部スタイルシート

チップ: ブラウザで 試してください。

HTMLは外部のスタイルシートにリンクするための リンク要素を持っていますが、すべてのXMLベースのフォーマットが そのような要素を持っているわけではありません。もし適当な要素がない場合、 あなたはそれでも下記のようなxml-styleshhetのプロセシング 命令の形で外部スタイルシートを添付することができます。

<?xml-stylesheet href="my-style.css" type="text/css"?>
... ドキュメントの残り ...

このプロセシング命令(PI:processing instruction)は、ドキュメントの最初の タグの前に記述されなければなりません。type="text/css"は必須 ではありませんが、ブラウザの助けになります。もしそのブラウザがCSSをサポート していない場合、このファイルをダウンロードする必要がないとわかるからです。

単にHTMLのlink要素と同じように、複数の xml-stylesheetPIがあり、それらはtypeやmedium、titleなどの 属性をセットすることができます。

ここからはより大きな例です。まず三つのスタイルシートを持っていると 仮定しましょう。そのうち一つは、それぞれの要素（inline, block, list-itemなど） の基礎的な表示タイプを設定し、他の二つはそれぞれのカラーと余白を設定します。 最後の二つは、お互いに代わりになれるたいうになっており、ドキュメントの読者は どちらを使用するか選ぶこともあるでしょう。ドキュメントが印刷される時をのぞいて、 最後のスタイルを使用するでしょう。これが 一般的なスタイル シートです。

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

下記は、代替のスタイルシートの一つで、 “modern.css” という名のファイル内にあります。

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

そしてこれが、”classic.css“という名の別のスタイルです。

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

これらの三つのスタイルシートがリンクしているXMLドキュメントは以下の ようになっています。

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

さらなる詳細については、W3C勧告“XMLドキュメントで想定されるスタイルシート”

埋め込み型スタイルシート

チップ: あなたのブラウザで、 試して みてください。

HTMLは、外部ファイルを必要とせずに、HTMLファイル内に直接スタイルシートを 埋め込むことができるstyle要素を持っています。 いくつかのケースではこれはもっと簡単で、特にスタイルシートがドキュメント に特定的なものである場合などです。

ほとんどのXMLベースのフォーマットはそのような要素は持っていませんが、 外部スタイルシートにリンクするのと同じPIが、ドキュメント自身に埋め込まれた スタイルシートにポイントするのに使用することができます。 2006年02月時点では、これはまだ技術的な問題を抱えており、公式の 仕様は存在しません。例えば、以下のようになります。

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

この例では、type="text/css"は必ず表示されていなければ なりません。そうでなければ、ブラウザ(もしくは他のプログラム)は、スタイルシート 言語を推定しなければなりません。xml-stylesheet PIは今は外部 スタイルシートにはポイントしていませんが、ドキュメント自身の要素にポイント しています。その要素は、リンクのターゲットとしての役割を持つid 属性として識別されます。(特定のXMLフォーマットに依っては、id属性 は、何か他のもので呼ばれます。また、いくつかのフォーマットでは、適切な 属性がまったくありません。)

未解決の問題

W3C勧告 “XMLドキュメント用に想定されるスタイルシート” 埋め込み型のスタイルシートのケースを定義することはありませんが、 (“#”からスタートしている)URL断片をもとに推定できるように なっています。2006年現在では、まだいくつかの未解決の問題があり、 公開された仕様はありません。問題は以下のとおりです。

  1. 埋め込み型のスタイルシートはサーバーから別々にダウンロード するわけではないので、サーバーはスタイルシートのフォーマットが何なのか ブラウザに話すことができません。ですので、type属性は、 そのケースでは必要です。もしその属性が取り除かれた場合どうなるかは 定義されていません。スタイルシートは無視されるべき？CSSとして扱うべき？ 言語を決定するいくつかのアルゴリズムはある？
  2. ほとんどのXMLベースのフォーマットでは、断片識別子は要素の内容ではなく 完全な要素を識別します。しかし、<ARTICLE>で始まる スタイルシートは正しいCSSではありません、ですので断片識別子が要素自身ではなく 要素の内容にポイントするスタイルシートPI内で使用する追加のルールが必要です。
  3. 同じように、ポイントされた要素の内部に子要素がある場合に どうするかは定義されていません。スタイルシートは連結されたすべての要素 のすべての内容を含むべき？それとも単に最初の要素の内容のみ？もしエラーが あれば、すべての要素は無視される？
  4. 上記の例では、URLはドキュメント自体を指し示します。 ブラウザがそのURLを見ることができるという事実は、そのブラウザがXMLをパース する方法を知っているということと示されたスタイル要素を多分見つけることが できるということを示しています。しかし、ここでは、外部のドキュメント の断片にポイントするURLを考えてみましょう。首尾良くスタイル要素を取ってくる ために、ブラウザはまず始めに外部のドキュメントをダウンロードおよびパースし、 そしてそれから、スタイルシーを抽出しパースします。しかし、type 属性は、二つのうち一つのタイプを与えるのみなので、ブラウザはスタイルシーを 使えるのかどうか知ることはできません。それはtype属性が外部 ドキュメントのタイプやそれに埋め込まれたスタイルシートを与えることさえも 行いません。
  5. スタイルシートPIは、ブラウザが知らないフォーマットのXMLなどの、 “Generic XML,”とともに使うのがもっとも役に立ちます。 スタイルシートのおかげで、少なくとも何らかのものを表示することができます。 SVGやSMIL、XHTMLなどのよく知られたフォーマットは、スタイルシートが明記する ことができる範囲を超えて描画できるようにするたしくのそれぞれ独自のルール を持っています。しかし、ブラウザが知らないいつドキュメントがGeneric XMLとして 扱われるのかということがあります。特に、ブラウザはどの属性がID属性か知りません。 xml:id と呼ばれる属性のためのW3C勧告があり、もしそのドキュメントがその名前の属性を 含んでいる場合、URL断片はそれらのうちの一つを指し示すでしょう。しかし、 もしそのような属性がなければ、ブラウザはどの属性がIDかを決定するために別の 方法を使用しなければなりません。もしドキュメントが一番最初にDOCTYPEを 保持しておりブラウザがその指し示すDTDを取り出すことができる場合、そのDTDは ID属性を特定するでしょう。しかし、ブラウザはDTDを読めないかもしれませんし、 DOCTYPEはないかもしれません。
  6. 断片IDは、ドキュメント内で要素を示すための単なる一つの方法に すぎません。別のW3C勧告は、 XPointers をID属性の必要なしにドキュメント内で要素を識別するために定義しています。 しかし、XPointersを理解することは、現段階ではスタイルシートPIをブラウザで 使用するために必須ではありませんし、それなので、ブラウザがXPointersを解釈する か無視するのかは不明瞭です。

インラインスタイル

HTMLはまた、 スタイル属性のような形で、個別の要素に直接スタイルを付加 することを許可しています。ほとんどのXMLベースのドキュメントフォーマットは、 そのような属性を持たないでしょうが、いくつかはドキュメントの内部で使用 することのできるHTMLの機能（モジュール）を許可しています。

クラス属性

チップ: ブラウザで試して みてください。

HTMLの要素のサブクラスを作ることを許可する クラス属性は、大多数のXMLベースのドキュメントフォーマット では利用することができないようです。もちろんCSSは、単にclass だけでなく、どんな属性ベースでも要素を選択することができますが、シンタックス はより利便性が低いです。

以下は例です。もしclass属性があってドキュメントフォーマットが それをHTML内で動作するように定義しているなら、ドット(.)でそれらを表記する ことができます。(ですので、この特定の例は動作しないでしょう。なぜなら、 <doc>は、ブラウザがclassを持つものとして知っている ものではないからです。)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

もしドキュメントフォーマットがclassがサブクラスを作成すること 明記していない場合、あなたはより長いセレクターを”[ ]”とともに使用 する必要はありません。

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

もしclass属性がない場合、しかし他の何かを利用できるならば、 属性セレクター”[ ]”を適用することができます。

ブラウザで 試して見てください。

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>

 活動 技術報告 翻訳 ソフトウェア サイト目次 検索Bert Bos
Created 29 February 2020 (最終更新日: $Date: 2019/08/17 15:35:36 $)