初心者のためのホームページ作り 第67号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第67号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/9/19
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第14回 --- リスト
   ■ XML講座 第5章 --- XSL
HTML講座 --- リストの作成
コンテンツの一部に箇条書きなどのリストを表示したい場合があります。今回は箇条書きリストとその行頭に付与されるマーカーについて解説します。
番号なし(順不同)リスト
もっともポピュラーなリストは、ul 要素によって利用されています。一般的な視覚系ブラウザでは、その行頭(マーカー)に黒丸が表示されます。以下はそのサンプルです。
<ul>
  <li>箇条書きその1</li>
  <li>箇条書きその2</li>
  <li>箇条書きその3</li>
</ul>

実行結果は以下の通りです。

ul 要素はブロックレベル要素です。一般的な視覚系ブラウザでは、前後に1行分の余白が表示されます。
番号付きリスト
リストの行頭に番号を配置する番号つきリストは、ol 要素によって定義されます。一般的な視覚系ブラウザでは、1.2.3. というように番号が付与されて表示します。
<ol>
  <li>箇条書きその1</li>
  <li>箇条書きその2</li>
  <li>箇条書きその3</li>
</ol>

実行結果は以下の通りです。

  1. 箇条書き
  2. 箇条書き
  3. 箇条書き
なお、リスト項目を定義する li 要素は、一般的な視覚系ブラウザではインデント(字下げ)されて表示されます。各リストでは、最低1つ以上の陸と項目を配置しなければなりません。
マーカーの変更
リストの行頭で表示されるマーカーは、作者が任意にその種類を指定することができます。
HTML4.01では非推奨扱いになりますが、type 属性を利用する方法があります。
(非推奨扱いなので文書型定義は Transitional 環境で利用可能です)
また、スタイルシートでは ol 要素におけるマーカーの表現が数多く制定されています。
type属性によるマーカーの指定 (非推奨扱い)
CSSによるマーカーの指定 Webブラウザによってはサポートされない場合があります。
マーカーの位置(outside、inside)
リストの初期値として、マーカーはコンテンツの外側で表示されます。これを outsideマーカーと呼びます。スタイルシートでは、マーカーを inside に設定することができます。

下記にマーカー位置が異なるリストを提示しました。マーカー位置に注意してください。

outside

inside

XML講座 --- XSL
XML文書は、それ自体では Webブラウザに出力することができません。Webブラウザにデータとしての付加価値を追加して表示するためには、スタイルシートが必須です。
XMLデータを Webアプリケーションとして利用するスタイルシートとは、出力先のフォーマットを設定するための言語である XSL(eXtensible Stylesheet Language)を使います。
XSLとは?
XML文書を他のアプリケーションで利用する際の出力フォーマット(テンプレート)を設定するために用いられます。
XSLテンプレートを数種設定すれば、同じ XMLデータの出力をコントロールしたり、出力先別に用意することもできます。
例えば印刷(版下も含める)のためのテンプレートや Webドキュメント、電子メールにも活用することが可能です。
逆に、1つのテンプレートで複数の XML文書にも対応することができます。
XSLの詳しい説明はこちらへ → 用語解説:XSL
XSL利用の規則
XSLは XMLのサブセットとして定義されているので、冒頭に必ず XML宣言を行わなければなりません。
また、XSLは W3C よりその仕様が提供されており、基本的に W3C仕様書を参照するために、名前空間 を用いてその URI を指定しなければなりません。
XSL要素一覧
今回は、MSIE5.0 以降で実装されている XSLプロセッサを利用するための書式について、その要素の一覧をご案内します。
XSLスタイルシートを作成するための要素は、以下の通りです。
xsl:apply-templates XSL処理モジュールに、選択された各ノードのパターンに基づき、適切なテンプレートを適用するよう指示する
xsl:attribute 属性ノードを作成し、出力要素(エレメント)と結びつける
xsl:choose xsl:otherwise、xsl:when と連携して、複数の条件分岐を提供する
xsl:comment コメントを出力する
xsl:copy ソースのカレント・ノードをコピーして出力する
xsl:element 指定された名前を持つ、出力要素(エレメント)を作成する
xsl:eval * テキスト文字列を生成するため、スクリプト式を評価する
xsl:for-each 複数のノードに対し、テンプレートを繰り返し適用する
xsl:if 単純な条件分岐を提供する
xsl:otherwise xsl:choose、xsl:when と連携して、複数の条件分岐を提供する
xsl:pi 出力に処理命令を生成する
xsl:script * スクリプト拡張のための、グローバル変数を定義や関数を定義する
xsl:stylesheet スタイルシートのルート要素であり、xsl:templatexsl:scriptを持つ
xsl:template 各ノードのパターンが見つかった時に出力すべき内容を指定する、テンプレートを定義する
xsl:value-of 選択されたノードの値を、テキストとして出力する
xsl:when xsl:choosexsl:otherwise と連携して複数の条件分岐を提供する

* スクリプト機能をサポートするための MSIE独自拡張機能

次回(第69号)は、XML文書を Webブラウザで出力するための XSL文書を作成します。


This page is Valid HTML 4.01! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp