HTML, CSS の基本

作田 誠
概要: インターネットの標準フォーマットとなった HTML, CSS の基礎を学ぶ。 XMLに関する説明も入れてある。
キーワード: HTML, CSS, XML

目次

1  HTML, CSS, XML の概要とWeb

HTML, XML の元となった SGML, HTML, XML さらに XSL の概要を説明する。

1.1 SGML (Standard Generalized Markup Language, 標準一般化マーク付け言語)

1.2 HTML (HyperText Markup Language)

1.3 CSS (Cascading Style Sheet)

1.4 XML (Extensible Markup Language, 拡張可能なマーク付け言語)

1.5 XSL (Extensible Stylesheet Language)

XSL (Extensible Stylesheet Language) は2つの機能を持つ。

データ構造の変換   XSLT (XSL Transformations)
XML文書のデータ構造の変更や加工を行う。
XML文書をHTMLへ変換することなどがよく行われている。
表示・印刷・組版のための書式設定   XSL-FO (XSL Formatting Objects)
XML文書を表示する際のマージンや色、フォントといったさまざまな書式が定義できる。
XSL-FOはまだ実際にはあまり使われていない。

1.5.1 XSLT (XSL Transformations)

  • XML文書のデータ構造の変更や加工を行う変換言語
  • 1999年11月に XSLT 1.0 がW3C勧告となった
  • XML文書を読み込んで、加工して出力する簡易スクリプト言語として使用できる。
  • 出力はXML文書とは限らず、プレーンテキストやHTMLを出力することもできる。
    そのため、XML文書をHTMLに変換するために使用されることも多い。

※ 2007年1月27日には XSLT 2.0 が勧告となった。

1.5.2 XSL-FO (XSL Formatting Objects)

  • XML文書を表示する際のマージンや色、フォントといった表示・印刷・組版のための書式設定を行う
  • 2001年10月に XSL 1.0 がW3C勧告となった
  • SGML用のスタイルシート言語であるDSSSLの流れをくむもの
  • スタイル指定の流れ
    • 変換言語(XSLT)を用いて元のXML文書からスタイル情報を付加したツリー(XSL-FOツリー)を新たに作成する
    • そのXSL-FOツリーをXSL-FO対応の表示・印刷エンジンに渡し、出力機器に表示・印刷させる
  • まだあまり使われていない。

※ 2006年12月5日には XSL 1.1 が勧告となった。

1.6 XPath (XML Path Language)

※ 2007年1月27日には XPath 2.0 が勧告となった。

1.7 XHTML (Extensible HyperText Markup Language)

※ XHTML 2.0が策定中だったが、打ち切られた。
HTML5 を XML 記法で記述したものを XHTML5 と呼ぶこととなった。

1.8 今後の展開予想

2  HTML入門

HTMLファイルはWebブラウザの標準ファイル形式である。 テキストファイルなので、メモ帳などテキストファイルエディタでも中味を閲覧・編集できる。

HTML規格は HTML 2.0 (1995年11月), HTML 3.2 (1997年1月), HTML 4.0 (1997年12月), HTML 4.01 (1999年12月) など多くあり、長い間 4.01 で落ち着いていた。
その後、XML化されたXHTML規格として XHTML 1.0 (2000年1月), XHTML 1.1 (2001年5月) が生まれたが、一般に広く利用されるには至らなかった。

新規格が長い間策定されていたが、2014年10月に HTML 5 が標準勧告となった。さらに、2016年11月に HTML 5.1 が、2017年12月に HTML 5.2 が勧告されている。

ここでは、主に HTML 5 に沿った文書作成について説明するが、HTML 5 で導入された新しいタグはあまり使わず、従来の HTML 4.01 と比較的互換の高いタグを使った書き方を中心に説明する。

2.1 タグ・要素・内容・属性

"<" で始まり ">" で終わる文字列をタグ (tag)と呼び、特に </ で始まるタグを「終了タグ (end tag)」、それ以外のタグを「開始タグ (start tag)」と言う。 開始タグから終了タグまでを「要素 (element)」、開始タグと終了タグの間に入っているものをその要素の「内容 (content)」と言う。 開始タグは「属性 (attribute)」を持つことができる。

HTML では、XML の 定義済み実体 や 数値文字参照 で特別な文字を表すことができる。詳しい内容については「XML入門」の章を参照のこと。また、HTML独自に空白や特殊文字を表す文字実体参照が定義されており使うことができる。

2.1.1 タグ・要素・内容

p要素(後述)を例にタグによる要素の構成を説明する。

<p>ここには一段落を書く。</p>

開始タグ<p>
終了タグ</p>
内容ここには一段落を書く。
要素<p>ここには一段落を書く。</p>

「内容」を持たない要素をvoid要素 (void element)と言う。void要素は開始タグのみで記述するが、最後の > の前に / をつけた /> で終わる書き方も許される。

void要素の例

<meta charset=UTF-8 />

<br>

2.1.2 属性

開始タグは「属性」を持つことができる。属性は要素に対して付加的な情報を付け加えるために使用される。

付加される情報は属性名と値のペアを = でつなげて表現される。 属性の値はダブルクォート(またはシングルクォート)で囲んで記述するが、属性値が以下の文字を含まないときにはダブルクォート(またはシングルクォート)で囲む必要はない。

  • スペース
  • 小なり記号 <
  • 大なり記号 >
  • シングルクォート '
  • ダブルクォート "
  • バッククォート `
  • 等号 =

引用符を省略できない属性値の文字

属性の例

<input type=number min=0 max=10>

<div>
<img id=sampleImage1 src=gazou.png alt="左寄せのサンプル画像" style="float: left">
<p>ここの文章は画像の右側にくる。</p>
<p style="clear: left">左端から新しい段落を始める。</p>
</div>

ON/OFFを表す属性 (ブーリアン属性 boolean attribute) の場合は、属性名だけ書いて「=値」を省く書き方を使う。

ブーリアン属性の例 (input要素を無効化する disabled 属性の指定)

<input type="text" name="user" disabled>

属性は開始タグ中に空白で区切って複数記述することができるが、属性名が同じものが複数あってはいけない。

2.1.3 大文字と小文字

HTMLでは要素名や属性名の大文字と小文字を区別しない。本ページでは小文字で表記している。
たとえば、<HEAD> でも <head> でも同じく head 要素であり、<Body> でも <boDY> でも同じく body 要素となる。

属性値については、大文字と小文字を区別しないものと区別するものがある。
代表的なものでは、id 属性値や class 属性値については大文字と小文字が区別される。

(例)
id=firstitem
と
id=firstItem
は区別される。

2.2 文書型宣言 (DOCTYPE宣言 Document type declaration)

文書型宣言はその文書型のタグ名や要素の構造を定義するものである。詳しくは「XML入門」の章を参照。

HTML 5 の場合は文書型宣言は以下のようになる。

<!DOCTYPE html>

DOCTYPEの直後にhtmlと記述されており、これがHTMLのルート要素になる。

※ 参考 ※
HTML 4.01 文書の場合の文書型宣言は以下のうちの一つになる。

HTML 4.01 Strict
廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義されている。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
フレーム関連を除く、廃止予定の要素や属性を含むすべての要素と属性が定義されている。ブラウザは将来廃止予定の要素も含めすべてをサポートする必要がある。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
HTML 4.01 Frameset
フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されている。ブラウザは将来廃止予定の要素も含めすべてをサポートする必要がある。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

※ 　　 ※

2.3 html要素

文書型宣言の後に、その文書型の文書本体を記述する。一般にHTML文書は要素の組み合せの木構造で表現され、文書の一番上の階層の要素をルート要素と呼ぶが、HTML文書ではルート要素は html要素 になる。

文書中の各要素は厳密に入れ子をなしていなければならない。つまり、内側の要素から一番外側のルート要素にいたるまで、すべての開始タグと終了タグの対応が取れていなければならない。

※ HTMLでは省略の可能なタグもあるので、見かけ上開始タグと終了タグの対応が取れていなくても、タグが補われて規格に合った文書になる場合がある。

html要素の内側に子要素としてhead要素とbody要素が一個ずつ順に現れる。

html要素の開始タグには、以下の階層で使う要素に関する基礎的情報として、言語識別などを指定できる。日本語の文書を指定する場合は以下のようになる。

<html lang="ja">

属性の意味

lang="ja"   言語識別
文書が使用する言語を日本語に指定。

※ 参考 ※
HTML 4.01 文書の場合のhtml要素の開始タグは以下のような形になる。

<HTML>

<html lang="ja">

など。
※ 　　 ※

2.4 head要素

html要素の内容には、最初の要素としてhead要素を一個だけ記述する。head要素をhtml要素の子要素と呼ぶ。

head要素にはその文書の基礎的な情報を記述する。

head要素の子要素
meta要素そのファイルの文字エンコーディングの指定(charset= の部分) など
link要素スタイルシートファイルの指定 など
title要素その文書の題名

実習のファイルでは文字エンコーディングとして UTF-8 を使うので "UTF-8" を指定する。

※ 機種依存文字について ※

WindowsのシフトJISコードには独自拡張文字 ( ℡ や ㈱ や ⅶ など。順に TEL, (株), ローマ数字の vii) があり、これらはWindows以外の環境のシフトJISでは正しく表示できない場合が多く、機種依存文字と呼ばれている。

これらの機種依存文字を確実に表示させる意図で文字エンコーディングを "Windows-31J" と指定することは一策で、Windows-31J にブラウザおよびシステムが対応していればちゃんと表示されるだろうが、Windows以外の環境で対応しているものは少ないと思われる。
シフトJISのファイルではできるだけこのような文字を直接使わないようにしたい。

現在では、機種依存文字の多くはUnicodeで正式に登録されているので、Unicodeのエンコーディングである UTF-8 や UTF-16 で文書を作成すれば機種依存性を抑えつつ豊富な文字種を使用できる。

※ 　　 ※

link要素は、次の「CSSの利用」にあるように、文書にスタイルシートファイルを関連付けるために使用する。

2.4.1 meta要素

meta は metainformation (メタ情報) の略で、「それまでの機能に加えて、後から機能を追加するためのもの」といった意味合いを持つ。

meta要素はいろいろな目的で使用されるが、代表的なものとして、head要素の内部に置き文書の文字エンコーディング (UTF-8) を記述するのに使用される。
(charset=UTF-8 の部分)

    <meta charset=UTF-8>

このmeta要素でそのファイルの文字エンコーディングを記述するので、そのファイル内で日本語が現れるよりも前にmeta要素を記述する必要がある。<head>の直後に入れるのが良い。

2.4.2 title要素

文書のタイトル

title要素は文書に題名をつける。head要素の中に必ず一個記述する。title要素の内容には単なるテキストしか記述できず、要素は入れられないことに注意。

title要素の内容はWebブラウザでこの文書を開いているときのウィンドウの名前として表示されることが多い。

2.5 CSSの利用

細かい見栄えの調整は HTML でなく CSS で行うことが望ましい。 CSSの適用方法は以下の3通りがある。

  • style属性
  • style要素
  • 外部スタイルシート
style属性

style属性は特定要素の開始タグ内においてスタイル指定をする方法である。ほとんどすべての要素には、style属性をつけて、その属性値としてCSS形式のスタイル指定をすることができる。
適用範囲はその要素の中だけとなる。
セレクタを使用しないので、使い方は下記のような形となる。

  <要素名  style="特性名1:特性値1; 特性名2:特性値2"   >   ・・・   </要素名>
style要素

style要素はhead要素の中に置かれ、

<style type="text/css">

        ¦
        ¦

</style>

の中にCSSによるスタイル指定を記述する。
適用範囲は当該文書全体となる。

HTML 5 では、スタイルシートのタイプがデフォルトで text/css なので、以下のように省略できる。

<style>

   ¦
   ¦

</style>

style要素の開始タグに後述の media 属性を入れ、内容部分のCSS設定が適用される環境を限定することもできる。

外部スタイルシート

外部スタイルシートはHTML文書を別のCSSファイルと結びつける方法で、文書の中身と見栄えの体裁を分離できるため推奨されている。

HTML文書に外部のCSSスタイルシートファイルを適用するには、

head要素に


<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="スタイルシートURI" type="text/css" media="screen" />

を記述する。

HTML 5 では、スタイルシートのタイプがデフォルトで text/css なので、以下のように省略できる。


<link rel=stylesheet href="スタイルシートURI" media=screen>

「スタイルシートURI」は該当するものに書き変えること。なお、CSSファイルの拡張子は .css とするのが一般的である。
※ URIについて

上記の中の media 属性 は、スタイルシートが適用対象とする環境を指定するもので、

all
すべてのメディア (省略値)
screen
コンピュータ画面
print
印刷

などがある。
別法として、link要素での指定ではmedia属性無しで全メディア対象としておき、CSSファイル中で例えば以下のようにメディアを切り分ける手法がある。



・・・ 全メディア対象の CSS 設定を記述 ・・・


@media print {


    ・・・ 印刷用の CSS 設定を記述 ・・・


}

style要素および外部スタイルシートにおけるスタイル指定の基本は

セレクタ {
        特性名1 : 特性値1 ;
        特性名2 : 特性値2 ;
            ¦
}

の形である。
「セレクタ」で対象とする要素を指定する。
{ と } で囲まれた部分をブロックと言う。「特性名1」等はプロパティと言われるスタイル項目で「特性値1」等はその項目に設定する値である。複数の特性に値を設定する場合は、間をセミコロンで区切る。
セレクタで指定される対象に対してブロック内の特性の設定がすべて有効になる。

セレクタの指定方法は多種あるが、よく使用されるものを以下に挙げる。

タイプセレクタ

「要素名」だけを指定したセレクタ。指定した要素名のすべての要素に対してブロック内の特性の設定が有効になる。

全称セレクタ

「*」を指定したセレクタ。すべての要素に対してブロック内の特性の設定が有効になる。

クラスセレクタ

「 . クラス名」の形のセレクタ。指定したクラスに属する (すなわち、指定された class属性値を持つ) すべての要素に対してブロック内の特性の設定が有効になる。

IDセレクタ

「 # ID名」の形のセレクタ。指定したid属性値を持つ要素のみが対象となる。

以下は、複数のセレクタを組合わせて複雑な指定をするものである。

子孫セレクタ

「セレクタ1   セレクタ2」の形のセレクタ。「セレクタ1」の対象となる要素の子孫要素の中で、「セレクタ2」に該当するものに対して設定が有効になる。

子供セレクタ

「セレクタ1  >  セレクタ2」の形のセレクタ。「セレクタ1」の対象となる要素の直接の子要素の中で、「セレクタ2」に該当するものに対して設定が有効になる。

隣接セレクタ

「セレクタ1  +  セレクタ2」の形のセレクタ。「セレクタ1」で対象となる要素1と「セレクタ2」で対象となる要素2が同じ親要素を持つ兄弟要素であり、かつ、要素1の直後に要素2がある場合に、要素2に対して設定が有効になる。

間接セレクタ

「セレクタ1  ~  セレクタ2」の形のセレクタ。「セレクタ1」で対象となる要素1と「セレクタ2」で対象となる要素2が同じ親要素を持つ兄弟要素であり、かつ、要素1の後に要素2がある場合に、要素2に対して設定が有効になる。
隣接セレクタと違い、直後の兄弟要素だけでなく、後にあるすべての兄弟要素に適用されることに注意。

セレクタのグループ化

「セレクタ1,   セレクタ2,   セレクタ3」のように複数のセレクタをコンマで区切って並べて指定する。指定された「セレクタ1」「セレクタ2」「セレクタ3」などのどれかに該当する要素が対象となる。

2.5.1 長さの単位

CSSで要素の占める高さや幅、枠の幅、フォントのサイズなどを数値で指定する場合には、「数値」に「単位」をつけたものを使用する。 単位は種々あるが、よく使われるものを下表に示す。
なお、0 はどの単位でも 0 なので、単位をつけず単独で使用してもよい。

単位の記号名称説明
inインチ実際の長さ単位と同一。1in = 25.4mm
cmセンチメートル実際の長さ単位と同一
mmミリメートル実際の長さ単位と同一
ptポイント1/72インチを 1pt とする
px
CSSピクセル

以前は、
デバイスピクセル
以前は、コンピュータ画面の最小単位の一点 (ピクセル (pixel)、画素) の占める幅・高さである デバイスピクセル (device pixel) を表すとされていた。
新しい規格では、高解像度環境に対応し、CSSピクセル (CSS pixel) 1px を、下に示す 参照ピクセル (reference pixel) を最も良く近似するデバイスピクセル整数倍 とすることが推奨となった。
参照ピクセルは 96dpi のデバイス画面に対して約 0.0213 度の視角に相当する距離として定義され、名目上の腕の長さとされる 28in (≈ 71cm) の距離から見た場合に 1px = 1/96in ≈ 0.265mm となる。

なお、CSSピクセル (論理ピクセル) の デバイスピクセル (物理ピクセル) に対する比率を デバイスピクセル比 (device pixel ratio) という。既にデバイスピクセル比が 2 (2x2 デバイスピクセルが 1 CSSピクセル) や 3 (3x3 デバイスピクセルが 1 CSSピクセル) などの機器が普及している。
emエムフォントの大きさ (font-sizeプロパティの値) を 1em とする。M (大文字) の幅が由来とされているので em と名づけられている
enエン1em の半分を 1en とする。N (大文字) の幅が由来とされているので en と名づけられている
exフォントの x (小文字) の高さ (x-height) を 1ex とする
%パーセント元の値を 100% として相対値で指定する
remレムルート要素 (HTML文書ではhtml要素) のフォントの大きさを 1rem とする

(例)

font-size: 16px;
文字の大きさを 16 px とする
font-size: 10pt;
文字の大きさを 10 ポイントとする

font-size に対して、フォントに関わる相対的長さ単位で指定する場合は、親要素の文字の大きさが基準となる。

font-size: 1.2em;
文字の大きさを、基準となる親要素の文字の大きさに対して 1.2 倍とする。
これは下のようにパーセントで表したのと同等である
font-size: 120%;
文字の大きさを、基準となる親要素の文字の大きさに対して 120% とする

2.6 ブロックレベル要素とインライン要素

HTMLの文書本体の要素には大別してブロックレベル要素とインライン要素の2種類がある。

ブロックレベル要素は一行～複数行全体を占めるような要素で、視覚的には幅いっぱいの矩形領域を表すので、前後に改行を伴うことになる。

代表的ブロックレベル要素
h1 - h6, p, address, blockquote, dl, ul, ol, table, hr, pre, div

インライン要素は一行中の局所的一部分を表すもので、視覚的には前後の部分とつながっており、前後に改行は入らない。

代表的インライン要素
a, br, em, strong, q, code, kbd, samp, img, span

HTML文書の多くの要素は内容としてインライン要素とテキストを持つ。インライン要素とテキストをまとめて「テキストレベルのもの」と言うことにする。

2.7 文字実体参照と数値文字参照

HTML文書では、XMLで定義されている定義済み実体と数値文字参照が利用できる。また、HTML独自の文字実体参照 (character entity reference)が多く登録されており利用できる。その中でもよく使われる空白を表すものを下表に示す。

HTMLの文字実体参照の例 (空白)
文字実体参照数値文字参照内容
&nbsp;
&#xa0;
&#160;
改行しない空白
&ensp;
&#x2002;
&#8194;
フォントサイズの半分の幅の空白
&emsp;
&#x2003;
&#8195;
フォントサイズと同じ幅の空白
&thinsp;
&#x2009;
&#8201;
通常フォントサイズの1/5 (場合により 1/6) の幅の空白

2.8 body要素

head要素の次にbody要素を記述する。 body要素もhtml要素の子要素で、head要素とは兄弟の関係になる。

body要素の内容には文書の本文を記述する。子要素としてブロックレベル要素を取る。テキストレベルのものは直接内容に入れてはいけないことに注意。

2.9 HTML文書の基本骨格

今までの説明をまとめて、HTML 5 で外部CSSスタイルシートを使ってHTML文書を記述したときの文書の基本骨格を示す。

リスト3  HTML 5 文書の基本骨格

<!DOCTYPE html>
<html lang=ja>
  <head>
    <meta charset=文字エンコーディング指定>
    <link rel=stylesheet href="スタイルシートURI">
    <title>文書のタイトル</title>
  </head>
  <body>
        ここにbody要素の内容 (文書の本体) を書く。
        ただし直接入れられるのはブロックレベル要素のみ。
        したがって、この書き方は駄目。
  </body>
</html>

「文字エンコーディング指定」の部分は文書に使用している文字エンコーディングの指定を入れる。

文字エンコーディング指定
JIS であればISO-2022-JP
日本語EUC であればEUC-JP
シフトJIS であればShift_JIS
UTF-8 であればUTF-8
UTF-16 であればUTF-16


演習1

PC演習室のHドライブもしくはUSBディスク等長期保存される場所に、新しく授業用のディレクトリ (フォルダ) を作りなさい。以下では、ディレクトリを mmw とする。 さらに、mmw ディレクトリの中にディレクトリ(フォルダ) html を作り、その html ディレクトリの中に上で示した骨格のファイルを basic.html という名前で UTF-8 エンコーディングで保存しなさい。

文書のタイトルは「名前(学籍番号) マルチメディアWeb技術のページ」、文字エンコーディング指定は UTF-8 とする。
「名前(学籍番号)」の部分は自分のものにすること

「スタイルシートURI」は mmw.css とすること。mmw.css はこちらで雛形として用意したものをダウンロードし同じディレクトリに保存して使うこと。

作ったファイルをブラウザで開き、表示を確認しなさい。


以下では本文(body要素の内容)に記述できる要素、つまりbody要素の子孫要素となり得る要素を説明していく。

2.10 見出し要素 h1, h2, h3, h4, h5, h6

本文につける見出しを記述する。大見出し、小見出しなど階層的な見出し構造を構成できるように、最上位の階層の見出し(h1)から最下位の見出し(h6)まで六種類(h1, h2, h3, h4, h5, h6)用意されている。
見出し要素自身はブロックレベル要素だが、見出し要素の内容にはテキストレベルのものしか入れられない。

見出し要素を使って、たとえば以下のように、文書内で統一のとれた階層分けをするとよい。

文書内で統一のとれた階層分けの例
h1title 文書の題名
h2chapter 章
h3section 節
h4subsection 小節 (項)
h5subsubsection 小々節 (目)
h6paragraph title 段落見出し


リスト4  見出し要素の例 (段落を表すp要素については後述)

<h1>日常の記録・ニュース</h1>

<h2>2005年の記録</h2>
<p>8月郵政民営化をめぐって衆議院が解散。9月の選挙では自民党が圧勝した。</p>

<h3>1月の記録</h3>
<h4>1日の記録</h4>
    ¦
<h4>31日の記録</h4>

<h3>2月の記録</h3>

    ¦
    ¦

<h3>12月の記録</h3>
<h4>1日の記録</h4>
    ¦
<h4>31日の記録</h4>

<h2>2004年の記録</h2>
<p>日本では韓国ブーム。2004年10月中越地方で連続して大きい地震が発生し大きな被害を出した。
イラク戦争後のゴタゴタは続いたが、アメリカではブッシュ大統領が再選された。</p>

<h2>2003年の記録</h2>
<p>2003年は宮城県で地震の多い年だった。
世界はイラク戦争でゴタゴタして、日本も自衛隊派遣問題でもめた。</p>

<h2>2002年の記録</h2>
<p>5月31日から6月30日まで日韓共催のサッカーのワールドカップがあった。</p>

<h2>2001年の記録</h2>
<p>9月11日の同時多発ハイジャックテロは歴史的大事件となった。
これ以降、飛行機搭乗の際のチェックが厳しくなった。</p>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

日常の記録・ニュース

2005年の記録

8月郵政民営化をめぐって衆議院が解散。9月の選挙では自民党が圧勝した。

1月の記録

1日の記録

    ¦

31日の記録

2月の記録

    ¦
    ¦

12月の記録

1日の記録

    ¦

31日の記録

2004年の記録

日本では韓国ブーム。2004年10月中越地方で連続して大きい地震が発生し大きな被害を出した。 イラク戦争後のゴタゴタは続いたが、アメリカではブッシュ大統領が再選された。

2003年の記録

2003年は宮城県で地震の多い年だった。 世界はイラク戦争でゴタゴタして、日本も自衛隊派遣問題でもめた。

2002年の記録

5月31日から6月30日まで日韓共催のサッカーのワールドカップがあった。

2001年の記録

9月11日の同時多発ハイジャックテロは歴史的大事件となった。 これ以降、飛行機搭乗の際のチェックが厳しくなった。


演習2
演習1で作った basic.html のbody内容を消し、以下を追加しなさい。
  • h1要素で、文書タイトルと同じく「名前(学籍番号) マルチメディアWeb技術のページ」
    • h2要素で「自己紹介」
      • h3要素で「自分史」
      • h3要素で「趣味・特技・資格」
      • h3要素で「自己PR」
      • h3要素で「自画像」
    • h2要素で「授業時間割」
    • h2要素で「授業覚え」
      • h3要素で「マルチメディアWeb技術」
        • h4要素で「5月14日」
        • h4要素で「5月21日」
        • h4要素で「5月28日」
        • h4要素で「6月4日」

※「名前(学籍番号)」の部分は自分のものにすること。



演習3

basic.html で指定しているCSSファイル mmw.css で使用されているセレクタ、プロパティとその値をすべて表としてまとめなさい。

CSS・セレクタ･「プロパティと値」という3つの欄を持つ表形式とする。
CSSの欄には CSS の指定をそのまま入れる。 セレクタの欄では、対象となる要素 (何に対して) を正確に説明する。「プロパティと値」の欄では、どういう項目をどう設定するかを、一つ一つ説明する。

この演習には労力･時間を要するが、最終的に 課題3 の一部として提出してもらう。 現時点では一部だけの説明でもいいが、今後、時間的余裕のあるときに表を追加していき、課題提出時にCSSファイルのすべてが表としてまとまっていればよい。ただし、演習19 で加える変更も含めて答えること。

CSSファイルをテキストファイルエディタ等で開いて中を見て、Webで検索をかけて信頼できそうな資料をあたるとよい。


2.11 address要素

文書作成者の連絡先

HMTL文書は不特定多数に公開される性質があるので、この要素の内容に文書作成者の連絡先を明記しておく。
address要素はブロックレベル要素で、内容にはテキストレベルのもののみを入れられる。


演習4
演習2で作った basic.html のbody内容先頭のh1要素の後に以下を追加しなさい。 
<address>
    <br>
    今日の日付.<br>
    名前
</address>
「今日の日付」はファイル編集時の日付、「名前」の部分は自分のものにすること。
強制行区切りを入れるbr要素については後述。


2.12 hr要素

水平線

文書に水平線を引くブロックレベル要素である。 hr要素はvoid要素で <hr> のように記述する。


演習5
演習4で作った basic.html の、address要素の終了タグの直後と、body内容の最後に、それぞれhr要素を追加しなさい。


2.13 p要素

段落 (paragraph)

段落を表すブロックレベル要素である。 開始タグ<p>と終了タグ</p>の間に一段落を記述する。
p要素の中にはテキストレベルのものしか入れられないので、たとえば箇条書きや表などのブロックレベル要素を中に入れることはできない。

ブラウザでは通常段落ごとに行が区切られて表示される。


演習6
演習5で作った basic.html の「自己PR」部分に最低2個のPR項目を考え、追加しなさい。PR項目1個がそれぞれ一段落となるようにp要素を2個以上使うこと。


2.14 br要素

強制行区切り (forced line break)

段落の途中で強制的に改行させる。br要素はvoid要素で、強制的に改行させたい場所に <br> と書く。
インライン要素なので、ブロック(段落など)の内部でしか使用できない。

例

<p>花の色は<br>
移りにけりな<br>
いたづらに<br>
わが身世にふる<br>
ながめせしまに<br>
<br>
小野小町</p>

表示:

花の色は
移りにけりな
いたづらに
わが身世にふる
ながめせしまに

小野小町

縦書きにした例。style="writing-mode: vertical-rl"
※ 古いブラウザでは非対応

花の色は
移りにけりな
いたづらに
わが身世にふる
ながめせしまに

小野小町


演習7

basic.html の h2要素「授業覚え」- h3要素「マルチメディアWeb技術」に続く各講義日のh4要素の後に、その日の講義で何を学習し自分が何をやったかを記録していくこと。この演習は各講義日ごとに継続的に行うこと。

入力はとりあえずp要素を使うものとするが、今後新しい要素を覚えたら自由に使ってよい。


2.15 pre要素

整形済みテキスト (preformatted text)

一般にHTML文書の中では改行は一つの空白文字として扱われ、ブラウザでも空白文字として表示される。複数の空白が連続する場合にも一つの空白にまとめて表示される。

pre要素を用いると、その内容に含まれる改行や空白がそのまま表示される。
pre要素はブロックレベル要素で、内容には一部の文字フォントを変更するするようなインライン要素を除いたテキストレベルのものが入れられる。

例

<pre>
#include &lt;stdio.h&gt;

int main( int argc, char **argv ) {
    printf( "Hello world\n" );
    return 0;
}
</pre>

表示: (空行も含めてそのまま表示される。ただし実体参照は解釈・変換される)

#include <stdio.h>

int main( int argc, char **argv ) {
    printf( "Hello world\n" );
    return 0;
}

2.16 強調などのフレーズ要素

文章の一部を修飾するマークアップとして、em要素・strong要素・dfn要素・code要素・samp要素・kbd要素・var要素・cite要素・abbr要素・acronym要素がある。
いずれの要素もインライン要素で、内容にはテキストレベルのもののみ入れられる。

em要素・strong要素
文章の一部を強調したいときに用いる。

em要素 (emphasis) はブラウザでは斜体で表示されることが多い。
strong要素 (strong emphasis) は強く強調したいときに用いる。ブラウザでは太字で表示されることが多い。

例

<p>Normal <em>Emphasis</em> <strong>Strong</strong><br>
通常 <em>強調</em> <strong>強い強調</strong></p>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

Normal EmphasisStrong
通常 強調強い強調

dfn要素 (definition)
内容テキストが何らかの定義を行っていることを表す。
code要素・samp要素・kbd要素・var要素
プログラムコードや出力を示す。
code要素は内容テキストがプログラムコードであること、samp要素 (sample output) はプログラムなどの出力例であること、kbd要素 (keyboard) はユーザから入力されるテキストであること、var要素 (variable) はプログラムの変数などであることを表す。
cite要素 (citation)
引用を表す。
abbr要素・acronym要素
abbr要素 (abbreviation) は内容テキストが省略形であること、acronym要素は頭文字であることを示す。

2.17 a要素

ハイパーリンクのアンカー (anchor) (錨(いかり)のこと)

a要素はハイパーリンクを記述する。

WWWが普及した要因として、HTMLのハイパーリンクと言う仕組みで離れたところにある各種のリソースをシームレスにアクセスできるようになったことが挙げられる。

a要素はハイパーリンクの起点アンカー(リンク元)を内容に持ち、終点(リンク先)をhref属性の値で指定する。これにより、他のHTML文書など各種のリソースへのリンク(つながり)を実現する。 href属性の値にはURI (ほとんどがURL) を指定してリンク先リソースを参照できるようにする。
a要素の内容にはテキストレベルのものが入れられるが、a要素を入れ子にすることはできない。

例

<p>asahi.comのトップページへの<a href="http://www.asahi.com/home.html">リンク</a></p>

表示: asahi.comのトップページへのリンク

2.18 URI と URL

URI(Uniform Resource Identifier)は、世界に存在するリソース(書籍やコンピュータ、コンピュータ上のファイルなど)を一意に識別するものである。

URIの中で最も使われているのがURL(Uniform Resource Locator)であるが、URIの中にはその他にURN (Uniform Resource Name)があり、名前によってリソースを識別する(書籍のISBNなど)。

URLはコンピュータネットワーク上のリソース(文書・画像・動画・音声など)へのアクセス方法(スキーム)と所在場所を規定する。 URLには絶対URL指定と相対URL指定がある。

2.18.1 絶対URL

上で出てきた http://www.asahi.com/home.html は絶対URLで、

  • 最初のhttpがアクセスするための方法を表すスキーム (HTTPプロトコル) を規定し、
  • www.asahi.com の部分が対象となるマシンを決定し (DNSでインターネット上で一意に定められる)、
  • home.html がそのマシン上の存在箇所(ディレクトリやファイル名)を表す。

インターネット上のリソースはみなURLを持っており、a要素のhref属性の属性値として指定することによりリンクできる。
スキームにはhttpの他に https (HTTPにSSLあるいはTLS暗号化を付加したプロトコル)、ftp (FTPプロトコル)、mailto (メールアドレス)、file (ローカルファイル) などがある。

例

<p><a href="http://www.google.co.jp/">Google</a>はインターネット上の有名な検索サイトである。</p>

表示: Googleはインターネット上の有名な検索サイトである。

2.18.2 相対URL

相対URLは同一サイト内(同一マシン内)のリンク等で利用される。

相対URLは基準URLに対する相対位置として指定される。 特別に指定しない限り、現在対象となっている文書のあるディレクトリの絶対URLが基準URLとなるので、相対URL指定では同一マシンに同一スキームでアクセスすることになる。

相対位置の指定にはUNIXなどで用いられる階層ディレクトリの指定方式が使われる。 現在対象となっている文書の存在するディレクトリがカレントディレクトリとみなされる。

ディレクトリの区切り文字スラッシュ/
カレントディレクトリピリオド一つ.
親ディレクトリピリオド二つ..

2.18.3 id属性と文書の特定箇所へのリンク

文書の特定箇所の開始タグにid属性で名前を指定することにより、その地点へのリンクを張ることができるようになる。 その際は <a href="#リンクしたい地点のid属性の値"> のように、id属性の値の前に # をつけて記述する。

id属性値では、アルファベットの大文字・小文字が区別されることに注意する。

id属性は任意の要素で指定できるが、その値に一文書中で重複があってはならない。

使い方

href="#「リンク先のid属性値」"
現在対象となっている文書で、指定したid属性値を持っている箇所へのリンク
href="URL#「リンク先のid属性値」"
URLで指定される文書で、指定したid属性値を持っている箇所へのリンク
URLには絶対URLも相対URLも使用できる。


演習8

basic.html のbody内容のaddress要素に続くhr要素の後ろに、目次を作ってリンクでジャンプできるようにしなさい。

目次は、「目次」という見出しを含めて p 要素で作り、「自己紹介」「自分史」「趣味・特技・資格」「自己PR」「自画像」「授業時間割」「授業覚え」を入れ、それぞれ br 要素で改行すること。

リンク先にid属性を指定しておく必要があることに注意。


HTML文書中のid属性は、CSS や JavaScript で、特定の要素に対する見栄えや動作を指定するために利用される。

2.18.4 メールアドレスへのリンク

href属性で指定するURLのスキームとして mailto を使用するとメールアドレスをリンク対象に指定できる。

例

質問メールの<a href="mailto:s17c0999@bene.fit.ac.jp?subject=Question">宛先</a>

表示: 質問メールの宛先

この例のように、メールアドレスの後ろに ? に続けてメールの件名(subject)などを指定することも可能。


演習9

basic.html のbody内容の最初にあるaddress要素の中の自分の名前に「自分のメールアドレス」へのリンクをつけなさい。


2.19 img要素

画像 (image) を埋め込む。

img要素は画像ファイルをHTML文書に埋め込んで表示させるのに使用する。
画像ファイルはGIF形式(*.gif)、JPEG形式(*.jpgまたは*.jpeg)、PNG形式(*.png)などが使用できる。

使い方

<img src="画像ファイルのURI" alt="画像が表示できない(しない)環境での代替テキスト">

img要素はvoid要素であり、インライン要素である。したがってbody要素の内容に直接入れることはできず、見出し要素・p要素・address要素などテキストレベルのものを内容とできるブロックレベル要素の内容中に記述する。

src属性で埋め込む画像ファイルのURIを指定する。src属性は必須。

alt属性で画像が表示できない(しない)環境のための代替テキストを指定する。alt は 代替テキストを表す alternative text から取られている。
alt属性は HTML 4.01 では必須だったが HTML 5 では必須ではなくなったが、アクセシビリティを高めるため入れておくことが推奨される。

※「画像が表示されない場合には代替テキストも表示したくない」という場合の一法として、空のalt属性 alt="" を与える書き方がある。装飾用のボーダー画像などの場合に使うことができる。

例

<h3>ここから先は <img src="tomare.gif" alt="一時停止マーク"> です。</h3>

表示:

ここから先は 一時停止マーク です。

2.19.1 高解像度環境への対応

最近の高解像度スマートフォンを含めた種々の環境でのWebページ表示に対応するため、img要素では、srcset属性 で表示させる画像を複数ファイルから解像度によって選択させたり、sizes属性 で画像の表示サイズの細かい情報を伝えることができるようになっている。

詳細は省略するが、興味がある人はWebで調べてみるとよい。

2.19.2 画像をリンクアンカーにする

img要素はインライン要素なのでa要素の内容に入れられる。つまり、画像をリンクアンカーにしてリンクを目立たせることができる。リンクバナー (link banner) または単にバナーなどと言われる。

次のサンプルは、「チョキ」マークをリンクアンカーにした例。

<p>コンピュータじゃんけん選手権はこちらのページへ <a href="http://www.cs.unimaas.nl/~donkers/games/roshambo04/">
<img src="choki.gif" alt="チョキのマーク"></a></p>

表示:
コンピュータじゃんけん選手権はこちらのページへ チョキのマーク
※ 現在リンク先はなくなった模様


演習10

basic.htmlの「自画像」の部分に、自分の肖像画または似顔絵を入れなさい。 (どちらかひとつでよい。絵がなければお絵描きツールなどを使って作ること)

  • img要素では画像の説明をする適切な alt 属性を記述すること。

  • 画像ファイルは半角英数字のみでできたファイル名とすること。


2.20 箇条書き

ul, ol, dl 要素

HTMLの箇条書きには以下の三種類があり、すべてブロックレベル要素である。

番号なし箇条書きul要素
番号付き箇条書きol要素
説明付き箇条書きdl要素

2.20.1 番号無し箇条書き: ul要素 (unordered list)

ul要素は番号無し箇条書きを構成する。 ul要素は子要素にli要素のみを持つ。(liはlist itemの略)

li要素がリストの項目1個を表す。 li要素は内容に任意のテキストレベルのものとブロックレベル要素を持つ。

リスト5  ul要素の使い方

<ul>
    <li>項目を並べる</li>
    <li>項目の前に丸印などが付く</li>
        ¦
        ¦
</ul>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

  • 項目を並べる

  • 項目の前に丸印などが付く
        ¦
        ¦


演習11

basic.html の「自己PR」の部分を、ul要素を使って少なくとも2個以上の項目が箇条書きになるよう書き換えなさい。


2.20.2 番号付き箇条書き: ol要素 (ordered list)

ol要素は番号付き箇条書きを構成する。 ol要素は子要素にli要素のみを持つ。

li要素がリストの項目1個を表す。 li要素は内容に任意のテキストレベルのものとブロックレベル要素を持つ。

リスト6  ol要素の使い方

<ol>
    <li>項目1の内容を書く</li>
    <li>項目の前には番号が付く</li>
        ¦
        ¦
</ol>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

  1. 項目1の内容を書く

  2. 項目の前には番号が付く
        ¦
        ¦


演習12

ol要素を使って、basic.htmlの「自分史」の部分に、生まれてから今までの自分に関する大きな出来事(5つ以上)を順に記しなさい。それぞれの出来事の年月(日)とその説明を入れること。


2.20.3 説明付き箇条書き: dl要素 (definition list)

dl要素は説明付き箇条書きを構成する。 dl要素は子要素としてdt要素とdd要素を持つ。 項目をdt要素で表し、その項目の説明をdd要素で表す。(dtはdefinition term、ddはdefinition descriptionの略)
dt要素の内容にはテキストレベルのものしか記述できない。
dd要素は内容に任意のテキストレベルのものと任意のブロックレベル要素を入れられる。

リスト7  dl要素の使い方

<dl>
<dt>項目A</dt>
<dd>ここに項目Aの説明を書く。</dd>

<dt>項目B</dt>
<dd>ここに項目Bの説明を書く。</dd>

<dt>項目C</dt>
<dd>ここに項目Cの説明を書く。</dd>
</dl>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

項目A
ここに項目Aの説明を書く。
項目B
ここに項目Bの説明を書く。
項目C
ここに項目Cの説明を書く。


演習13

basic.html の「趣味・特技・資格」の部分をdl要素を使って、「趣味」「特技」「資格」のそれぞれの項目を記入しなさい。
ただし、「趣味」「特技」「資格」のそれぞれについてさらにul要素を使って箇条書きしなさい。


2.21 表

table要素

table要素は表 (table) を構成するブロックレベル要素である。
table要素にはかなり複雑で凝った使い方もあるが、ここでは基本的なもののみ説明する。

表は行と列によって構成される。 行が縦方向を表し、列で横方向を区別する。ある行のある列1個、つまり表の区画単位をセルという。

table要素は行単位に構成され、table要素の子要素であるtr要素 (table row) が表の1行を表す。
tr要素の子要素であるtd要素 (table data cell) が各セルを表す。
項目名などを見出しとして区別するときは、そのセルをth要素 (table header cell) で表す。th要素もtr要素の子要素である。
td要素とth要素にはさまざまな要素が自由に入れられる。

表に表題をつけるときはtable要素の子要素としてcaption要素を使う。caption 要素の中にはタグの構造を入れられる。特に、details要素を入れて詳しい説明をすることができる。

リスト8  table要素の例

<table>
<caption>
<strong>キャプションをつけられる</strong>
<details>
<summary>説明のまとめ</summary>
<p>詳しい説明を文章で入れられる。</p>
</details>
</caption>
<tr> <!-- 見出し行 -->
    <th></th><th>カラムA見出し</th><th>カラムB見出し</th><th>カラムC見出し</th>
</tr>
<tr> <!-- データ1行目 -->
    <th>行1見出し</th><td>0001</td><td>86</td><td>59</td>
</tr>
<tr> <!-- データ2行目 -->
    <th>行2見出し</th><td>0002</td><td>61</td><td>72</td>
</tr>
</table>

表示: (スタイルの指定によって大きく変わってくる。あくまで一例)

キャプションをつけられる
説明のまとめ

詳しい説明を文章で入れられる。

 カラムA見出しカラムB見出しカラムC見出し
行1見出し00018659
行2見出し00026172

2.21.1 見栄えの調整

デフォルトでは、表全体やセルの枠線はなく、セルの幅や高さは自動的に決められる。 枠線・行高さ・セル幅・色・フォントなど、表の細かい見栄えはCSSで調整するのが望ましい。

表の中の行の高さは tr要素 で style 属性としてCSSの height プロパティに値を設定して指定できる。

<table>

  …

  <tr style="height: 8ex">

      td要素やth要素を並べる

  </tr>

  …

</table>

上は行の高さを 8ex (1ex は 小文字 x の高さに相当) に指定した例。

表の各カラム (セル) の幅は、各 td 要素 または th 要素で style 属性としてCSSの width プロパティに値を設定して指定できる。

<table>

  …

      <td style="width: 8em">セルの中味</td>

  …

</table>

上はセルの幅を 8em (1em はフォントサイズに相当) に指定した例。


演習14

演習12で追加した basic.html の「自分史」の部分をtable要素を使って書き直しなさい。年月(日)をカラム1、説明をカラム2とする。



演習15

basic.htmlの「授業時間割」の部分に、自分が今年度前期に履修している講義・演習・実験等を全部入れた時間割表を作りなさい。

時間割表の組み方の詳細は HTML, CSSによる時間割表組み に説明してある通りとすること。


2.22 ruby要素

ルビ

ruby要素 はインライン要素で、文書中で振り仮名(ルビ)を使用する際に指定する。本文部分は「ベーステキスト」、振り仮名部分は「ルビ」と呼ばれる。 ruby要素は XHTML 1.1 で標準となり、HTML 5 では仕様が変更されて採用された。

ちなみにルビはイギリスの印刷業界での5.5ポイント活字の呼び名 ruby に由来し、この活字の大きさが日本で振り仮名として使われていた7号活字の大きさ(5.25ポイント相当)と近かったので振り仮名のことをルビと呼ぶようになった。

ruby要素は子要素として、rt要素 (ruby text)、rp要素 (ruby parentheses) などを持つ。複雑なルビ組みも可能になっているが、ここではごく基本的なルビのつけ方のみを説明する。

基本的な書き方
<ruby>ベーステキスト<rp>(</rp><rt>ルビ</rt><rp>)</rp></ruby>

ruby要素の内容テキストとして「ベーステキスト」部分に対象となる文字列、rt要素の内容「ルビ」部分に読み方などのルビを指定する。 rp要素で指定されている括弧 ( ) は、ルビに対応していないブラウザで文書を見たときに

ベーステキスト (ルビ)

のように表示されるように配慮したものである。この配慮が不要ならば、下の記述のように rp 要素を使わず少し短く書ける。

<ruby>ベーステキスト<rt>ルビ</rt></ruby>

さらに、この場合 rt の終了タグも省略可能なので、下の記述のようにすっきり書ける。

<ruby>ベーステキスト<rt>ルビ</ruby>
例
<ruby>薀蓄<rp>(</rp><rt>うんちく</rt><rp>)</rp></ruby>

<ruby>石斑魚<rt>ウグイ</ruby>

表示: (ルビ表示対応かどうかによって表示が異なる)

薀蓄(うんちく)       石斑魚ウグイ


演習16

basic.html の h1 要素の内容の自分の名前にruby要素を使って読み仮名をつけなさい。姓と名を分けてルビを振ること。


2.23 音声・楽音および動画

HTML5 規格では、オーディオ用の要素 audio や ビデオ用の要素 video があり、HTML5 をサポートしたブラウザで広く使われている。

audio要素の最も単純な使い方
<audio src="音声・楽音ファイルURL" ></audio>
autoplay 属性
指定すると自動的に再生を始める。boolean属性
loop 属性
ループ再生を指定する。boolean属性
muted 属性
無音再生を指定する。boolean属性
controls 属性
指定するとユーザがコントロールで再生を制御できるようになる。boolean属性
preload 属性
事前読み込みをどうするか (none, metadata, auto) の指針 (ヒント) を与える。なお、この属性の指定自体がないときの扱われ方はブラウザ環境に依存する。
none
ページ読み込み時にメディアリソース (audioファイルやvideoファイル) を読み込まない
metadata
ページ読み込み時にメディアリソースのメタデータ (再生時間・サイズ(videoの場合) などの情報) のみ読み込む
auto
ページ読み込み時にメディアリソース全体を読み込む。preload="" も auto と扱われる
※ autoplay, loop, muted, controls はboolean属性なので、属性名を書いておけばよく、「=値」部分は不要である。
video要素の最も単純な使い方
<video src="動画ファイルURL" ></video>

autoplay 属性、preload 属性、loop 属性、muted 属性、controls 属性 は audio 要素の場合と同様。

width 属性
ビデオの幅を指定する。ピクセル単位の数値のみで指定
height属性
ビデオの高さを指定する。ピクセル単位の数値のみで指定
poster 属性
ビデオが再生できない場合や再生する準備が整うまでの間に、表示させる画像を指定する

audio要素・video要素とも、src属性を利用する代わりに、子要素として source 要素 を複数個入れることができる。
source 要素は、オーディオ・ビデオファイルのURL (src属性) の他に、MIMEタイプ (type属性) や メディアの種類 (media属性) までコーデック方法なども含めて詳しく指定できる。
複数のsource要素を指定することで、取り扱える形式をブラウザに記述順にチェックさせ、選択させることができる。

※ 過去のブラウザでのオーディオ・ビデオの利用 ※

参考のため、以下では HTML5以前 (HTML 4.01, XHTML 1.0/1.1) の方法を簡単に紹介する。

HTML5以前の規格では、音声・楽音および動画では標準的なインラインの記述法はないが、多くのブラウザで embed タグあるいは object タグを使用する方法が利用されていた。(互換性を考慮し両方のタグを使う方法が推奨されていた)
ブラウザやプラグインによって記述法が異なるので利用には注意が必要だった。

embed 要素による音声・楽音および動画の埋め込みは Internet Explorer でサポートされており、以下のように使用していた。

<embed src="音声・楽音または動画ファイル名(ディレクトリを含めてもよい)"
        autostart="true" >

autostart 属性で true を指定すると自動で演奏がスタートする。他にも細かい動作を指定する属性があるが省略する。

Firefox等で採用されていた object 要素によって音声・楽音および動画を埋め込む方法については説明を省略する。

※ ↑ 過去のブラウザでのオーディオ・ビデオの利用 ↑ ※


演習17

basic.html の「自画像」に画像を入れた箇所の後に、audio要素で何らかの意味で自分に関わる音(音楽)、video要素で何らかの意味で自分に関わる動画をそれぞれ入れなさい。

それぞれ、どういう意味で自分と関わるかの説明を入れておくこと。

  • audio要素では、loop 属性および controls 属性を指定すること。

  • video要素では、autoplay 属性、muted属性 および controls 属性を指定すること。

  • 音声(音楽)ファイル・動画ファイルは、インターネットに公開した場合に著作権などの問題が発生しないものとすること。(下 ※ 参照)

  • 音声(音楽)ファイル・動画ファイルはすべて半角英数字でできたファイル名とすること。

※ 音楽ファイルや動画ファイルにはさまざまな形式がある。ブラウザによっては特定の音楽ファイルや動画ファイルを正常に再生できない場合がある。 大学PC演習室のWindows環境のブラウザ Chrome, Edge 等で自分のページを開き、正しく再生できることを確認すること。


※ 著作権等への配慮

マルチメディアファイルの作成には多くの時間を要するが、授業ではそのための時間を確保できかねる。

動画はスマホやデジカメで自分で撮ったものをパソコンに持ってくることが考えられる。USBディスクを介してもよいが、クラウドストレージを使う方法もある。一般には、例えば、Googleアカウントがあれば Googleドライブ を利用して簡単にファイルをPCに持ってこられる。本学用途では、大学のアカウントで OneDrive を使えば Office 365 環境と連携できるので使用が推奨される。

ただし、自分で動画を撮る場合、許可なく他人や他人の家の中などを撮影するのは許されないので映り込みなどには注意が必要である。

スマホ等から持ってきた動画がPCのブラウザ上で正常に再生できない場合、動画を変換する必要がある。一方法として、Windowsの「フォト」で動画を開き、必要ならトリミングによって時間を短くし、低画質を指定して保存し、試してみるとよい。

どうしてもスマホ等から持ってきた動画がPCのブラウザ上で正常に再生できない場合は、PCで各自が履修した・履修中の授業に関するPowerPointファイルで動画 (自分の画像と自分による説明音声付きのもの) を作成し使用してもよい。

次に、audio要素についてだが、音楽ファイルを自分で用意するのは特別なスキルと労力が必要になってくる。 今回、特にaudio要素のファイルについては、インターネット上で自由に使っていいことが保証されている、いわゆるフリー素材などを検索し、ダウンロードしたものを使っていいものとする。ただしその際、素材のサイトにある利用条件を確認し遵守すること。フリー素材と謳ってあっても、利用条件を守れないものは使用してはいけない。

自分でインターネット上にマルチメディアを公開する場合は、原則、自分で作成したものに限る必要がある。他人の製作したファイル (あるいはそれを少し加工修正したもの) を無断で公開すると著作権等の違反になるので絶対にやってはいけない。

2.24 div, span と class属性

文書の論理的分割

文書の一部分をまとめて管理したい場合がある。 そういう時にdiv要素またはspan要素が使用される。

div要素はブロックレベル要素でまとまった一区画を論理的に分割する。 div要素の内容には任意のブロックレベル要素やテキストレベルのものが入れられる。

span要素はインライン要素で文章中の一部分だけを論理的に分割する。 span要素の内容にはテキストレベルのものしか入れられない。

分割した部分を識別するために、div要素またはspan要素にclass属性をつける。 class属性はdiv要素やspan要素だけでなくほとんどすべての要素に指定でき、要素のクラス分けをすることができる。

class属性の属性値は単独のクラス名または複数のクラス名を空白で区切って並べたリストであり、その要素が属するクラスを指定する。

クラス名では、アルファベットの大文字・小文字が区別されることに注意する。

(例)

<span class=attention>注意点</span>

これで、クラス attention に属するspan要素 (内容として、文字列「注意点」を持つ) を表すことができる。

※ 一つの要素が複数のクラスに属することができることに注意。
例えば、クラス emph と large と bold すべてに属する div 要素は、

<div class="emph  large  bold">・・・文章・・・</div>

のように指定する。この場合、class属性値はダブルクォーテーションかシングルクォーテーションで囲んで指定する必要がある。

class属性によるクラス分けはCSSスタイルシートファイルの中の対象指定の際に使用できるので、クラスの違いに応じて色やフォントなどの体裁を変えることができる。

クラスでスタイルを分類するには、CSSで

.クラス名 {
        特性名1 : 特性値1 ;
        特性名2 : 特性値2 ;
            ¦
}

のように、セレクタを「.クラス名」の形で指定すれば、「クラス名」のクラスに属する任意の要素に対してブロック内の特性の設定が有効になる。(クラスセレクタ)

クラスセレクタとタイプセレクタを組み合わせることもできる。

要素名.クラス名 {
        特性名1 : 特性値1 ;
        特性名2 : 特性値2 ;
            ¦
}

のように、セレクタを「要素名.クラス名」の形で指定すればよい。このとき、「要素名」で指定した要素で指定した「クラス名」のクラスに属するものに限って、ブロック内の特性の設定が有効になる。

セレクタには、この他にも多種の指定方法があるので、指定方法のまとめを見直しておくこと。

クラス指定の例として、時間割の表組みで使ったgridクラスがある。CSSファイルの mmw.css の中で

table.grid td, table.grid th {
    border: thin solid black;
}

という指定があり、「クラス grid に属する table 要素の子孫要素であるtd要素およびクラス grid に属する table 要素の子孫要素であるth要素」に対する border (境界) として、「細い・実線・黒色 (の枠線)」が設定されている。
この設定により、table要素に grid クラスを指定することで、「細い・実線・黒色」の枠線の引かれた表とすることができる。


演習18

basic.html に以下の変更を加え、見え方の変化を調べなさい。

「趣味・特技・資格」と「自己PR」の文章の中で、キーワードを2つ以上決め、それらをクラス attention を指定した span 要素の内容とする。



演習19

まず、mmw.css を編集し、以下の変更を加え保存しなさい。

クラス toc に属する任意の要素に対して以下を設定する項目を追加する。
文字の大きさ font-size を 51% に
幅 width を 9.6em に
内側の空白 padding を   0   1em   に   (上下が 0、左右が 1em)
枠 border を指定し、色を黒 (black)、太さを 4px、線の種類を二重線 (double) とする
背景色 background-color を カーキー (khaki) に
position プロパティを fixed に
top プロパティを 0 に
right プロパティを 0 に

次に、basic.html に以下の変更を加え保存し、見え方の変化を調べなさい。

HTML 5.1 で導入された details 要素 およびその子要素である summary 要素 を使って折りたたみ可能な目次にする。具体的には、目次部分を下のように変更する。(ただし、Internet Explorer など古いブラウザでは対応していないので折りたたみできない。Chrome や Edge 等で確認のこと) 
<details open>
<summary>目次</summary>

……    ここに目次の各項目を入れる    ……

</details>
そして、目次全体である details 要素を、クラス toc の div 要素で囲む

さらに、mmw.css に追加した position プロパティを absolute および static (指定無しと同じ) にしたときの、それぞれの目次位置状況を fixed のときと比較して説明しなさい。
比較とその記録が終わったら、position プロパティを fixed に戻しておくこと。


HTML文書中のclass属性は、JavaScript において、何らかの理由でまとめて扱うべき複数の要素に対して共通の動作を指定するためなどにも利用される。

2.25 学内Webでの公開

今までの演習によって基本的なWebページが作成できているはずである。 なお、WebサイトとはWWWで公開されるまとまったWebページ群のことで、ホームページはWebサイトの表紙ページを意味する。

今まで演習で作ってきたページは大学の演習室内のローカルなものである。 Webページを多くの人に見てもらうためにはWebサーバにそのページに関わるファイルをすべてアップロードする必要がある。

ここでは、インターネット上には公開せず、学内だけで見れるWebサーバである

www.ipc.fit.ac.jp

に演習で作ったページをアップロードし学内に公開する。

多くの場合、Webサーバ上の各ユーザのホームディレクトリの下の public_html ディレクトリ以下がそれぞれ個人のWebページに対応するが、本学のシステムでは

ホームディレクトリの下の WWW ディレクトリ    (WWW がすべて半角アルファベット大文字であることに注意)

が個人用のWebページに対応しており、

http://www.ipc.fit.ac.jp/~ユーザ名/

が各人のホームページのURLとなっている。(学外からはアクセスできない)

準備

いままでにWebページを作って学内公開する実習をやっていない場合など、学内サーバの自分のホームディレクトリの下に WWW というサブディレクトリがない場合は、

WWW ディレクトリを作成

し、ホームディレクトリおよびWWWディレクトリに一般からアクセスできるようにする必要がある。
※ すでに WWW ディレクトリが存在する場合はスキップしてよい。

詳しくは、情報処理センターのサイトの

スタートページ > ドキュメント
　　学内ホームページ作成・公開について

にある

学内サーバ・ホームページ公開手順

に従って設定を行う。

ファイルのアップロード

サーバマシンへのアップロード方法はWeb (HTTPS)を使うものやFTPを使うものがあり、サーバによって細かい方法は異なっている。
多くの場合、Webサーバへのファイルのアップロードは FTP, SFTP, SCP などのプロトコル (通信の規約) によって行なう。これらのプロトコルを直接コマンドラインから扱うのは面倒なので、

  • Windows環境では FFFTP や WinSCP
  • Linux環境では gFTP

などのクライアントソフトウェアを使ってファイル転送を行うとよい。

WWW ディレクトリの下に mmw-ex というサブディレクトリをを作る。
※ すでに WWW の下に mmw-ex ディレクトリが存在する場合はスキップしてよい。

WWW の下の mmw-ex ディレクトリに、Webページに関わるファイルをすべてアップロードする。画像ファイルなどをアップロードし忘れないように注意してほしい。
なお、必要な場合は、作成したディレクトリやアップロードしたファイルに対し適切にアクセス権を設定しておく。

※ 参考 (アクセス権の設定法)
クライアントソフトを使わず、学内Webサーバにログインして設定する場合

mkdir ~/WWW/mmw-ex
chmod o+rx ~/WWW/mmw-ex

としてディレクトリ ~/WWW/mmw-ex を作成しアクセス権を設定する。
そして ~/WWW/mmw-ex に basic.html ファイルおよび関連する画像ファイル等一式をアップロードする。

アップロードしたファイルについても、必要ならば

chmod o+r ~/WWW/mmw-ex/*

により読込を許可する。

※ Linuxでファイル転送ツールがない環境のとき

まず一つ目の「端末」アプリケーションを立ち上げる。これを端末Aとする。
端末Aで、

ssh  -l  PC演習室でのID  www.ipc.fit.ac.jp

とし、PC演習室のパスワードを入力して学内Webサーバに入る。

Webページの公開が初めての人は、まず、

mkdir ~/WWW
chmod o+rx ~/WWW

として、公開用の WWW ディレクトリを作る。
※ すでに WWW ディレクトリが存在する場合はスキップしてよい。

ホームディレクトリの下に WWW ディレクトリができたら、

mkdir ~/WWW/mmw-ex
chmod o+rx ~/WWW/mmw-ex

として、WWW の下に mmw-ex ディレクトリを作る。
※ すでに mmw-ex ディレクトリが存在する場合はスキップしてよい。

もう一つ別の「端末」アプリケーションを立ち上げる。これを端末Bとする。端末Bで scp コマンドでファイルをコピーする。
例えば、basic.html では

cd  ~/mmw/html
scp  basic.html  PC演習室でのID@www.ipc.fit.ac.jp:WWW/mmw-ex

となる。コピーの際、PC演習室のパスワードを入力すること。CSSファイル mmw.css も同様にコピーする。

scp  mmw.css  PC演習室でのID@www.ipc.fit.ac.jp:WWW/mmw-ex

さらに、必要な画像ファイル等も同様にコピーする。

端末Bでのコピーが終わったら、念のため、端末Aで

chmod o+r ~/WWW/mmw-ex/*

として、ファイルの読み込みを可能にしておく。

公開のチェック
ブラウザで URL 
http://www.ipc.fit.ac.jp/~ユーザ名/mmw-ex/basic.html
にアクセスし問題なく表示されることを確認する。


演習20

今までの演習で作った basic.html を始めとするファイルをすべてWebサーバの自分のホームディレクトリの下の WWW/mmw-ex ディレクトリにアップロードして、適切に属性を変更し、演習室PCから

http://www.ipc.fit.ac.jp/~ユーザ名/mmw-ex/basic.html

で正しく見られることを確かめなさい。また、他の人のページも見られるかどうか調べてみなさい。



課題3 学内公開のWebページとCSSの説明

演習1 から 演習20 まですべて終わらせた後、Microsoft Wordで以下の内容をまとめ、PDFファイル 課題3.pdf として保存し、Webから提出しなさい。

まとめには、最初に、学籍番号・氏名と「課題 番号   課題名」を入れる。
続いて、以下を順に入れる。

  1. 自分のWebページのURL (指定通りとする)
      http://www.ipc.fit.ac.jp/~ユーザ名/mmw-ex/basic.html

  2. 演習3 で作る、basic.html で指定しているCSSファイル mmw.css で使用されているセレクタ、プロパティとその値をすべてまとめた表

    表の内容は 演習19 で加えた変更も含めて答えること。また、クラス toc の要素の設定で position プロパティを absolute および static (指定無しと同じ) にしたときの、それぞれの fixed のときとの目次位置状況の比較説明も入れること。


3  XML入門

3.1 XMLの特徴

3.1.1 タグ・要素・内容・属性

XML文書は階層的構造を持つ。階層的な文書構造を構成する個々のパーツを「要素 (element)」と言い、テキストデータをベースに < と > に囲まれた「タグ (tag)」によるマークアップ方式で記述される。テキストデータにタグを使う方式を採ることで、データの意味やデータ構造を保持したままインターネット上でデータ交換ができる。さらに仕様変更や異なるシステム間でのデータ交換にも柔軟に対応できる。

個々の要素は、要素の始まりを示すタグ(「開始タグ (start-tag)」)と終わりを示すタグ(「終了タグ (end-tag)」)の2つのタグで「内容 (content)」データを挟み込んで表現される。内容のない要素である「空要素 (empty element)」のために「空要素タグ (empty-element tag)」が用意されている。

開始タグ(または空要素タグ)は「属性 (attribute)」を持つことができる。属性は要素に対して付加的な情報を付け加えるために使用される。付加される情報は属性名と値のペアを = でつなげて表現される。 属性の値はダブルクォート(またはシングルクォート)で囲んで表記しなければならない。
属性は一つの開始タグ(または空要素タグ)中に空白で区切って0個以上任意個記述することができる。ただし、タグ内で同じ名前の属性を複数個指定してはいけない。

開始タグ・終了タグ・空要素タグ
<要素名 属性名1="値1" 属性名2="値2" ... >開始タグ
</要素名>終了タグ
<要素名 属性名1="値1" 属性名2="値2" ... />空要素タグ
内容のある要素と空要素
<要素名 属性名1="値1" 属性名2="値2" ... > 内容 </要素名>内容のある要素
<要素名 属性名1="値1" 属性名2="値2" ... ></要素名>空要素 (推奨されない記法)
<要素名 属性名1="値1" 属性名2="値2" ... />空要素 (空要素タグを使った記法。推奨される)
例として、住民基本台帳ネットワークのデータ(氏名・住所・性別・生年月日と住民基本台帳コード)を表現してみる。
リスト9  住民基本台帳ネットワークのデータ表現

<住民基本台帳>

<住民 コード="12345678901">
    <氏名><姓>山田</姓><姓かな>やまだ</姓かな><名>太郎</名><名かな>たろう</名かな></氏名>
    <性別 男女="男"/>
    <生年月日><年>1985</年><月>12</月><日>15</日></生年月日>
    <住所><都道府県>宮城県</都道府県><市町村>石巻市</市町村><地区番地>日和が丘 1-1-1</地区番地></住所>
</住民>

<住民 コード="56789012345">
    <氏名><姓>山田</姓><姓かな>やまだ</姓かな><名>花子</名><名かな>はなこ</名かな></氏名>
    <性別 男女="女"/>
    <生年月日><年>1986</年><月>3</月><日>31</日></生年月日>
    <住所><都道府県>宮城県</都道府県><市町村>石巻市</市町村><地区番地>日和が丘 1-1-1</地区番地></住所>
</住民>

     ¦
     ¦

</住民基本台帳>

リスト9のデータは以下のような構造を持っている。

  • データは「住民基本台帳」要素の内容として表現される。
  • 住民一人一人を「住民」要素で表す。「住民」要素には「コード」属性があり各人の住民基本台帳コードが入れられている。
  • 「住民」要素は、「氏名」「性別」「生年月日」「住所」各要素を1個ずつ順に持つ。
  • 「氏名」要素は、「姓」「姓かな」「名」「名かな」各要素を1個ずつ順に持つ。
  • 「性別」要素は空要素とし、「男女」という名前の属性で男か女かを指定している。
  • 「生年月日」要素は、「年」「月」「日」各要素を1個ずつ順に持つ。
  • 「住所」要素は、「都道府県」「市町村」「地区番地」各要素を1個ずつ順に持つ。

3.1.2 独自のマークアップ言語の定義

XMLでは要素の名前や階層構造などを文書作成者が定義できる。これは特定の用途に特化したタグセットを定義することによってXML文法に従う新しいマークアップ言語を定義できるということを意味する。XMLに「拡張可能な (Extensible)」という名前が付けられた理由はここにある。

「言語を定義する言語」のことをメタ言語という。XMLはメタ言語機能を持っているため、さまざまな分野のデータを記述する応用言語のベースとなっている。前章で触れた XHTML も XML の応用言語のひとつである。

ここでは、XMLをベースにして作成されたデータ記述言語のうちベクトルグラフフィクスの記述と数式の記述のそれぞれに特化した応用言語を簡単に紹介する。

MathML (Mathematical Markup Language) 数式記述用マークアップ言語

数式を記述するためにW3Cが制定したマークアップ言語である。
たとえば、(a + b)2 をMathMLを使って表示させるには


    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mfenced>
          <mi>a</mi><mo>+</mo><mi>b</mi>
        </mfenced>
        <mn>2</mn>
      </msup>
    </math>

のようにする。ただWebブラウザのサポートがないのが現状のようである。

SVG (Scalable Vector Graphics) ベクトル形式のグラフィクス記述用マークアップ言語

ベクトル形式のグラフィクスを記述するためにW3Cが制定したマークアップ言語でWeb上での可搬性のあるグラフィクス表現を実現している。
たとえば、以下のSVG文書で四角(角の丸いもの)と楕円を描画できる。


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100" height="80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60"
      rx="5" ry="5"
      fill="lightpink" stroke="yellow" stroke-width="3"/>
  <ellipse cx="50" cy="40" rx="30" ry="20"
      fill="skyblue" stroke="magenta" stroke-width="3"/>
</svg>

このSVGをobject要素を使って埋め込むと下のような表示となる。

===== SVGサンプル (角の丸い四角と楕円) =====

3.1.3 名前空間

XML文書は個々人や団体の間でデータを交換し広く利用されることを目的としている。 複数の文書を合わせたり、それらから特定要素のみを抜き出して新しい文書を作ることも考えられる。

その際、別々に作られた複数の文書で同じ名前の要素タグが別の意味を持つなどの「名前の衝突」が起こる危険性が高い。 その問題を解決するため、XMLでは「名前空間」というもので文書が使用するタグ名などの名前がどういう由来のものかを区別して利用できる。

要素名や属性名がどの名前空間に属するかを指定するのに「名前空間接頭辞」が使われ、

接頭辞名 : ローカルパート

のように、「接頭辞名」にコロンをつけて「ローカルパート」を記述して名前空間に属する要素名や属性名を指定できる。この形の名前を修飾された名前 (qualified name)と言う。「ローカルパート」には名前空間を除いた名前(ローカル名)を指定する。

XMLの名前空間は URI (Uniform Resource Identifier) によって識別される。要素が使用する名前空間を、namespace宣言で指定する。namespace宣言は要素の「xmlns属性」または「xmlns接頭辞を持つ属性」といういずれかの予約済み属性の値にURI参照を設定することによって行う。 namespace宣言をした要素自身も含め、その要素以下のすべての要素が宣言の有効範囲となる。

xmlns="URI参照"
「デフォルト名前空間」が指定した「URI参照」の名前空間であることを宣言する。
デフォルト名前空間とは「接頭辞がついていない要素名」が属する名前空間である。デフォルト名前空間は属性名には適用されないことに注意。
xmlns:接頭辞名="URI参照"
指定された「接頭辞名」を接頭辞とする名前が指定した「URI参照」の名前空間に属することを宣言する。

例

  • XHTML文書では、通常、ルート要素であるhtml要素の属性としてnamespace宣言

    xmlns="http://www.w3.org/1999/xhtml"

    が指定される。
    "http://www.w3.org/1999/xhtml" がXHTML文書の名前空間のURI参照であり、これが「デフォルト名前空間」となる。

  • XSLT文書では、通常、ルート要素であるstylesheet要素の属性としてnamespace宣言

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    が指定される。
    "http://www.w3.org/1999/XSL/Transform" がXSLT文書の名前空間のURI参照であり、「xsl:」で始まる名前がXSLTの名前空間に属することを宣言する。
    なお接頭辞名は別にxslである必要はないが、慣用的に xsl が用いられているので、そうしておいた方が紛らわしくない。

3.2 スキーマ定義言語

XMLでは要素の名前や階層構造を自由に決められるのが特徴であるが、各自が自分にしか分からないタグ付けのルールを使っていては他者とのデータ交換が不可能になる。

XML形式のデータを個々人や団体の間で間違いなく交換するためには、XML文書を構成する個々の要素の名前や要素内容のデータ型、さらに要素同士の関係をきちんと設計し、人間やコンピュータシステムが理解できる約束で表現しておく必要がある。

こうして設計されたXML文書のデータ構造の約束のことをスキーマ (schema) と言う。またスキーマを記述するための言語をスキーマ定義言語 (schema definition language) と言う。スキーマ定義言語で記述したファイルのことを単にスキーマと言うこともある。

利用される代表的スキーマ定義言語を以下に示す。

3.2.1 DTD (Document Type Definition: 文書型定義)

特徴

  • SGMLで使われてきた
  • 1998年にXML文法が策定されたときにも使われた
  • 従来最も一般的だったXMLのスキーマ定義言語
  • 文書型宣言で参照される
  • XML文書本体とは異なる文法で記述されている
  • XML名前空間には対応できない

リスト9のXML文書のデータ構造を図示すると図1のようになる。

図1  住民基本台帳文書の構造
リスト9の住民基本台帳文書の構造

このデータ構造をDTDで記述するとリスト12のようになる。

リスト12  住民基本台帳DTD

<!DOCTYPE 住民基本台帳 [
    <!ELEMENT 住民基本台帳 (住民+)>
    
    <!ELEMENT 住民 (氏名, 性別, 生年月日, 住所)>
    <!ATTLIST 住民 コード CDATA #REQUIRED>
    
    <!ELEMENT 氏名 (姓, 姓かな, 名, 名かな)>
    <!ELEMENT 姓 (#PCDATA)>
    <!ELEMENT 姓かな (#PCDATA)>
    <!ELEMENT 名 (#PCDATA)>
    <!ELEMENT 名かな (#PCDATA)>
    
    <!ELEMENT 性別 EMPTY>
    <!ATTLIST 性別 男女 (男|女) #REQUIRED>
    
    <!ELEMENT 生年月日 (年, 月, 日)>
    <!ELEMENT 年 (#PCDATA)>
    <!ELEMENT 月 (#PCDATA)>
    <!ELEMENT 日 (#PCDATA)>
    
    <!ELEMENT 住所 (都道府県, 市町村, 地区番地)>
    <!ELEMENT 都道府県 (#PCDATA)>
    <!ELEMENT 市町村 (#PCDATA)>
    <!ELEMENT 地区番地 (#PCDATA)>
]>

上で示したDTDは以下のことを表現している。

  • <!DOCTYPEの直後にある「住民基本台帳」が文書のルート要素となる。
  • 「住民基本台帳」要素は「住民」要素の1回以上の繰り返しを子要素として持つ。
  • 「住民」要素は、「氏名」「性別」「生年月日」「住所」各要素を1個ずつ順に持つ。
  • 「住民」要素には「コード」属性があり、これは文字列(CDATA)で、必須属性(#REQUIRED)である。
  • 「氏名」要素は、「姓」「姓かな」「名」「名かな」各要素を1個ずつ順に持つ。
  • 「姓」「姓かな」「名」「名かな」各要素はすべて文字列(#PCDATA)である。
  • 「性別」要素は空要素である。
  • 「性別」要素には「男女」属性があり、その値は「男」か「女」かのどちらかで、必須属性(#REQUIRED)である。
  • 「生年月日」要素は、「年」「月」「日」各要素を1個ずつ順に持つ。
  • 「年」「月」「日」各要素はすべて文字列(#PCDATA)である。
  • 「住所」要素は、「都道府県」「市町村」「地区番地」各要素を1個ずつ順に持つ。
  • 「都道府県」「市町村」「地区番地」各要素はすべて文字列(#PCDATA)である。

※ 正規表現 (regular expression)

多くのソフトウェアでは正規表現 (regular expression) というもので決まりを持った文字列パターンを指定できる。

DTD においても下記の正規表現が指定できる。

  • ? で直前の要素が0個または1個存在
  • * で直前の要素の0個以上の繰り返し
  • + で直前の要素の1個以上の繰り返し
  • | で複数のパターンの少なくとも一つにマッチすることを指定

3.2.2 XML Schema

  • DTDがスキーマ定義言語として力不足のため、替わるものとしてW3Cによって策定された
  • XML名前空間に対応
  • XMLの文法で記述できる
  • 要素の内容や属性値のデータ型を詳細に指定できる。これまでDTDでは不可能だった細かい表現が可能
    • 文字列・整数・浮動小数点数・日付などサポートするデータ型が豊富な上、取り得る範囲の指定や要素の出現回数の最小・最大の指定や、たとえば "ddd-dddd" (dは数字) 形式の郵便番号書式のようなパターン指定なども可能。
  • オブジェクト指向のモデル化にも対応
  • データ構造がすべてXMLデータとして表現されているためDTDよりもかなりコードが長くなる
  • 現在の最新版は2001年5月にW3C勧告になったもの
リスト12のDTDをXML Schemaで記述し直すとリスト13 (ファイル basic-residential-registers.xsd) のようになる。
リスト13  住民基本台帳のXML Schema (ファイル名: basic-residential-registers.xsd)

<?xml version="1.0" encoding="UTF-8"?>

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">

<xsd:element name="住民基本台帳" type="台帳型">
  <xsd:key name="住民コード">
    <xsd:selector xpath="住民"/>
    <xsd:field xpath="@コード"/>
  </xsd:key>
</xsd:element>
<xsd:complexType name="台帳型">
  <xsd:sequence>
    <xsd:element ref="住民" minOccurs="1" maxOccurs="unbounded"/>
  </xsd:sequence>
</xsd:complexType>

<xsd:element name="住民" type="名簿項目型"/>
<xsd:complexType name="名簿項目型">
  <xsd:sequence>
    <xsd:element ref="氏名"/>
    <xsd:element ref="性別"/>
    <xsd:element ref="生年月日"/>
    <xsd:element ref="住所"/>
  </xsd:sequence>
  <xsd:attribute name="コード" type="コード型" use="required"/>
</xsd:complexType>

<xsd:simpleType name="コード型">
  <xsd:restriction base="xsd:string">
    <xsd:pattern value="[0-9]{11}"/>
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="氏名" type="氏名型"/>
<xsd:complexType name="氏名型">
  <xsd:sequence>
    <xsd:element ref="姓"/>
    <xsd:element ref="姓かな"/>
    <xsd:element ref="名"/>
    <xsd:element ref="名かな"/>
  </xsd:sequence>
</xsd:complexType>

<xsd:element name="姓" type="姓名文字型"/>
<xsd:element name="名" type="姓名文字型"/>
<xsd:simpleType name="姓名文字型">
  <xsd:restriction base="xsd:string">
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="姓かな" type="かな型"/>
<xsd:element name="名かな" type="かな型"/>
<xsd:simpleType name="かな型">
  <xsd:restriction base="xsd:string">
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="性別" type="性別型"/>
<xsd:complexType name="性別型">
  <xsd:attribute name="男女" use="required">
    <xsd:simpleType>
      <xsd:restriction base="xsd:string">
        <xsd:enumeration value="男"/>
        <xsd:enumeration value="女"/>
      </xsd:restriction>
    </xsd:simpleType>
  </xsd:attribute>
</xsd:complexType>

<xsd:element name="生年月日" type="生年月日型"/>
<xsd:complexType name="生年月日型">
  <xsd:sequence>
    <xsd:element ref="年"/>
    <xsd:element ref="月"/>
    <xsd:element ref="日"/>
  </xsd:sequence>
</xsd:complexType>

<xsd:element name="年" type="年型"/>
<xsd:simpleType name="年型">
  <xsd:restriction base="xsd:positiveInteger">
    <xsd:minInclusive value="1850"/>
    <xsd:maxInclusive value="2050"/>
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="月" type="月型"/>
<xsd:simpleType name="月型">
  <xsd:restriction base="xsd:positiveInteger">
    <xsd:minInclusive value="1"/>
    <xsd:maxInclusive value="12"/>
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="日" type="日型"/>
<xsd:simpleType name="日型">
  <xsd:restriction base="xsd:positiveInteger">
    <xsd:minInclusive value="1"/>
    <xsd:maxInclusive value="31"/>
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="住所" type="住所型"/>
<xsd:complexType name="住所型">
  <xsd:sequence>
    <xsd:element ref="都道府県"/>
    <xsd:element ref="市町村"/>
    <xsd:element ref="地区番地"/>
  </xsd:sequence>
</xsd:complexType>

<xsd:element name="都道府県" type="都道府県型"/>
<xsd:simpleType name="都道府県型">
  <xsd:restriction base="xsd:string">
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="市町村" type="市町村型"/>
<xsd:simpleType name="市町村型">
  <xsd:restriction base="xsd:string">
  </xsd:restriction>
</xsd:simpleType>

<xsd:element name="地区番地" type="地区番地型"/>
<xsd:simpleType name="地区番地型">
  <xsd:restriction base="xsd:string">
  </xsd:restriction>
</xsd:simpleType>

</xsd:schema>

XML Schemaの名前空間URI参照は "http://www.w3.org/2001/XMLSchema" だが、接頭辞名としては xsd がよく使われる。なお、最近は xs も使われるようである。文書中で混乱がなければどれを使っても構わない。

XML SchemaではDTDよりも細かい指定を行っている。たとえば、「住民」要素の「コード」属性が11桁の数字列であることを正規表現パターン

[0-9]{11}

で示しており、また、この属性値がルート要素「住民基本台帳」内の全「住民」要素を通じて重複しないものであることをxsd:key要素で指定している。
さらに、「年」「月」「日」がそれぞれ 1850 ～ 2050、1 ～ 12、1 ～ 31 の範囲の整数であることをxsd:minInclusive要素およびxsd:maxInclusive要素で限定している。

しかし一方でコード記述量はかなり多く複雑になっている。

3.2.3 RELAX NG

  • 記述力よりも簡潔性を大事にしたスキーマ定義言語
  • スキーマ自身がXMLで記述される
  • データ型がサポートされる
  • XML名前空間をサポートする
  • XML Schemaに比べて学習が簡単、コードが簡潔
  • OASIS (Organization for the Advancement of Structured Information Standards) で規格化。2003年11月 ISOの標準規格に

3.2.4 今後の展開

現在存在するスキーマは DTD が多いと思われる。 XML Schema あるいは RELAX NG の普及はこれからである。

3.3 XML文書の基本的な構成

以下に基本的なXML文書の例を示す。
(XML文書ファイル basic-residential-registers.xml, DTDファイル basic-residential-registers.dtd)

リスト14  XML文書(住民基本台帳)の基本構成

<?xml version="1.0" encoding="UTF-8"?>    .....  XML宣言
<!DOCTYPE 住民基本台帳 SYSTEM "basic-residential-registers.dtd">    .....  文書型宣言

<住民基本台帳>                          .....  以下がXML文書本体

<住民 コード="12345678901">
    <氏名><姓>山田</姓><姓かな>やまだ</姓かな><名>太郎</名><名かな>たろう</名かな></氏名>
    <性別 男女="男"/>
    <生年月日><年>1985</年><月>12</月><日>15</日></生年月日>
    <住所><都道府県>宮城県</都道府県><市町村>石巻市</市町村><地区番地>日和が丘 1-1-1</地区番地></住所>
</住民>

<住民 コード="56789012345">
    <氏名><姓>山田</姓><姓かな>やまだ</姓かな><名>花子</名><名かな>はなこ</名かな></氏名>
    <性別 男女="女"/>
    <生年月日><年>1986</年><月>3</月><日>31</日></生年月日>
    <住所><都道府県>宮城県</都道府県><市町村>石巻市</市町村><地区番地>日和が丘 1-1-1</地区番地></住所>
</住民>

     ¦
     ¦

</住民基本台帳>                         .....  XML文書本体の終り

リスト14から分かる通り、XML文書は次の3つから構成されている。

  1. XML宣言
  2. 文書型宣言
  3. XML文書本体

3.3.1 XML宣言

XML文書の先頭にはXML宣言 (XML declaration) を記述する。XML宣言は

<?xml バージョン情報 エンコーディング宣言 スタンドアロン宣言 ?>

の形である。XML宣言は省略可能である。

リスト14では

<?xml version="1.0" encoding="UTF-8"?>

となっている。

  • 「バージョン情報」では、version="バージョン" の形で準拠するXML規格のバージョンを指定する。現在の標準であるバージョン1.0を使う場合

    version="1.0"

    となる。なお、バージョン 1.1 を指定する場合は当然 version="1.1" としなければならない。

  • 「エンコーディング宣言」では、encoding="エンコーディング" の形で文書が使用する文字エンコーディング方式を指定する。
    その文書で使用しているのが

    JIS ISO-2022-JP のときISO-2022-JP
    日本語EUC のときEUC-JP
    シフトJIS のときShift_JIS
    UTF-8 のときUTF-8
    UTF-16 のときUTF-16

    と書く。

    XMLではUnicodeのエンコーディング方式であるUTF-8とUTF-16が標準で、これらの方式を使う場合エンコーディング宣言は省略できる。

  • 「スタンドアロン宣言」では、standalone="yes" または standalone="no" の形で、デフォルト値や実体宣言など当該文書の内容に影響を与えるマークアップ宣言が外部に存在するときに "no"、存在しなければ "yes" とする。

    スタンドアロン宣言は省略でき、省略されたとき文書に外部マークアップ宣言があれば "no" と見なされる。

3.3.2 文書型宣言

文書型宣言はXML宣言の次に書かれ、文書のスキーマをDTD文法に従って記述する。DTDはXML文書の中に含めてもよいし、外部ファイルにして文書の中から参照してもよい。文書型宣言は省略可能である。

リスト14では

<!DOCTYPE 住民基本台帳 SYSTEM "basic-residential-registers.dtd">

となっている。これはDTDを別ファイルで持つ場合(外部サブセットと言う)の指定方法である。
XML文書内にDTDを書く場合(内部サブセットと言う)はリスト12の形のものを記述する。

なおスキーマ定義言語としてXML Schemaを使う場合は、この部分ではなくXML文書のルート要素の属性にスキーマ参照を指定する。

例

リスト14の住民基本台帳のXML文書をXML Schemaに対応付けるには、ルート要素の開始タグ

<住民基本台帳>

を

<住民基本台帳
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="basic-residential-registers.xsd">

のように書き換える。"basic-residential-registers.xsd" はリスト13のXML Schemaファイルである。
なお、上の書き方は名前空間を持たないスキーマのためのもので、名前空間 "http://www.w3.org/2001/XMLSchema-instance" に属する noNamespaceSchemaLocation 属性でスキーマURIを指定する。名前空間を持つスキーマの場合には、代わりに schemaLocation 属性によって名前空間URIとスキーマURIを空白文字でつなげたペアを指定する。

3.3.3 XML文書本体

文書本体は唯一つのルート要素を持ち、文法に従った記述がされたもので、ルート要素を根とする木構造を持つ。 各要素は厳密に入れ子をなしていなければならない。つまり、内側の要素から一番外側のルート要素にいたるまで、すべての開始タグと終了タグの対応が取れていなければならない。

タグ付けされた実際のデータは、XML文書本体の部分に記述される。XML本体の部分にはルート要素が存在しなければならない。つまりXML本体は省略できない。

XML文書は木構造でなければならないので、トップレベルの要素はルート要素1個のみでなければならない。

リスト15  トップレベルに2個の要素があるファイル

<?xml version="1.0" encoding="UTF-8"?>
<戸籍要素><氏名>山田 太郎</氏名><続柄>世帯主</続柄></戸籍要素>
<戸籍要素><氏名>山田 花子</氏名><続柄>妻</続柄></戸籍要素>

たとえばリスト15で示すファイルは、トップレベルに2個の要素があるのでXML文書ではない。

3.3.4 整形式XML文書と妥当なXML文書

先に述べた通りXML文書には文書型宣言はなくてもよい。スキーマ指定があってもなくても、少なくともXMLの文法に従って記述されていればXML文書と呼べる。そうしたXML文書を整形式XML文書 (well-formed XML document) と言う。

一方、XMLの文法に従うだけでなく、そのXML文書に関連付けられたスキーマが定義するデータ構造にも従うXML文書を妥当なXML文書 (valid XML document) と言う。つまり、妥当なXML文書はスキーマによる検証にパスする整形式XML文書である。

3.4 実体参照と数値文字参照

XML文書内で何度も出てくる長い文字列を短い記号で代用できると便利である。また大きな文書を作成する場合、まとまった単位ごとに別々のファイルを作って、メインとなるファイルからそれらを参照できれば管理しやすい。 XML文書は1つのファイルである必要はなく、別のファイルや文字列を参照してまとめて一つの文書を構成できる。 XMLでは、この参照される単位になり得るデータを実体 (entity: エンティティ)と言う。 なお、メインの文書本体を「文書実体 (document entity)」と言う。

実体はDTDの中で宣言された文字列であったり別ファイルであったりする。 実体には3通りの分類ができる。

解析対象実体と解析対象外実体
解析対象実体 (parsed entity) は、その内容がテキストであり文書の一部として取り込まれるものである。XMLプロセッサは解析対象実体の参照を対応する内容に置き換えて解析する。 解析対象外実体 (unparsed entity) は任意のデータ形式が可能だが、XMLプロセッサはそれに手を加えないままアプリケーションに渡す。 イメージなどのバイナリデータやXML形式にそぐわないテキストデータが該当する。
一般実体とパラメータ実体
一般実体 (general entity) は、その内容がXML文書の一部として取り込まれる実体である。 パラメータ実体 (parameter entity) は、DTDの中でのみ参照される実体である。
内部実体と外部実体
内部実体 (internal entity) は、文書ファイル内で宣言され文字列への参照を表す解析対象実体である。 外部実体 (external entity) は、外部ファイルへの参照を表す実体である。

XML文書において実体を使うには実体参照 (entity reference) を用いる。一般実体の実体参照は実体名を "&" と ";" で囲んで記述し、パラメータ実体の参照は実体名を "%" と ";" で囲んで記述する。
XMLプロセッサは実体参照があるとそれを対応する文字列またはファイルの内容に置き換える。
なお、内部実体は要素の内容中あるいは属性値の中で参照できるが、外部実体は要素の内容中でしか参照できない。

たとえば、"fit" という名前の一般実体の内容が "福岡工業大学" という文字列を表すとすると、XMLプロセッサは以下のように処理する。

変換前
<概説>&fit;は福岡県福岡市にある私立大学である。</概説>
変換後
<概説>福岡工業大学は福岡県福岡市にある私立大学である。</概説>

ある実体名がどんな内容を参照するかを定義する実体宣言(entity declaration) はDTD内で行われる。
たとえば上の例の実体をDTDで宣言するには

<!ENTITY fit "福岡工業大学">

とする。

外部解析対象実体であるファイルの内容はテキスト宣言 (text declaration) から始めるべきとされている。テキスト宣言は

<?xml バージョン情報 エンコーディング宣言 ?>

のように、XML宣言のスタンドアロン宣言を除いた形になっている。テキスト宣言自体は置き換えの対象とはならない。

3.4.1 定義済み実体

次の表に示す実体参照は宣言しなくても使用できる。

定義済み実体
実体参照内容
&lt;<
&gt;>
&amp;&
&apos;'
&quot;"

例えば要素の内容のテキスト中で記号 "<" を使ってしまうと、XMLプロセッサはそれをタグの始まりと誤認してしまう。このようなことを避けるため実体参照を使う。

例

<定理>a &lt;= b かつ a &gt;= b のとき、a = b</定理>

XMLプロセッサは内容の中の &lt; と &gt; という部分をそれぞれ"<"と">"に相当する文字コードに置き換えて処理する。従って、XMLプロセッサからアプリケーションに渡される「定理」要素の内容は、

a <= b かつ a >= b のとき、a = b

となる。

3.4.2 数値文字参照

"&" の後に "#" と文字コード番号を指定し ";" を続ける形式で文字を指定する数値文字参照 (numerical character reference) という方法も用意されている。
ただし、同じ文字でも文字コードによってコード番号が異なる場合がある。そこで数値文字参照に使う文字コードとして ISO/IEC 10646 規格 (ほぼ Unicode と同じものとみなしてよい) の コードポイント を使う決りになっている。 文字コード番号は数字を並べたものは10進数値、数字の前に x または X が付いたものは16進数値として扱われる。

例

& (U+0026) を数値文字参照を使って表現
&#x26;(16進コード表記)
&#38;(10進コード表記)


鸑 (U+9E11) を数値文字参照を使って表現
&#x9e11;(16進コード表記)
&#40465;(10進コード表記)

3.5 名前の付け方のルール

XMLでは要素名・属性名・実体名などを自由に決められるが、名前に使える文字には制限がある。

3.5.1 名前に使える文字

XMLで使う名前には、先頭で使える文字と2文字目以降に使える文字で異なる制限がある。 表1に示す。
表1  名前として使用できる文字
先頭の文字
Letterクラスの文字
_ (アンダースコア)
: (コロン)
2番目以降の文字
Letterクラスの文字
Digitクラスの文字
Combining Characterクラスの文字
Extenderクラスの文字
_ (アンダースコア)
: (コロン)
. (ピリオド)
- (ハイフン)
表1にでてくる文字クラスの説明を表2に示す。
表2  名前として使用できる文字クラスとそれに含まれる主な文字
Letterクラスアルファベット、ひらがな、全角カタカナ、漢字
Digitクラス半角数字
Combining Characterクラスアクセント記号など
Extenderクラス々、ゝ、ー(カタカナの長音記号)など

XMLで有効な名前の例を以下に示す。

__init__ アンダースコアや
名簿.list 2文字目以降のピリオドや
ひらがな-カタカナ ハイフンが使える

名前に漢字・ひらがな・カタカナを使ってよいが、半角カタカナと全角数字は使えないので注意。
全角アルファベットは使えるが、紛らわしいので半角にした方がよい。
※ ここで「全角」は2バイト文字、「半角」は1バイト文字を表す俗称である。

また、":" (コロン) が使えることになっているが、名前空間の指定でコロンを使用する決りになっているため、実際にはローカル名にコロンを含めるべきではない。

XML文書で使えない名前の例を以下に示す。

1st_period 数字で始まるため
ｶﾅﾓｼﾞﾉﾅﾏｴ 半角カナを使っているため
ＸＹ９９ 全角数字を使っているため

3.5.2 大文字・小文字の区別

HTMLではタグ名や属性名は大文字・小文字の別を気にせずに使うことができる。

XMLではタグや実体などの名前やキーワードを使用するに当たり、大文字・小文字を厳密に区別する必要がある。XMLプロセッサは、スペルが同じであっても大文字・小文字が違っているタグを異なる要素を表すものと判断する。

たとえば、下の書き方は文法エラーになる。

<Title>XML入門</title>

XML規格が定めているキーワードも厳密に大文字・小文字の区別をつけなければならない。例として文書冒頭のXML宣言を挙げる。

<?xml version="1.0"?>○
<?Xml version="1.0"?>×
<?XML version="1.0"?>×
<?xml Version="1.0"?>×
XML文書を作成する際には、規格書や解説書などに書かれているキーワードを大文字・小文字もそのまま書く必要がある。

3.5.3 "xml"で始まる名前

"xml"が先頭にくる名前は予約されており使用できない。大文字であっても小文字であっても "xml" で始まる要素名や属性名などを使ってはならない。
xmlで始まる使えない名前の例
XMLdata
XmlProcedure
xML-OBJECT
xml_file

3.6 コメントとCDATAセクション

XML文書の中でXMLプロセッサに解析させたくないところは、コメント(comment)またはCDATAセクション(CDATA section)にする。

3.6.1 コメント

XML文書中に人間がファイルの中身を見たときにわかりやすいように説明を入れるときコメントを使う。

コメントは <!-- で始まり --> で終了する。ただし、コメント文の中に「--」という文字列を入れてはならない。

XMLプロセッサがコメントの内容をアプリケーションに渡すかどうかは実装依存である。

<!-- コメントの例。通常はファイルを見たときによく分かるような説明をつけておく -->
コメントの別の使い方として、文書の一部をコメントでくくり無効にする使い方がある。コメントアウトと言う。削除してしまうとその部分は消えてしまうが、コメントアウトの場合はファイル中に残っているため変更点がよく分かり、また変更を元に戻すことも容易である。

3.6.2 CDATAセクション

文字列をXMLのタグとして認識させたくないが、内容を確実にアプリケーションに渡したい場合に使う。CDATAセクションの中では < や & などの特別な意味を持つ文字も単なる文字そのものとして扱われる。

CDATAセクションは <![CDATA[ で始まり ]]> で終了する。(CDATAセクションの中には ]]> という文字列は含められない)

<![CDATA[ この部分は<や>や&を含めて「そのまま」アプリケーションに渡される ]]>

3.7 処理命令

処理命令 (processing instruction) はXML文書を扱うアプリケーションへの何らかの指示を表す。一般に、

<?処理命令のターゲット  処理命令の内容?>

の形式となっている。

「処理命令の内容」として、通常の要素の属性指定に似せて

擬似属性="擬似属性の値"

という形の指定をすることが多い。

なお、XML宣言は処理命令ではないので注意。

例

<?xml-stylesheet href="mydoc.css" type="text/css"?>

このxml-stylesheet処理命令はXML文書をスタイルシートと関連付けるもので、hrefとtypeという2つの擬似属性を持っている。(他にもtitle, media, charset, alternate擬似属性がある。)