富山大学 - 脳神経外科学

このテキストは、平成15年9月28日に富山医科薬科大学で行われた、平成15年度東海・北陸地区国立学校等技術専門職員研修(情報処理コース)の実習において使用されたものです。


アクセシブルなウェブページ作成のための HTML 4.01 再入門

富山医科薬科大学 技術室
中山八州男、森内仁志

0. はじめに

現在 Web ページを作成する言語は HTML (HyperText Markup Language) から XHTML (eXtensible HyperText Markup Language) に移行しつつある。 先端を走る人たちはもうとっくに移行済みである。 ワードプロセッサが吐き出す Web ページ用のソースもいつのまにか XHTML になってしまっている。 にもかかわらず、なぜ HTML なのか。

現実にまわりを見渡せば、HTML で作成されている Web ページが圧倒的に多い。 1世代前の HTML 3.2 で作られていると思われるページもかなりの数である。 XHTML に移行しようと思っても、書き直すには少々敷居が高いかもしれない。 というのは、XHTML は HTML 3.2 から見ると格段に書式(文法)が厳格になっているからである。 私のように、HTML 3.2 に慣れてしまった頭ではつらい。 その点、HTML 4.01 は、HTML 3.2 に比べれば少しは厳格に書かなければいけないが、XHTML ほどではない。 XHTML へのつなぎとして、あるいは HTML 4.01 のままでも当分は閲覧不能という事態には陥らないので、先端を走りたいと思う人以外には、充分と思われる。

HTML の規格はバージョン 3.2 までは Web ページを閲覧するブラウザの開発競争に左右されてきた側面もあり、本来の文書構造を記述するという目的からはいささか逸脱したところもあった。 それを本来の目的に戻すという意味でバージョン 4.0 が策定されたのである。 4.01 はそれを少々手直ししたものである。 4.0 になってから、Web ページの見栄えを良くするのには、少々手の込んだことをしなければならなくなった。 今回の実習では、HTML 3.2 から HTML 4.01 への「見栄え」の移行方法も含んでいる。 初めて HTML を書くという方にはその部分を読み飛ばして頂いても結構である。

もう一つ、私が取り上げたかったテーマが、W3C (World Wide Web Consortium) の勧告に厳密に基づいた HTML を書いてみよう、 というものである。W3C の勧告は、HTML の書式を標準化しようというものであり、 この勧告に基づいた HTML を書けば、ほぼ全ての Web ブラウザで問題なく閲覧できると思ってもらっても良い。

「W3C の勧告なんて関係ない。Web ページなんて見られさえすればいいんだ。」という考えも間違っているとは言えないし、否定するつもりもない。 しかし、少し想像力をたくましくすると、視覚に訴えるページは必要なく、聴覚に頼ってそのページを読もうとする人も存在することに気がつく。 そのような人にとっては、「見られさえすればよい」ページはどのように聞こえるのか。 普通に聞くことができるかもしれないし、読んでくれても意味不明だったりするのかもしれない。 聴覚だけに頼る人のことも配慮して Web ページを作るのに、手っ取り早いのは W3C の勧告に厳密に基づいた HTML を書くことである。

実習テキストは、基本的な必要最小限の項目にまとめたつもりである。この程度のことは調べれば判るものばかりである。 このようなつたない実習でも、各講座等の情報発信の一助になれば幸いである。

2002年9月

0.1 今回のテキストを作成するに際して

このテキストは、平成14年(2002年)9月26日(木)に富山医科薬科大学で行われた、第11回(平成14年度)富山地区国立学校技術職員研修 C コースにおいて使用するために作られた「Web ページ作成のための HTML 4.01 の書き方入門」を大幅に加筆変更したものです。「はじめに」は、今読み返しても違和感が無かったのでそのまま残すことにした。

今回のテキストを作成するに際して、前回より一歩踏み込んだ内容にした。CSS はより具体的に実際に現場で使える項目を増やし、そんなことも出来るのかというものも盛り込んだ。

アクセシビリティに関しては、前回はただぼんやりとイメージさせていただけであったが、今回具体的に何をどうすれば良いのかを、おおまかではあるが示した。

私自身この年になると、もはや細かい字は読みにくく、ウェブページを閲覧するのに文字の表示を拡大して見ている始末である。30歳代、40歳代はインターネット利用の比率は他の年代に比べて高いと聞く。その年代がそのまま高齢化し、まず最初に衰えるのが眼ではないだろうか。高齢化だけでなく突然の事故や病気で、いつ私達自身が一時的にでも不自由な体になるかもしれない。私達自身がアクセスしにくいようなウェブページを作るのは、もうやめませんか。

2003年8月

目次

1. HyperText Markup Language (HTML)

1.1 HTML って?

HTML (HyperText Markup Language) は、 SGML (Standard Generalized Markup Language) という文書内容の構造を記述するための言語を元にして、ウェブページ作成用として作られたものです。 SGML と同様に HTML も文書内容の構造を記述するための言語です。

HyperText Markup Language を直訳してみましょう。

"HyperText" とは、書類を用意された順番ではなく、書類のあちこちを自由に参照できる方式のことです。
"Markup" とは、目印を付けるという意味です。
"Language" とは、言語のことです。
まとめると、「書類をあちこち参照できるように目印を付けるための言語」とでもしておきましょうか。

では、この規格はどこで作られているかというと、W3C (World Wide Web Consortium) という組織です。

URI は、http://www.w3.org/ です。

作られているといっても、誰かが勝手に作っている訳ではなく、W3C の メンバーが案を持ち寄って議論の末に決定されます。 ちなみに、メンバーには、 Adobe Systems Inc.Apple Computer, Inc.Honda Motor Co., LtdJapan Broadcasting Corporation (NHK)Keio UniversitySony Corporation 等 463 の企業、団体および学校が入っています。

現在の HTML の規格の最新のものは、HTML 4.01 です。4.01という数字はバージョン(版)を表しています。 この 4.01 が1999年12月24日に勧告され、事実上の最終バージョンになっています。

次の所で原文および邦訳版が読めます。
HTML 4.01 Specification (英語原文)
HTML 4.01仕様書 (HTML 4仕様書邦訳計画補完委員会による邦訳版)

目次へ

1.2 HTML は何をする?

では、見た目を決めるのは何かというと、NetscapeNavigator や InternetExplorer などのウェブブラウザです。 ブラウザが HTML の情報を読み込み、テキストやイメージを整形し、画面上に表示します。 例えば、ブラウザはウィンドウの大きさに合わせてテキストの表示幅を自動的に調節したりします。

異なるブラウザだと、各要素に対する対応付けが違っていることがあります。 ですから、システムやブラウザが違うとページの中身やリンクは同じなのですが、画面での見え方や表現方法は違うことがあります。

例えば、<h1> という見出し用のタグがあります。一般的なブラウザでは文字を大きく太く表示しますが、音声によって読み上げるブラウザも存在し、その場合は文字を大きく表示することは必要無く、重要なのは <h1> という見出し用のタグが付いていること自体なのです。

目次へ

1.3 チェックしてみましょう

あなたが作ったウェブページが HTML の規格に沿っているかどうか、調べてみましょう。 作ったことが無い人は、普段見ているページでもいいですから、その URI をメモ(思い出)して下さい。

URI が思いつかない方は、以下のページなどはいかがでしょう。

1.3.1 W3C MarkUp Validation Service

http://validator.w3.org/

ここは、W3C が公式に運用している HTML 等が正しいかどうかを確認するためのウェブページです。
ページが表示されましたら、Validate Files という項目の Address: 欄に先の URI を入力し、「Validate URI」ボタンを押して下さい。

1.3.2 Another HTML-lint

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

ここは、個人が無償で運用している HTML の文法をチェックする日本語のウェブページです。
ページが表示されましたら、 URL というラジオボタンが黒くなっていることを確認し、入力欄に先の URI を入力しチェックボタンを押して下さい。

いかかでしたでしょうか。エラーが表示されましたか?
そのエラーが出ないような HTML を書きましょうというのが、今回の実習の目的です。

目次へ

1.4 実際の作成に入る前に

インターネット上のウェブページは広く一般に公開されるということを認識しておかなくていけません。 広く一般(不特定多数)ということは、OS(オペレーティングシステム)やウェブブラウザを特定することは出来ないということです。

1.4.1 機種依存文字を使わない

機種依存文字とは、パソコン等で日本語を表示するために使われる文字コードのうち、共通の物以外で、一部の機種や OS 独自に割り当てた文字のことです。

良く見かける例として、ローマ数字の I, II, III 等があります。Windows マシンで正しく表示されても、Macintosh では、(特)、(監)、(企)などの文字として表示されます。 また、Macintosh でのローマ数字も Windows では ・・・として表示されますので、やはり使うのはやめた方が良いでしょう。

その他の機種依存文字については、以下の URI を参照してみて下さい。

機種依存文字劇場 http://apex.wind.co.jp/tetsuro/izonmoji/

1.4.2 特定のブラウザ依存の機能は使わない

ウェブブラウザは現在 InternetExplorerNetscapeNavigator が主と思われますが、どちらかのブラウザでしか動作しない機能は使わないようにしましょう。

例えば、<brink> というタグはブラウザでは文字を点滅させますが、NetscapeNavigator でしか点滅しませし、<marquee> というタグは文字をスクロールさせますが InternetExplorer でしかスクロールしません。 見る人に注目してもらいたいという意図はそのブラウザで見ている人以外には通じないことになります。

もう少し一般的なことを言えば、世の中には上記の代表的なブラウザ以外にも色々なブラウザが存在し、その全てに対応するにはどうすれば良いか。現状では無理と言わざるを得ませんが、少しでもその状態に近づけるには、HTML の標準規格以外は使わないということになります。 現在の標準規格は W3C の HTML 4.01 であり、「標準」と言えるのはその中でも Strict DTD に基づいたものだけです。Transitional DTD や Frameset DTD に基づくものはいずれも Strict DTD への移行過程の暫定的なものという位置づけなのです。

目次へ

1.5 では始めましょうか

1.5.1 何を使うの?

OS 付属のテキストエディタと呼ばれるアプリケーションプログラムでとりあえずは充分です。 具体的には、MacOS だと SimpleText、Windows だとメモ帳です。 とりあえずというのは、MacOS の SimpleText は 32KB(キロバイト)、Windows のメモ帳は 64KB までしか扱えないからです。 32KB というのは、日本語で 16,000文字分ですからとりあえずは充分だと思います。ちなみに、今ブラウザでご覧になっているこのファイルは約 105KB です。これぐらいになるとそれなりのテキストエディタ等が必要になります。 使い慣れているテキストエディタ等があればそれが良いと思います。

あと、オフライン(ネットワークに接続していない状態)で、閉じタグ忘れ、入れ子の不整合やスペルミスなどの単純な間違いをチェックするアプリケーションがあると便利かもしれません。 私はもっぱら JChecker を使っています。

それでは、MacOS の方は SimpleText を Windows の方はメモ帳を起動して下さい。

今回は、たまたま使用するマシンに Jedit というシェアウェアのテキストエディタがインストールされていますので、それを使いましょう。これは日本語文字コードや改行コードを変更できるので、後で違う OS のマシンで見るときにも便利です。

1.5.2 要素 (element) とタグ (tag)

HTML の要素 (element)とは、段落や見出しなどを HTML で表現する上での部品とも言えます。部品にはそれぞれ要素名という名前が付けられていて、たとえば、段落には p という要素名が付けられています。

要素名を"<"と">"で囲んだものをタグ (tag) と言います。タグはテキスト等に目印をつける、つまりマークアップするための記号です。タグは必ず、1バイト文字(いわゆる半角文字)で書かなければいけません。

タグは、一部の例外を除いて <html>〜</html> というふうに/(スラッシュ)無しで始まり / 有りで閉じるようにペアで使います。マークアップは、始まりタグから終了タグまでの間が有効です。

つまり、こんな形式になっています。

<要素名>タグの対象</要素名>

目次へ

1.5.3 属性 (attribute)

要素には、属性を付けられます。属性はその属性の付いている要素の性質や補足事項を指定できます。また、スペースで区切って複数指定することも可能です。

形式はこうなっています。

<要素名 属性名="指定値">タグの対象</要素名>
<要素名 属性名1="指定値" 属性名2="指定値">タグの対象</要素名>

1.5.4 文書型宣言(DOCTYPE 宣言)

HTML を書き始める前に、今から書くHTML がどんな種類なのかを <html> タグの前に書いておく必要があります。

無いと、ブラウザは HTML 2.0 で書かれたものと解釈します。表示に関しては、全然問題なく表示される場合もあります。 しかし、それは HTML の仕様的には「正しい」とは言えないので書くようにしまょう。

1.5.4.1 文書型宣言の意味

代表的なものを例示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ぱっと見ても何が何だかよく判らないですよね。分解してそれぞれの意味を書いてみます。

無理やり日本語にすると、「公開されている W3C が所有する英語で書かれた HTML 4.01 の文書型定義に基づいた HTML の文書です。その文書型定義は http://www.w3.org/TR/html4/strict.dtd にあります。」でしょうか。

目次へ
1.5.4.2 文書型宣言の種類

HTML 4.01 には 3種類ありますが、後半の URI が書かれている部分が有るのと無いのでブラウザ側での意味が違いますので、合計6種類ということになります。 これは、IE6, Netscape6, Mac版 IE5 からブラウザに追加された機能で、「標準モード」と「互換モード」という表示の仕方の違いによるものです。タグの下のそれぞれの説明は、ブラウザに対しての指示です。

1つづつ見ていきましょう。

目次へ

1.5.4.3 Document Type Definition (DTD/文書型定義)

DTD というのは、使える要素(タグ)・属性等をどのように使用するかを規定してある辞書のようなものです。 各 URI の 各 dtd 文書がそれにあたります。

今回の実習では、W3C 勧告に厳密に基づいた HTML を書くことを目的としていますので、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

を使います。今から書き始める HTML 文書の1番最初に、このとおりに記述して下さい。 この実習テキストをブラウザで見ている方はコピー & ペーストしてもかまいません。

目次へ

1.6 HTML 3.2 からの変更点の抜粋

HTML 4.01 になって、それまで使っていた HTML 3.2 の element(要素)が deprecated (非推奨)となりました。 原文には以下のように記述してあります。

"The following elements are deprecated: APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, and U."

原文: Changes between HTML 3.2 and HTML 4.0 (18 December 1997)

日本語訳の主な要素の説明とスタイルシートへの書き換え方が下記にあります。

HTML 4.01仕様書 (15. 配置、フォントスタイル、横罫線)

HTML 3.2 で使用してきた要素・属性で、HTML 4.01 では推奨しない具体的な例を上げると、以下のようなものがあります。

目次へ

1.7 HTML の基本構造

HTML の基本構造はこのようになっています。

<html>
<head>
<title>
</title>
</head>
<body>

</body>
</html>

例では、入れ子の深さに応じてインデントをとっていますが、インデント無しでもかまいませんし、改行さえ無くて1行で全部記述してもかまいません。 ただし、後で編集することを考えてある程度は見やすく書いておいたほうが良いと思います。 入れ子の深さに応じてインデントをとるのは、編集時に入れ子になるタグのペアを見失うのを防ぐためです。 機能面には全く影響しません。

目次へ

1.7.1 <html> </html>

<html> は HTML 文書の1番大元となるタグです。ここでは、この HTML 文書が日本語であることを指定します。 以下のように記述します。

<html lang="ja">

英語ならば ja の代わりに en を指定します。

1.7.2 HTML 文書の拡張子

HTML ファイルには、HTML 文書だということをブラウザに認識させるために .html という拡張子がファイル名の後に続けて必要です。3文字しか拡張子が付けられない場合は .htm でも結構です。

ここで一度、ここまで書いた HTML 文書を保存しておきましょう。ファイルメニューから「別名で保存」を選んで、適当な名前と .html の拡張子を付けて、とりあえずデスクトップに保存します。

目次へ

1.8 ヘッダ部

1.8.1 ヘッダ <head> </head>

HTML のヘッダ情報を記述します。最低限必要なのは、ページに使用する日本語文字コードの指定です。 以下のように記述します。

<meta http-equiv="content-type" content="text/html;charset=shift_jis">

最後の shift_jis がパソコン等で最も使われている日本語文字コードの「シフトJIS」を表します。 MacOS や Windows で作った HTML 文書をそのまま使うのでしたら、この shift_jis を使います。 他に、iso-2022-jp(JIS)や UNIX系マシンで使われる euc-jp(EUC)があります。

今回はスタイルシートを使いますので、スタイルシート(CSS)を使うことを宣言しておきましょう。 以下の行をヘッダ部に追加して下さい。

<meta http-equiv="content-style-type" content="text/css">

1.8.2 タイトル <title> </title>

タイトルは、普通はブラウザ上部のタイトルバーに表示されます。 また、ブックマークに登録するときの見出しにもなります。

いくつもの HTML 文書を作っていくと、うっかりタイトルを変更するのを忘れることがありますが、ブックマークに登録したら同じ名前がいくつもあり、区別が付かないようなことになりますので、文書を替えたらタイトルも忘れず変更しましよう。

<title>タイトル</title>

目次へ

1.9 ボディ部

1.9.1 ボディ <body> </body>

本文が入る部分です。

<body style="color: #000000; background-color: #ffffff">

この例では、スタイルシートを使っていますが、文字色を黒色に、バックグラウンド(背景)の色を白色に指定しています。

以降、説明する要素(タグ)は、全てこの <body> </body> の中に入ります。

目次へ

1.9.2 【色の指定】

色の指定は様々な所で使いますが方法は全て同じで、主に16進数6桁で表す場合と、英語で指定する場合が有ります。 どちらでも書きやすい方で書いてかまいませんが、英語の方は基本の16色以外はブラウザが対応していない場合もありますので注意が必要です。

基本の16色
実際の色英語16進数6桁
blackblack#000000
nabynaby#000080
blueblue#0000ff
greengreen#008000
tealteal#008080
limelime#00ff00
aquaaqua#00ffff
maroonmaroon#800000
purplepurple#800080
oliveolive#808000
graygray#808080
silversilver#c0c0c0
redred#ff0000
fuchsiafuchsia#ff00ff
yellowyellow#ffff00
whitewhite#ffffff

ちなみに、16進数6桁での指定は、6桁を2桁づつ3つのグループに分けて、左側から光の三原色の R (red), G (green), B (blue) の色の明るさを指定しており、それぞれ 00 から ff まで256段階あります。 見る側の画面での表示制限があることを考えると、あまり細かい指定は避けたほうが無難です。 それぞれの色の 00, 33, 66, 99, cc, ff が Web safe color といって、使っても安全だと言われています。

目次へ

1.9.3 ブラウジングしてみましょう

ここで、いままで書いた HTML 文書をブラウザで表示してみましよう。 NetscapeNavigator でも InternetExproler でもお好きなブラウザを起動させて下さい。 すでにこのテキストをブラウザで見ている方は、ファイルメニューから「新しいウィンドウを開く」を選んで、新たにウインドウを1つ開いて下さい。 ブラウザのウインドウに、デスクトップにある、あなたが作った HTML 文書をドラッグ & ドロップしてください。 いかがですか、今指定したバックグラウンドの色だけのウィンドウになったと思います。 変更する場合は、HTML 文書で変更し、それを保存してから、ブラウザの再読み込みボタンを押して下さい。

これからは、この繰り返しで、確認しながら作成してゆきます。 次のタグから順に記述して、実際にどう表示されるか確認してみて下さい。

1.9.4 見出し <h1> </h1>〜<h6> </h6>

1番大きい見出しとして表現される <h1> </h1> から1番小さい見出しとして表現される <h6> </h6> まで6段階あります。 記述の仕方と実際にどう表現されるかを並べてあります。

<h1>超特大見出し</h1>

超特大見出し

<h2>特大見出し</h2>

特大見出し

<h3>大見出し</h3>

大見出し

<h4>中見出し</h4>

中見出し

<h5>小見出し</h5>
小見出し
<h6>特小見出し</h6>
特小見出し

見出しタグを、単に文字を大きく見せるために使っているページが散見されますが、見出し要素をよりどころにしてブラウジングしている方が混乱しますのでやめましょう。

目次へ

1.9.5【ブロックレベル要素とインライン要素】

1.9.5.1 ブロックレベル要素

ブロックレベル要素というのは、ひとつのまとまった単位として表現される要素(タグ)のことで、今回取り上げた要素の中では、h1〜h6, p, div, ul, ol, table, hr がそれにあたります。

1.9.5.2 インライン要素

インライン要素は、見出しや段落などの一部として使われるもので、ブロックレベル要素の中でしか使えません。今回取り上げた要素の中では、a, br, img, span, sub, sup がそれにあたります。

1.9.6 汎用ブロックレベル要素 <div> </div>

1.9.7 汎用インライン要素 <span> </span>

1.9.8 段落 (Paragraph) <p> </p>

目次へ

1.9.9 リスト <ul> </ul>、<li> </li>

<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>

このように入れ子にもできます。入れ子にする場合は、<li> </li> の中で入れ子にします。

<ul>
<li>リスト項目1</li>
<li>リスト項目2
<ul>
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
<li>リスト項目2-3</li>
</ul>
</li>
<li>リスト項目3</li>
</ul>

HTML 3.2 では属性の指定によってリストの先頭に付くマークを選べたのですが、非推奨となりました。

目次へ

1.9.10 番号付きリスト <ol> </ol>、<li> </li>

<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>
  1. リスト項目1
  2. リスト項目2
  3. リスト項目3

番号無しリスト同様、入れ子にもできます。入れ子にする場合は、<li> </li> の中で入れ子にします。

<ol>
<li>リスト項目1</li>
<li>リスト項目2
<ol>
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
<li>リスト項目2-3</li>
</ol>
</li>
<li>リスト項目3</li>
</ol>
  1. リスト項目1
  2. リスト項目2
    1. リスト項目2-1
    2. リスト項目2-2
    3. リスト項目2-3
  3. リスト項目3

HTML 3.2 では属性の指定によってリストの先頭に付く番号の種類を選べたのですが、非推奨となりました。 スタイルシートでは可能ですのでスタイルシートの項で方法を説明します。

リストは、以下のように番号無しリストと番号付きリストを組み合わせることもできます。

目次へ

1.9.11 強制改行 <br>

<p>段落等の文章の中で強制的に改行させたい場合に使います。<br>閉じタグは必要ありません。</p>

は、こうなります。

段落等の文章の中で強制的に改行させたい場合に使います。
閉じタグは必要ありません。

1.9.12 横ライン <hr>

このように横ラインを引きます。閉じタグは必要ありません。


属性の align, size, width が非推奨となりました。例えば、<hr width="50%" align="center"> などは使えません。

目次へ

1.9.13 テーブル <table> </table>、<caption> </caption>、<tr> </tr>、<th> </th>、<td> </td>

<table> </table> テーブル全体の範囲を決めます。
<caption> </caption> 表題を付けます。
<tr> </tr> 1行の始めと終わりを決めます。
<th> </th> 内容が見出しセルの場合このタグを使います。一般的なブラウザでは太字になります。
<td> </td> 内容がデータセルの場合このタグを使います。

<table> </table> の属性

<table summary="〜"> テーブルの概要を記述します。
<table border="〜"> テーブル全体の枠線の太さを指定します。単位はピクセルです。
<table cellpadding="〜"> セルの内容とセル枠の間の間隔を指定します。単位はピクセルです。

例えば、見出しを含めて、3行3列、概要が Table Sample 、表題がテーブルのサンプル、枠の太さが2ピクセル、セル内容とセル枠の間隔が5ピクセル、の表を作る場合は以下のように記述します。

<table summary="Table Sample" border="2" cellpadding="5">
<caption>テーブルのサンプル</caption>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td></tr>
<tr><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td></tr>
</table>

テーブルのサンプル
見出し1見出し2見出し3
データ1-1データ1-2データ1-3
データ2-1データ2-2データ2-3
目次へ

1.9.14 上付き文字 <sup> </sup>

文字を上付きにします。

y = x<sup>2</sup>

y = x2

1.9.15 下付き文字 <sub> </sub>

文字を下付きにします。

H<sub>2</sub>O

H2O

目次へ

1.9.16【URI (Uniform Resorurce Identifier)

URL (Uniform Resorurce Locator) と言ったほうが判りやすいかもしれませんが、URL は場所を指し示すためのもので、 URI は物を特定するために使われます。URI のほうが広い概念で、URL は URI に含まれます。どちらを使っても良いのですが、本テキストでは URI に統一してあります。

URI には、絶対 URI と相対 URI があります。

1.9.16.1 絶対 URI

絶対 URI は、

続けて書くと、http://www.toyama-mpu.ac.jp/index.html となり、これで世界中どこからでも特定のファイルを指定できます。

1.9.16.2 相対 URI

相対 URI は、特定の場所(今読み込んでいるファイル)から見ての相対的な位置を指定します。

同じディレクトリ内のファイル指定でしたら、<a href="./filename.html"> です。

一つ上の階層のディレクトリ内のファイル指定でしたら、<a href="../filename.html">

同じディレクトリ内にあるディレクトリ内のファイルでしたら、<a href="./directoryname/filename.html">

目次へ

1.9.17 アンカー(リンク) <a> </a>

<a href="URI">  これは、指定した URI へ移動します。

移動先がウェブページの場合は、<a href="http://〜"> どこそこ</a> というように使います。

例えば、アンカーで富山医科薬科大学のホームページへ移動させたい場合、
<a href="http://www.toyama-mpu.ac.jp/"> 富山医科薬科大学</a>
と記述すると、こうなります。

富山医科薬科大学

ページ内の特定の場所への移動も同じ href 属性を使うのですが、移動先にもアンカーが必要です。

<a id="idousaki"> 移動先</a> というように指定します。id は当然ですが同じページ内で違う場所に同じ値を付けてはいけません。また、id 属性に対応していないブラウザのために name 属性も付けて同じ値を指定することもあります。

<a id="idousaki" name="idousaki"> 移動先</a> こうなります。

移動元では、<a href="#idousaki"> 移動先</a> のように値の前に # を付けて指定します。

違うページへの移動でしたら、<a href="./filename.html#idousaki"> 移動先</a> のようにファイル名に続けて移動先のアンカーを指定します。

1.9.18 画像を配置する <img>

画像を配置する場合は、<img src="./image.png" alt="image"> のように指定します。閉じタグは必要ありません。

src 属性で画像ファイルを指定します。

alt 属性が付いていますが、その画像を表すテキストを入れます。HTML 4.01 Strict では必須です。無いと、画像が表示できないブラウザでは無意味な情報となります。

あと、img 要素はインライン要素なので、必ずブロックレベル要素の中で使う必要があります。

目次へ

2. スタイルシート (Cascading Style Sheet: CSS)

スタイルシートは、レイアウトや体裁などを本文の文書構造とは切り離して定義します。 そうすることによって、本文の文書構造を HTML で書くときに、そのつど見栄えを考慮して書く必要が少なくなります。

例えば、h2 という見出し要素にスタイルシートでセンタリングを指定すれば、全ての<h2> </h2>という見出しタグの内容はセンタリングされます。

現在多く使われているのが W3C 勧告の Cascading Style Sheets, level 2 で、一般的には CSS2 と訳すことが多いです。

原文は次の所で読むことができます。Cascading Style Sheets, level 2 (CSS2) Specification

スタイルシートを使う方法は、大きく分けて3種類あります。
併用も可能です。

今回の実習では、外部ファイルにまとめる方法を使います。

HTML のヘッダ部の項で書きましたが、ヘッダ部に以下の記述があることを確認して下さい。

<meta http-equiv="content-style-type" content="text/css">

目次へ

2.1【部分的に指定する方法(参考までに)】

style 属性は、XHTML 1.1 では非推奨となっていますので、XHTML への移行をお考えの方はなるべく外部ファイルを使う方法をお奨めします。

2.1.1 要素(タグ)ごと指定する

HTML 文書の指定したい部分のタグの要素名に続けて、style= の後の " " の中にスタイル指定を ; で続けて書きます。

<p style="color: green; background-color: #ffffff; font-style: italic">要素ごと、一時的にスタイルを変える</p>

要素ごと、一時的にスタイルを変える

2.1.2 一時的に特定の部分のみに指定する

これは、例えば1つの段落の中で特定の単語だけなどにスタイルを指定する場合です。汎用インライン要素の span を使います。

HTML 文書の指定したい部分に <span style= の後の " " の中にスタイル指定を ; で続けて書きます。 指定を解除させるタグ </span> が解除部分に必要です。

<p>元のスタイル<span style="color: red; background-color: #ffffff; font-size: 1.5em">スタイルを変えるテキスト</span>元のスタイル</p>

元のスタイルスタイルを変えるテキスト元のスタイル

目次へ

2.2【ヘッダ部にまとめる方法(参考までに)】

<style type="text/css">
<!--
body { color: #000000; background-color: #ffffff }
p { text-align: left; line-height: 1.5em }
h1 { color: blue }
h2 { color: green }
-->
</style>

HTML 文書のヘッダ部に上記のように <style type="text/css"> </style> で囲んだ中に、指定したい要素名のあとに続けて、{ } の中にスタイル指定を ; で続けて書きます。

<!-- 〜 --> はコメント行と言って、ブラウザに表示させたくない文字を記述する場合に使います。 無くてもヘッダ部にあるので表示さないはずなのですが、一部の古いブラウザでは表示される場合がありますので念のためコメント行とします。

この例は、 が複数記述されています。
目次へ

2.3 外部ファイルを使う方法

多数のウェブページを作成する作業の効率性から言えば、スタイル定義をそれぞれの HTML 文書内に書かずに別のファイルとして作成し、同じスタイル定義を複数の HTML 文書で共有するのが良いでしょう。 HTML 文書内にはその HTML 文書でしか使わないスタイル定義のみを記述するということです。 それによって、管理しなければならない多数のウェブページのデザインを統一することも可能です。

HTML 文書のヘッダ内に以下のように記述し外部ファイルを指定します。

<link rel="stylesheet" type="text/css" href="./filename.css">

filename.css というファイルがスタイル定義ファイルで、中身はテキストでスタイル定義のみ記述します。

それでは、テキストエディタで新しいファイルを作成して、適当な名前とCSSファイル用の拡張子を付けて保存して下さい。

目次へ

2.4 CSS の実際

2.4.1 適用先の指定

2.4.1.1 要素名で指定する

body や p などの要素名ごと指定する方法です。この場合指定された要素が全て同じスタイルになります。

2.4.1.2 適用先を複数指定する

同じスタイルを複数指定したい場合には, で区切って指定します。

2.4.1.3 クラス属性で指定する

HTML 文書の中の要素にクラス属性を指定する必要があります。クラス属性は何回でも使えます。また、同じタグの中で複数使う場合はスペースで区切って指定します。

クラス名の前にピリオドを書きます。

目次へ
2.4.1.4 リンク部分に指定する

それぞれの状態の時のスタイルを指定できます。スタイルシートに記述するだけで変化を付けられますが、訪問者が戸惑わないように初期値を大きく変えないようにするのが良いでしょう。

例えば、こんなこともできます。  富山医科薬科大学

2.4.1.5 属性に指定する

属性に対して指定することができます。以下の例は要素名 a のうち、属性名 id の属性が入っている場合のみ適用されます。

目次へ

2.4.2 文字色と背景色

こからは実際に HTML に組み込んでいきましょう。説明が3つの部分に別れています。上から、CSS ソース、HTML ソース、実際の表示の順です。

文字色と背景色はペアで使うことが推薦されています。単独でも使えまが、ユーザーのブラウザの設定によっては、どちらかが設定されている場合もあり、組み合わせによっては文字が読めなくなる場合もありますので、明示的に指定した方が良いでしょう。

2.4.2.1 文字色 color
2.4.2.2 背景色 background-color
目次へ

2.4.3 テキスト

2.4.3.1 行揃え text-align
左揃え
中央揃え
右揃え
2.4.3.2 行の高さ line-height

数値+単位の組み合わせがこれから多くなりますので、ここで説明しておきます。

em: 文字の高さと考えてもらって結構です。2em だと基準の 2倍の高さ(幅、長さ)となります。

%: これは普段使っている % と同じです。相対的な単位で基準に対する百分率です。

目次へ
2.4.3.3 1行目のインデント text-indent

段落などで、1行目だけを字下げしたい場合に使用します。スペースで本文中で調整すると、ブラウザによってはスペースを無視する物もあるので、こちらの方がスマートです。

目次へ
2.4.3.4 テキストの線による修飾 text-decoration
目次へ

2.4.4 フォント

2.4.4.1 フォントサイズ font-size
目次へ

2.4.5 リストスタイル list-style

リスト要素のうち ol 番号付きリストの数字の種類を指定します。none は番号無しリストでも使えます。 一連のリスト全体に指定するには、ol 要素に対して指定します。

<ol>
<li class="decimal">リスト項目1</li>
<li class="lowroman">リスト項目2</li>
<li class="uproman">リスト項目3</li>
<li class="lowalpha">リスト項目4</li>
<li class="upalpha">リスト項目5</li>
<li class="listnone">リスト項目6</li>
</ol>
  1. リスト項目1
  2. リスト項目2
  3. リスト項目3
  4. リスト項目4
  5. リスト項目5
  6. リスト項目6
目次へ

2.4.6 ボックス

ボックスは、内容を特定の位置に表示させるための四角い枠の設定です。時には目に見えないものを対象にしますので、最初はボーダーの設定で細い点線などを表示させたままレイアウトすると良いかもしれません。

2.4.6.1 マージン margin

親要素に対して、余白をとることができます。body 直下の p にマージンを指定すると親要素である body の枠からの余白ということになります。上下左右個別に指定できます。

上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

上部から時計周りに 5%, 10%, 20%, 50% に指定してあります。判りやすいようにバックグラウンドを薄い青色に指定してあります。

auto という値も指定できます。自動にすると結果的にセンタリングされます。判りやすいようにバックグラウンドを薄い青色に指定し、幅を body の 50% に指定しました。

目次へ
2.4.6.2 パディング padding

パディングというのは、内容と枠の間の詰め物のことです。その詰め物は透明で、その部分の背景がそのまま見えます。 上下左右別々の指定もできます。また、% 指定もできますが、上位ブロックレベルの枠の幅に対しての指定ですので注意が必要です。

パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

パディングを上右下を枠の 5% とり、左を枠の半分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

目次へ
2.4.6.3 ボーダー border

ボーダーというのは境界を意味します。ここでは、境界の線と考えてもらっても良いでしょう。

2.4.6.3.1 ボーダースタイル border-style

境界の線の描き方を指定します。初期値は none になっていますので、指定しないと表示されません。

ボーダースタイルを実線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

ボーダースタイルを上部から時計回りに実線、二重線、点線、破線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

目次へ
2.4.6.3.2 ボーダーカラー border-color

ボーダー色をオレンジに指定してあります。ボーダースタイルを実線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

ボーダー色を上下左右それぞれ違う色に指定してあります。ボーダースタイルを実線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

目次へ
2.4.6.3.3 ボーダーの太さ border-width

ボーダーの太さを指定します。値としては、数値em, 数値px、thin, medium, thick などが使えます。

ボーダー太さを20ピクセルに指定してあります。ボーダー色をオレンジに指定してあります。ボーダースタイルを実線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

ボーダー太さを上下左右それぞれ違う太さに指定してあります。ボーダー色を上下左右それぞれ違う色に指定してあります。ボーダースタイルを実線に指定してあります。パディングを1文字分とってあります。上下左右のマージンがブラウザの表示幅の 10% の指定です。判りやすいようにバックグラウンドを薄い青色に指定してあります。

目次へ

2.4.7 段組み

2.4.7.1 回り込み float を使う

2段組みの指定のうち、これは、1段目の最初の段落です。このように指定すると左上に段落が配置されます。判りやすいように 1 ピクセルの点線で枠を表示しています。

2段組みの指定のうち、これは、1段目の2番目の段落です。このように指定すると左下に段落が配置されます。判りやすいように 1 ピクセルの点線で枠を表示しています。

2段組みの指定のうち、これは、2段目の最初の段落です。このように指定すると右上に段落が配置されます。判りやすいように 1 ピクセルの点線で枠を表示しています。

2段組みの指定のうち、これは、2段目の2番目の段落です。このように指定すると右下に段落が配置されます。判りやすいように 1 ピクセルの点線で枠を表示しています。

目次へ

2.5 CSS 検証サービス

W3C が公式に行っている CSS が正しいか確かめるサービスがあります。ありがたいことに日本語で検証できます。

W3C CSS 検証サービス

2.6 スタイルシートのまとめ

スタイルシートのほんの一部のみを紹介しました。うまく思った通りに色々なスタイルシートを組み合わせて指定するには、ブラウザの「癖」があることもあり、少しばかりの試行錯誤が必要です。このほかにも多くのスタイルの指定が有りますので書籍などを参考にして試してみて下さい。

目次へ

3. Web Content Accessibility Gidelines 1.0 (WCAG 1.0)

3.1 アクセシビリティって?

アクセシビリテイ(Accessibility) という単語の意味は、辞書には「接近できること、近づきやすさ」というふうに書いてありますが、ここでは「アクセスできること、アクセスしやすさ」と読み替えても良いでしょう。ですから、ウェブコンテンツアクセシビリティとは、ウェブコンテンツつまりウェブページのコンテンツ(内容)にアクセスできる、もしくはアクセスしやすいという意味です。

なぜそんなことが必要なの? 今のままでもアクセスできないなんてことは無いよ。と言う方もいらっしゃるでしょう。 でも、「はじめに」にも書きましたが少し想像力を働かせれば、世の中には健常者ばかりという訳ではなく、色々な障害を持った方がいらっしやるのです。そんな方にとってインターネットのウェブページは健常者以上に情報を得るための重要なシステムなのです。

もう一つ理由をあげるとすると SEO (Search Engine Optimization ) 検索エンジン最適化ということです。アクセシブルということは、検索ロボットにとってもアクセシブルな訳です。アクセシブルなウェブページは検索サイトに登録される確率が高くなります。

目次へ

3.2 WCAG とは

W3C が勧告するアクセシビリティに関するガイドラインのうち、ウェブコンテンツを作成する上でのガイドラインがウェブコンテンツアクセシビリティガイドラインです。他に、ブラウザ等を開発する上で指標となる、ユーザーエージェントアクセシビリティガイドライン(User Agent Accessibility Guidelines)や、Dreamweaver などのウェブページを作成するためのツール用の、オーサリングツールアクセシビリティガイドライン(Authoring Tool Accessibility Guidelines)などがあります。

ガイドラインの作成は W3C の中の Web Accessibility Initiative (WAI) という部門で行われています。WCAG 1.0 は1999年5月5日に勧告され、今となっては現実的ではないという部分も存在し、 WCAG 作業部会では、WCAG 2.0 の策定作業がすすめられ、 草案(ドラフト)が2003年の6月に公開されました。

ガイドラインはチェックポイントで項目別に示され、何に対してどう対処すべきかが書かれています。

以下に原文と代表的な日本語訳を紹介しますので、お時間のある方は読んでみて下さい。

なお、本テキストで使用している優先度の各項目、適合度の各項目、ガイドライン項目とチェックポイントの日本語訳は、ZSPC の大藤 幹さんが訳されたものを、ご本人の了解を得て掲載してあります。

具体的な対策の部分の文は、私が色々な所で得た情報を元にまとめたものです。

目次へ

3.3 優先度

65のチェックポイントそれぞれに、早急に対応してほしいものから、できれば対応してほしいというものまで優先度というランクが付けられています。

目次へ

3.4 適合度

ウェブページがどの程度チェックポイントに適合しているかによって、適合度が決められています。サイト全体に対してや特定のページだけ、あるいは特定のページの特定の部分のみに対して適合度を表示できます。

目次へ

3.5 ガイドライン項目とチェックポイント

WCAG 1.0 には、14のガイドライン項目と65のチェックポイントがありますが、ここではそのうちの優先度1のチェックポイント全てと、優先度2のチェックポイントの中から重要と思われるものを選んであります。

3.5.1 ガイドライン1. 聞くための内容や見るための内容には、同等の役割を果たす代わりのものを提供する

その情報がユーザーに与えられた時に、聞くための内容や見るための内容と本質的に同じ効果や役割を伝える内容を提供する。

目次へ

3.5.2 ガイドライン2. 色だけに依存しない

色を再現できない環境で表示しても、テキストやグラフィックスが理解できるようにする。

目次へ

3.5.3 ガイドライン3. 正しくタグ付けし、適切にスタイルシートを使う

文書は、適切な構造を表す要素でタグ付けし、見栄えなどの表示方法を制御するためには、表示を制御するための要素や属性を使用せずに、スタイルシートを利用する。

目次へ

3.5.4 ガイドライン4. 自然言語の取り扱い方に関する情報を明確に示す

発音の仕方や、略語や外国語の意味が容易にわかるようなタグ付けをする。

目次へ

3.5.5 ガイドライン5. うまく変換されるテーブルを作る

テーブルがアクセシブルなブラウザやユーザーエージェントによってうまく変換されるために必要なタグ付けを正しく行う。

目次へ

3.5.6 ガイドライン6. 新しい技術を利用したページは、うまく変換されるようにしておく

新しい技術をサポートしていなかったり、その機能をオフにした状態でもアクセシブルであるようにする。

目次へ

3.5.7 ガイドライン7. 時間とともに変化する内容については、ユーザーが制御できるようにする

移動、点滅、スクロール、自動的に更新されるオブジェクトやページは、一時的にまたは完全に停止させることができるようにする。

目次へ

3.5.8 ガイドライン8. ページ中に組み込まれたもののユーザーインターフェイスは、それ自体がアクセシブルなものにする

ユーザーインターフェイスは、アクセシブルなデザインの原則に従ったものにする(機能の実現方法を装置に依存しないものにする、キーボードで操作可能にする、音声によるガイドをつけるなど)。

3.5.9 ガイドライン9. 装置に依存しないように設計する

様々な入力装置からページの内容を操作できるような機能を使う。

目次へ

3.5.10 ガイドライン10. 暫定的な解決策をとる

支援技術や古いブラウザを使った場合でも正しく操作できるように、暫定的なアクセシビリティの解決策をとる。

3.5.11 ガイドライン11. W3Cのテクノロジーとガイドラインを使用する

W3Cのテクノロジー(仕様)とガイドラインに従う。W3Cのテクノロジーを利用できない部分や、うまく変換できなかったものに対しては、アクセシブルな代わりのバージョンを提供する。

目次へ

3.5.12 ガイドライン12. 前後関係や位置を表す情報を提供する

複雑な内容やページ構成でもユーザーが理解できるように、前後関係や位置を表す情報を提供する。

3.5.13 ガイドライン13. はっきりとわかるナビゲーションのための仕組を提供する

探している情報がすぐに見つけだせるように、明確で一貫したナビゲーションのための仕組(位置情報、ナビゲーション・バー、サイトマップなど)を提供する。

3.5.14 ガイドライン14. 文書は明瞭で簡潔なものにする

文書は、より簡単に理解しやすいように明瞭で簡潔なものにする。

目次へ

3.6 アクセシビリティ検証ツール

総務省ウェブアクセシビリティ実証実験事務局のページです。ウェブヘルパーという検証ツールをダウンロードできます。

みんなのウェブ: アクセシビリティ実証実験ホームページ

まとめ

ここまで、基本的なHTML のタグの使い方、スタイルシートやアクセシビリティの技法を実習してきました。ウェブページは、それらの組み合わせで、HTML 文書の最初に書いたものから順にブラウザで表現されます。 良い ウェブページを作るのにはいくらかの試行錯誤も必要です。 この実習で覚えた文法やアクセシビリティの技法を使って、実際にアクセシブルな良いウェブページを作って頂けると幸いです。

謝辞

最後になりましたが、今回の実習に際しご尽力頂いた栗山政彦総括技術官、森腰正弘前総括技術官はじめ技術室の方々、庶務課の方々など準備に関わって頂いた全ての方に感謝致します。

WCAG 1.0 の日本語訳の掲載を快諾して頂いた、ZSPC の大藤 幹さんに感謝致します。

参考図書

目次へ

脳神経外科学のページへ
富山大学ホームへ