図1 HTMLとワープロの違い
このサイトはβ版ですので，書けていない個所もあるし書き直しをする場所もあります．
このページでは，東京女子大学の学生への教材の形を借りて，誰もが使いやすい，ウェブの標準仕様に準拠したウェブサイトを，できるだけ簡単に構築する方法を解説します．つまり，以下3つのポイントを押さえたウェブサイトを構築する方法を解説しようと目論んでいます．
IT時代といわれる今日，コンピュータやインターネットなどの情報通信技術がますます我々の生活に浸透してきています．総務省の「平成16年 通信利用動向調査」によると，平成16年末には，世帯の8割がインターネットを利用し，利用者数は8千万人にのぼっています．
ウェブ (World Wide Web)は，CERN（欧州原子核研究機構）の研究者Tim Berners-Leeが考え出した仕組みです．CERNは国際的な共同研究施設なので，世界中から研究者がやってきます．しかし彼らは実験が終わるとそれぞれの所属組織に帰ってしまいます．というわけでCERNには，世界中の国からやってくる様々な研究者が作ったデータがあちこちに散在しているものの，それを再利用することは難しい状態でした．そこでインターネット上に散在しているデータを再利用する仕組みとしてウェブが作られました．ウェブではハイパーリンクという仕組みを使って他のデータを指し示すことができます．また文字データのみならず，画像や音などの様々な形式のデータをウェブブラウザで表示できるようになっていました．
ウェブは，電子メールと並んで多いインターネットの利用形態です．ウェブを利用して新聞や天気予報や地図や電車の乗り換え情報を見たり，オンラインショッピングをしたりすることもできます．検索エンジンを使えば，世界中で公開されている情報の山の中から必要な情報を探し出すこともできます．今や電子メールでさえ，ウェブで利用することもできるようになっています．ブログ，SNS (Social Network Service)，Ajaxなど，Web 2.0時代を迎え，ウェブは，ますます頻繁に使われるインターネット・アプリケーションになっていくでしょう．
日本政府は，2005年2月に「IT政策パッケージ2005」として，ITの利用・活用をいっそう促進し，ITがもたらす問題点を克服することをあげています．IT政策パッケージには，電子政府や電子自治体の推進が取り上げられているので，今後，行政情報がインターネットで提供されるだけでなく，電子申請などのサービスがオンラインで行われることが見込まれます．そして，電子政府のこうしたサービスはウェブで行われるでしょう．行政情報はウェブで提供され，電子申請もウェブページから利用することになると思われます．
新聞などで盛んに報道されているように，日本は前例のない高齢化社会に突入しつつあり，2015年には4人に1人以上が高齢者(65歳以上)になると予想されています．高齢になると，認知能力や身体能力が衰えてきます．また，視覚障害などの身体障害を生じる割合も増えます．このような社会で電子政府を推進するためには，高齢者を含む誰もが簡単にウェブを使える（ユニバーサルなウェブ利用ができる）ようにしておく必要があります．
ウェブの便宜を受けるのは健常者だけではありません．障害者のほうが，ウェブをはじめとするICT技術による貢献を受けているかもしれません．ウェブを使えれば，外出できなくても最新ニュースを読めますし，買い物もできます．電子メールで友人と手紙をやりとりすることもできます．逆に，画面が見えないなどの理由でウェブを利用することができないなら，そうした利用者はウェブの利便性を受けることができず，電子政府のサービスからも取り残されてしまいます．
私がこのウェブページ「簡単ユニバーサル・ウェブ」を書いたのは，高齢者や障害者を含む，誰もが簡単に利用できるわかりやすい（別の表現をすれば利用者に優しい，あるいはユーザビリティが高い，さらにアクセシビリティにも配慮している）ウェブサイトを構築する方法を，ウェブの初心者にもわかるように示したかったからです．しかも，ウェブに関する知識をできるだけ要求せずに，ウェブの標準に準拠したユニバーサルなウェブサイトを簡単に作る方法を示したいと思っています．（ユーザビリティとは使いやすさのことです．アクセシビリティとは，障害のあるなしなどの個人の状態に関わらず，誰でもが利用できるようにすることです．）
まだ何も学んでいない段階ですが，下記課題をやってみてください．この授業の後半で，もう一度同じ課題に取り組むと，自分の知識や理解が深まっていることが分かると思います．
皆さんが普段使うサイトで，「使いにくい」サイトはないですか？ 何が原因で使いにくいのでしょう？ 使いやすいサイトと使いにくいサイトをいくつか取り上げて、その理由を考えてみてください．本ページの「ウェブのユーザビリティ」を読んだり，「標準 ウェブユーザビリティ辞典」を参考にしたりすることをお薦めします．
全盲の視覚障害者がWebを利用する方法として，IBMのホームページ・リーダーという音声ブラウザがあります．音声ブラウザでの読み上げをお見せしながら，見た目は同じでも音声でも使えるサイトと使いにくいサイト，あるいは全く使えないサイトがあることをお見せします．
このデモで気付いて欲しいことを，「音声によるウェブ利用の特徴」にまとめました．
今日，デモしたサイトでは，見た目は似ているのに，音声表示で聞くと，ユーザビリティやアクセシビリティが全く違うサイトがあることに気付いたと思います．また，アクセシビリティに配慮したページは，ユーザビリティも高いことが多いです．Web標準に準拠し，少し配慮するだけで，ユーザビリティもアクセシビリティも高いサイトを制作できます．
ここでは，誰もが使いやすいウェブを作る際に重要なキーワードとなる「Web標準」，そしてそれに付随する技術である(X)HTMLとCSS2について簡単に説明します．
ウェブ標準とは，下記のようにサイトを作成（コーディング）することを言います．
今の時代のウェブサイトは，このウェブ標準に則って作成することが求められているし，クールな方法です．しかし，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定することをせずに，マークアップでデータの見せ方まで指定してしまっているウェブサイトが多いです．また，そのような間違った教え方をする人もたくさんいらっしゃいます．
ウェブは，HTTP（HyperText Transfer Protocol）という手順に従って，ウェブブラウザ（User Agent）とウェブサーバがデータをやりとりします．やりとりされるデータは，HTML (HyperText Markup Language)又は XHTML (eXtensible HTML) という文法に則って記述されています．HTMLは，その名が示すように，ハイパーテキスト＋マークアップ言語です．
データは(X)HTMLという文法に従って書くと言いましたが，(X)HTMLという文法に従ってデータ構造をマークアップ（タグ付け）すると言った方が適切かも知れません．たとえば<h1>タグで，そのデータが見出しであることをウェブブラウザに示すことができます．
下記HTMLでマークアップの例を見てみましょう．
<html>
<head>
<title>初めての授業</title>
</head>
<body>
<h1>初めての授業</h1>
<p>今日<strong>はじめて</strong>，東京女子大学で授業をしました．</p>
</body>
</html>
このデータは<html>というタグで始まって，</html>というタグで終わっています．htmlタグは，このデータがHTMLであることを示しています．
このデータは次に，<head>から</head>までのヘッダ（見出し）部分と，<body>から</body>までのボディ（本文）部分に分かれています．ヘッダ部分には，このHTMLページのタイトルを記述できます．ボディ部分に本文を書きます．
他にも色々なタグが使われていますが，最後に「<strong>はじめて</strong>」を説明しておきます．このstrongタグは，このタグで囲まれた部分を強調して表示することを示しています．
このように(X)HTMLでは，データそのもの以外に，（そのデータが何であるかという）データの意味（semantics）も記述することができます．
ここで注意すべきことは，strong要素は，タグで囲んだ部分を強調して表示して欲しいということだけを示しているだけで，どのように強調表示するかまでは定めていないということです．実際の強調表示方法は，htmlデータを表示するウェブブラウザによって異なります．画面に表示するブラウザはstrong要素を太文字で表示することが多いようです．音声ブラウザは，strong要素を太い声で読み上げることで強調表示するかも知れません．（strong要素をどう表現するかはスタイルシートで設定することができます．）
では図1を例にとって，この「マークアップ」の重要性と，それがいかに誤解されて又無視されているかについて述べます．
図1a)は，この一群のデータが箇条書きのリストであることを，箇条書きリストのタグ<ul>とリストの各要素を示すタグ<li>を使って示しています．
ワープロはこれとはまったく違います．図1b)に示すように，ワープロの場合は，中点で始まる文章を少し字下げして並べることで視覚的に箇条書きリストを表現しています．（Wordはもう少し賢いので，Wordのスタイルを適切に使えば，意味をある程度表すこともできます．）
ウェブブラウザは図1a)のようなHTMLを元に，画面には図1b)のように表示します．ウェブブラウザが表示するHTMLページとワープロの画面は非常に似ていますが，HTMLに書かれているのはデータとその意味だけで，それをどういう風に視覚的にレイアウトして表示するかはウェブブラウザに任されています．ですから音声表示専用のウェブブラウザは，耳で聞いたときに分かりやすいように箇条書きを表示することが可能です．
HTMLとワープロの違いをわかっていただけましたか? ワープロは文字をレイアウトすることで視覚的にデータの意味を暗示しています．HTMLではデータをマークアップすることで，明示的にデータの意味を表現できます．そしてそのデータをどう表現するかはスタイルシートとウェブブラウザーに任されているのです．ところが世の中には，このことを無視してHTMLのタグを使ってレイアウトしてしまっているウェブページが未だ多いのです．
ウェブでは，(X)HTMLのマークアップによって，下記のような構造を表すことができます．
卒論でいえば，h1要素が題目，h2要素が章，h3要素が節，h4要素が項に相当します．見出し要素を使うことで，長いページを意味のあるまとまりで階層的（章，節，項）に区切り，その内容の「見出し」をつけることができます．きちんと見出しが付いた文章は，晴眼者にとっても読みやすいと思います．見出しは大きな文字で表示されることが多いので，ページをざっと眺めるだけで，どこに何が書いてあるのかがつかめるし，目的の箇所に移動するのも簡単です．
後で説明する，FirefoxのDocumentMapを使えば，任意の見出しに簡単にジャンプできるようになります．この教材には，ページの最初に目次が付いています．あれは，見出し要素を拾い出して自動的に生成したものです．でも，DocumentMapのような機能がブラウザにあれば，目次を作らなくても，簡単にジャンプできるようになります．視覚障害者用のブラウザには，見出し間を簡単にジャンプする機能が付いていて，長いページの中から目的の箇所に移動したり，ページの概要を把握するのを容易にしています．
ページに見出しをマークアップすることで，あるサイトでは，晴眼者・視覚障害者とも，最大2倍早く情報を見つけることができることや，その効果が視覚障害者に対してより大きいことが分かっています．（T. Watanabe, "Experimental Evaluation of Usability and Accessibility of Heading Elements", W4A, (2007)）
表は，2次元のデータの関係を表しています．画面で見れば縦横の関係がすぐ分かりますが，音声で聞くと，どの行のどの列かがわかりません．しかしtable要素でマークアップすれば，視覚障害者用の音声ブラウザは，どの行のどの列かも教えてくれるので，視覚障害者にも理解しやすくなります．
| 学部名 | 学科数 | 教員数（名） | 学生数（名） |
|---|---|---|---|
| 文理学部 | 7 | 93 | 2460 |
| 現代文化学部 | 3 | 42 | 1100 |
(X)HTMLと並んで重要なのが CSS (Cascading Style Sheets)です．ウェブでは，データの見栄え（見せ方，表示方法，プレゼンテーション）は，(X)HTMLではなくてCSSなどのスタイル言語を用いて指定します．つまり，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定するのが，ウェブページの正しい（つまり，ウェブの標準に従った）作成方法です．
CSS2（Cascading Style Sheets, level 2）では，画面，印刷，スライド，音声といった表示メディアごとに表示スタイルを指定できます．この仕組みを使うと，ウェブページを画面で見るときはゴシックフォントで表示し，印刷して読むときは新聞などで使われている明朝体フォントで表示し，音声で表示するときは本文は一郎君の声でリンク部分は花子さんの声で読み上げるというように，表示メディアに適した表示スタイルを使い分けることができます．しかもCSS2では，ウェブページの製作者が指定した表示スタイルを置き換える形でユーザが指定した表示スタイルを使うことができます．たとえば弱視のユーザならば，フォントサイズを大きくしたり色のコントラストを明確にしたりした自分専用のスタイルシートを使って，ウェブを見ることができます．
［CSSの力］：スタイルシートを切り替えて表示を変える例
(X)HTMLとスタイルシートを分離するメリットをわかっていただけましたでしょうか．スタイルシートを使わずに(X)HTMLの要素中に文字の色や大きさなどの属性を指定してしまうと，表示スタイルと(X)HTMLのデータを分離できなくなってしまいます．表示スタイルを指定したいときはスタイルシートを使うようにしましょう．
以下のソースを理解するにはCSSの基礎知識が必要となりますが，それは後で説明することにして，CSSで何ができるかの具体例を書きます．
スタイルシートに下記のように書かれていたら，ウェブページは黒色の背景の上に白色の文字で表示されます．また，h1見出しは，1.7倍大きな太字で，センタリングして表示されます．
/* ここに書いてある内容を覚える必要はありません．*/
body { /* body要素全体の表示スタイル指定 */
color: #FFFFFF; /* 文字色：白 */
background: #000000; /* 背景色：黒 */
}
h1 { /* h1要素共通の表示スタイル指定 */
font-size:170%; /* 文字サイズ：170% */
font-weight:bold; /* 文字太さ：太字 */
text-align:center; /* 中央揃え */
}
.red { /* red という修飾子で指定された要素だけの表示スタイル指定 */
color: #FF0000; /* 文字色：赤 */
}
.navi li { /* naviという修飾子で指定された要素だけの表示スタイルを指定 */
color: #FFFFFF; /* 文字色 */
background: #FF99FF; /* 背景色 */
width: 10em; /* 箱の幅は10文字分 */
text-align: center; /* 文字はセンタリング */
margin: 0px; /* マージン(ボックスとボックスの間隔)を0にする */
padding: 0.3em; /* パディング(ボックス枠と文字との間隔)を0.3文字分空ける */
border: 1px solid #CC3399; /* 枠線幅は1ピクセル，実線，色も指定 */
display: block; /* ブロックレベル要素として扱う */
list-style: none; /* リスト項目に中点などをつけない */
float: left; /* ボックス領域を左側に寄せる */
}
また，外部スタイルシート(example.css)を指定しているXHTMLページに下記の記述があったら，「ここは大事」だけが赤色で表示されます．
<span class="red" >ここは大事</span>
外部スタイルシート(example.css)を指定しているXHTMLページに下記の記述があったら，リスト要素を水平な箱の連結として表示できます．ページ幅が狭くなると，箱が自動的に折り返されて2列表示になります！
<div class="navi">
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://e-words.jp/">e-Words</a></li>
<li><a href="http://ja.wikipedia.org/wiki/">Wikipedia</a></li>
<li><a href="http://yahoo.co.jp/">Yahoo!</a></li>
</ul>
</div>
どうです．CSSを使いこなせばいろいろなことができるのがわかるでしょう!
ウェブ標準を無視して，あるいは無知なために，HTMLの要素でレイアウトしてしまう間違いを2例挙げます．
strongは強調表示するための要素です．ほとんどのウェブブラウザはこの要素を太文字で表示しますが，太文字で表示するための要素ではありません．太文字を使いたいならば，後述するスタイルシートで，font-weight:bold;のように指定すべきです．
下例に示すようにtableは表を作るための要素です．表では，縦方向や横方向に並んでいるデータにはお互いに関係があります．下記の例ならば，左側一列に並んでいるデータはコンピュータに関するデータで，右側の列は人間に関するデータです．横方向に見ても，各行ごとに両者で対照的な性質が書いてあります．
| コンピュータ | 人間 |
|---|---|
| とても高速 | とても低速 |
| エラーなし | エラーだらけ |
table要素を使うときれいに縦横にレイアウトできるので，table要素をレイアウトのためだけに用いているケースが多いです．たとえば，下図2のように，ページ上端に広告記事，左端に今日の天気と株価の表示，右上端に本文，右下端にその他の記事が表示されているようなニュースサイトは，table要素で簡単に実現できます．
| 広告記事 | |
| 今日の天気 | トップ記事は目に付きやすい位置にレイアウトされます． |
| 株価 | その他の記事 |
<table width="200" border="0" cellpadding="5" cellspacing="5">
<tr>
<td colspan="2" class="LT_ad">広告記事</td>
</tr>
<tr>
<td style="width:50; background-color:#EEEEEE;">今日の天気</td>
<td style="width:100">トップ記事は目に付きやすい位置にレイアウトされます．</td>
</tr>
<tr>
<td style="width:50; background-color:#EEEEEE;">株価</td>
<td style="width:100">その他の記事</td>
</tr>
</table>
でも，このページでは，左と右の同じ高さに並んでいる情報には何の関連もありません．これらの情報はレイアウト上同じ高さに来ているだけです．このようなページを音声表示すると，音声ブラウザは，たまたま同じ高さに並んでいる情報を続けて読み上げるので，音声で聞いている視覚障害者にはちんぷんかんぷんなことになってしまいかねません．レイアウトテーブルを読み上げるとどうなるかという例を図3に示します．
ただし，音声ブラウザがテーブルをどういう順番で読み上げるかに配慮し，また，th要素やsummary属性などのテーブルの構造を表す要素を用いないようにすれば，table要素をレイアウト的に使っても問題があまり生じないようにできます．
図4にCSSのfloatプロパティを使ってレイアウトする例を示します．（このソースを理解するためには，XHTMLやCSSの基礎知識が必要になりますが，それは後で解説します．）
<div class="LTheader">（ヘッダ）</div>
<div class="LTnavigation">
<ul class="LTnavi">
<li>今日の天気</li>
<li>株価</li>
<li>購読</li>
<li>サイトマップ</li>
</ul>
</div>
<div class="LTcontent">ここが視覚的にもっとも目立つ位置なので，
トップニュースなどの重要な情報がここに置かれる．</div>
<div class="LTfooter">（フッタ）</div>
.LTheader {
background-color: #00CCFF;
}
.LTnavigation {
float: left;
background-color: #FFFF99;
}
.LTcontent {
float: left;
}
.LTfooter {
clear: both;
background-color: #00CCFF;
}
図5にCSSのpositionプロパティを使ってレイアウトする例を示します．
<div class="example"> <div class="LT_TopNews">トップ記事は目に付きやすい位置にレイアウトされます．</div> <div class="LT_weather">今日の天気</div> <div class="LT_stock">株価</div> <div class="LT_top_line">広告記事</div> </div>
.LT_TopNews {
height: 10ex;
width: 13em;
position: relative;
top: 4ex;
left: 8em;
}
.LT_weather {
height: 4ex;
width: 7em;
background-color: #EEEEEE;
position: relative;
top: -6ex;
left: 0px;
}
.LT_stock {
height: 4ex;
width: 7em;
background-color: #EEEEEE;
position: relative;
top: -6ex;
}
.LT_top_line {
height: 4ex;
width: 21em;
background-color: #00CCFF;
text-align: center;
position: relative;
top: -19ex;
}
上記ソース例に示すように，HTMLソースに書いてある順番と画面に表示される順番を異なるようにすることもできます．音声ブラウザはHTMLソースに書かれている順番に読み上げるので，この性質を上手に使えば，トップ記事を画面上は右真ん中に表示し，音声では最初に表示されるようにすることもできます．
上記のほかに，HTML 3などの古い仕様でウェブページを書いている，あるいは HTML 4.01を使っていても古い仕様の考え方を引きずっているウェブページが多いです（図6）．授業などでも，こういう古い仕様が教えられているケースをよく見かけます．
ウェブが普及したとき，NetscapeとInternet Explorerのブラウザ戦争がありました．両ブラウザはシェア獲得を目指して，独自の機能を備えていきました．Internet Explorerのmarquee要素もこの一例です．このようににHTMLの機能が異なると，ブラウザごとにHTMLを用意しなければならず，ウェブの発展が阻害されてしまいます．このような背景の下で，ウェブの標準仕様を定めている国際コンソーシアムW3Cが1997年に公開したのが HTML 4です．HTML 4は，文書構造とプレゼンテーションを分離する考え方が取り入れられました．この結果，アクセシビリティにも配慮できるようになりました．HTML4をXMLの枠組みで捉えなおしたのが，XHTML 1.0です．現時点では，(HTML 4.01または)XHTML 1.0に従ってウェブページを作成するのが望ましい書き方です．
残念ながらHTML 4.01は，古いバージョンのHTMLの互換性のために，文書構造とプレゼンテーションを分離しない書き方も許容してしまいます．したがって，スタイルシートを一切使わなくても，HTMLの要素や属性で，プレゼンテーションを指定できてしまいます．
<body bgcolor="red" text="blue"> <p align="left">2005年8月4日<br> <bold>鈴木一郎</bold> </p> ...
ウェブブラウザがこのような古い考え方のページを問題なく表示できるから，CSSを使わない方が簡単だから，新しい仕様を覚えるのは面倒だから，そういう理由で古い方法を使い続けるのはやめましょう．文書構造をXHTMLでマークアップし，プレゼンテーション（データの表示方法）をCSSで指定するのが，現在の標準です．
今まで見た例でわかるかもしれませんが，XHTMLとCSSを別々のファイルで編集するのは，結構大変です．XHTMLファイルを書くときは，CSSファイルにどのようなスタイル要素があるのか知っておく必要があります．見栄えを変更したくなったら，CSSファイルを編集しなければなりません．それに，XHTMLやCSSの文法を知らなければ，このようなソースコードを書くことができません．このような作業を簡単にしてくれるのが，オーサリングツール（ウェブサイト作成支援ソフト）です．以下にオーサリングツールを3つ紹介します．
上記のうち，DreamweaverとKompozerは，作者にXHTMLやCSSの知識がなくても，WYSIWYG（What You See Is What You Get）なGUIエディタでウェブサイトを構築できます．DreamweaverとAptanaは，自分で（XHTMLやCSSの）ソースコードを直接書いてサイトを作成できます．今回はKompozerを使いますが，後述するようにKompozerにはサイト作成の限界があるので，ウェブの標準を勉強したい場合は，DreamweaverとAptana等を使って，ソースコードを自分で書いてみることも大事だと思います．
自分のWindowsパソコン（やMacパソコン）で Kompozer を使うときには，まず，下記手順で Kompozerをインストールしてください．東女の情報処理教室のMac OS XにはKompozer本体はインストール済みですので，日本語化作業だけが必要です（詳細は，下記注参照）．
ja，文字エンコードをUTF-8にする．次に「詳細」タブをクリックして，「マークアップ形式」の言語をXHTML 1，DTDをStrictにする．(図7参照)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title></title>
</head>
<body><br /></body>
</html>
つまり，XHTMLの言語がja(日本語)に指定され，utf-8という文字コードが使われます．また，XHTML 1.0 StrictというDTD（文法，スキーマ）を使ってウェブページが書かれることになります．
さらに，「HTML要素・属性でなく、CSSによるスタイル付けを用いる」ので，CSSファイルを使ってプレゼンテーションを指定することになります．XHTML 1，DTDをStrictにします． ja，文字エンコードをutf-8にします．(図7参照)
「Kompozer(Nvu)マニュアル」に， とてもわかりやすい説明があるので，まずはこれを見てください． まずは，各ツールバー（編集ツールバー，書式ツールバーの1行目と2行目）の各ボタンの意味を調べてみましょう．
習うより慣れろ．まずはKompozerを使って簡単なウェブページを作ってみます．
<img style="width: 215px; height: 54px;" src="deptC-logoChars.png" alt="コミュニケーション学科，－情報社会を主体的に生きる力を養う－" />
index.htmlならHTMLという種類のファイルだし，index.xhtmlならXHTMLという種類のファイルになる．注意すべきは，（東女の情報処理教室でKompozerを利用する際，）DTDの種類と拡張子が一致しないとSafariでエラーになる．つまり，DTDがXHTMLなのに，拡張子を.htmlにしたり，DTDがHTMLなのに拡張子を.xhtmlにしたりしてはいけない．前章では，見栄えを全く指定しませんでした．今度は見栄えを指定してみましょう．Kompozerの「ツール」メニューから，CSSエディタを立ち上げれば，表示スタイルを指定できます．
スタイルセレクタ：CSSでは，要素ごとに表示スタイルを指定することもできるし，特定のclass属性をもった要素に対して表示スタイルを指定することもできる．KompozerのCSSエディタでいうと，
<span class="red" >ここは大事</span>書式ツールバー2行目左端のドロップダウンリストには，CSSエディタで作成した名前付きスタイルの一覧が表示される．
<link rel="stylesheet" type="text/css" href="nabe.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="large.css" title="Large font" />
@import url(nabe.css);
body {
font-size: x-large;
}
@media print {
body {
font-size: 10.5pt;
font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
}
.TOCBackLink {
display: none;
}
h2 {
page-break-before: always;
}
}
CSSエディタを使いこなすためには，CSSの基本知識が必要です．詳細は後で説明しますが，CSSエディタと関係するところだけ簡単に説明します．
作成したウェブページが文法(DTD)通りにウェブページが書かれているかどうか，Validatorでチェックしてみましょう．Kompozerでページを保存してから「ツール」メニューの「HTMLの文法をチェック」を選択すると，W3CのMarkup Validation Serviceのサイトにソースが送られてチェックしてくれます．DTDの仕様と一致していたら"Passed validation"と表示されます．そして，XHTML 1.0に適合していることを示すマークをページに貼ることができます．
KompozerからW3C Validatorをうまく呼び出せない時は，HTML Validation Serviceをブラウザで開いて，ローカルにあるファイルを指定してください．
また，「Another HTML-lint gateway」も使ってみてください．非常に厳しく採点するので，最初は得点が負の値になるかも知れません．このサイトで満点を取るためには，ある程度の文法の知識を持ってソースを直接編集する技能が必要です．
ValidatorやHTML-lintなどの文法チェッカでチェックすると，もしかしたらかなりの数のエラーを指摘されるかも知れません．Kompozerは賢いので，注意深く使えばValidatorに指摘されるようなエラーは出ないはずなのですが，うっかり使うと，インライン要素である文字列がbody要素の下に書かれてしまったりしてエラーになることもあります．
Validatorで指摘されたエラーを修正する時は，ソースを直接編集した方が早い場合が多いと思います．また，Kompozerには限界があり，グラフィカル画面で編集するだけでは意図したとおりの(X)HTMLにならない場合もあるので，そういう場合もソース表示で編集する必要性に迫られると思います．ソースを直接編集する場合は，(X)HTMLの知識が（ある程度）あることが必要になってきます．
皆さんが普段見ているウェブページのソースは簡単に見ることができます．気になったページがあったら，(X)htmlファイルのソースやCSSファイルのソースを見てみると良いと思います．
でも，Kompozerを使えば，かなりのところまでソースを全く編集せずにウェブページを作ることができるのがわかったと思います．しかもそのウェブページは，標準に（かなりの程度）準拠した「正しい」ウェブページになっています．「Kompozerでは物足りないな，直接ソースを編集したいな．」と思ったあなたはもうウェブの初心者ではありません．今後はXHTML 1.0とCSS 2.1の仕様を勉強して，より高度で正確なウェブページを作成してください．また，そういうあなたは，Dreamweaverなどの本格的なオーサリングツールを使用することをお薦めします．
今までは，作成したページを公開することを全然考えていませんでした．Wordなどの他のファイルと同じ場所に作成しても，自分以外の人はそのページを見ることはできません．しかし，作成したページを適切な場所（ウェブサーバが指定する場所）に置くと，世界中に公開できます．
各自のホームディレクトリ直下に，WWWとWWW-localという名前の2つのディレクトリがあるでしょうか．もしなかったら，作ってください．東女の情報処理教室の環境では，WWWの下にあるファイルは世界中に公開されます．また，WWW-localの下にあるファイルは東京女子大学内部だけに公開されます．
これらに置いたファイルは，下記URLで閲覧することができます．
WWWディレクトリ：http://www.twcu.ac.jp/~ユーザ名/WWW-localディレクトリ：http://www-local.twcu.ac.jp/~ユーザ名/「Kompozerサイトマネージャ」を利用すると，Kompozerで作成したファイルを，ウェブで公開できる場所に簡単に保存できます．
通常の環境では，自分のパソコンで作成したHTMLファイルやCSSファイルや画像データなどをウェブサーバと呼ばれる特殊な役割を持つコンピュータに転送して初めて，自分が作成したデータをウェブで公開することが出来ます．東女では，WWW (WWW-local)ディレクトリの下でファイルを作成すれば自動的にウェブで公開されるので，通常環境のような「公開」作業が不要ですが，以下では，自宅のパソコンで作成したデータを民間プロバイダのウェブサーバで公開する練習にもなるので，あえてWWW （WWW-local）ディレクトリ以外の場所でデータを作成し，それをWWWディレクトリに転送してみることにします．
http://www-local.twcu.ac.jp/~ユーザ名/WWW-localディレクトリを選ぶ．imagesなどの画像類専用のディレクトリを作成しておいて，そのサブディレクトリに配置させても良い．）Kompozerサイトマネージャで新しいディレクトリを作成し，その下に公開することもできます．
Validatorで指摘されたerrorの理由を知りたい人は，以下の手順で修正すると良いかも知れません．ただし，ソースを直接編集する必要が生じるかもしれません．
Kompozerには，目次作成機能があります．この機能を使うと，H1，H2．．．見出しを元に目次リンクを作成し，目次からページの各見出しに簡単にジャンプできるようになります．課題1や課題2で使っても良いですよ．
JavaScriptをページに埋め込むだけで，自動的に目次を作ることも出来ます．実はこのページは，その方法で（ページの読み込み時に動的に）目次を作っています．ウェブブラウザーでこのページのソースを見てください．ソースには目次のリンクがないでしょう！
KompozerはWYSWYG (What You See is What You Get)エディタなので，XHTMLやCSSの仕様を知らなくても，ワープロ感覚で，ウェブの標準に準拠したウェブサイトを作成できます．とは言っても，基本的なことを知らないと，Kompozerを効率的にあるいは正しく使えません．
このサイトの目的の一つは「難しい知識なしにウェブサイトを構築」することだと述べましたが，初心者を超えるためには，ある程度，基本的なことを知っておく必要があります．ウェブサイト構築の専門家を目指すなら，(1) (X)HTML，CSS，JavaScriptなどの技術スキル，(2) ウェブのユーザビリティやアクセシビリティのガイドラインの知識，(3) ユーザニーズ収集，情報アーキテクチャーとサイト設計のスキル，(4) （テストツールやチェックリストやユーザ評価などの）サイト評価のスキルが必要になると思います．そこで，これらの技術や知識について，以下，大事なところだけをまとめておきます．
XHTMLで文書の構造をマークアップするためには，文章に構造がある必要があります．章，節，項のようなセクション構造，箇条書きのようなリスト構造，そういう構造があって初めて，タグでマークアップすることができるわけです．ということは，ウェブで情報を公開するためには，まず情報の構造を見つけて，次にその構造をマークアップすることになります．この「構造を見つける」という作業がとても重要です．
最初に，文章の題目を考えましょう．それがtitleとh1見出し になるはずです．次に，文章を適切な単位に分けましょう．いくつかの大グループに分け，次に各大グループを中グループに分けていきましょう．そしてグループ毎に，そのグループの中身を適切に示す見出しを考えましょう．その見出しが，h2やh3になります．heading要素やulやolなどリスト要素，またテーブル要素などを，適材適所で上手に使ってください．
また，ひとつのページが，本文以外に，ヘッダー（サイト内検索やグローバルナビゲーションなどが含まれる）とフッター（サイトポリシーや連絡先などが含まれる），あるいは左側や右側のカラム（メニューなどが含まれる）などの大きなブロックで構成されることが多いと思います．こうしたブロックは前ページに共通して配置され，ウェブサイトに一貫したデザインと操作性を提供します．こうしたブロックはdiv要素で囲い，ブロックごとに適切な深さの見出しを付けることをお薦めします．機能ごとにまとめたdivブロックには，そのブロックの機能を表すようなid属性をつけましょう．divブロックごとに見出しが見えることがどうしても嫌なら，CSSを使って（音声では表示されるけれど）画面表示から隠すこともできます．このようにデザインすると，class属性を持ったdivブロックの画面上の配置やプレゼンテーションをCSSで自由に指定すると共に，音声ユーザには見出し要素によるナビゲーションやコンテンツの把握を容易にさせることができます．
<div id="main">
<h1>誰でもウェブ</h1>
<p>.....</p>
<h2>1章：...</h2>
<p>...</p>
</div>
<div id="header">
<h2 class=hidden">ヘッダー</h2>
<div id="search">
<h3 class="hidden">サイト内検索</h3>
<form>....</form>
</div>
<div id="global_navigation">
<h3 class="hidden">グローバルナビゲーション</h3>
<ul class="navi">
<li>ああ</li>
<li>いい</li>
</ul>
</div>
</div>
<div id="footer">
<h2 class=hidden">フッター</h2>
<ul class="navi">
<li><a href="...">連絡先</a></li>
<li><a href="...">ポリシー</a></li>
</ul>
</div>
いくつかのウェブページを調べて，どのような構造があるか見つけてください．見出し要素を使っていないサイトを取り上げるのが良いと思います．たとえば，東女のサイトにはどんな構造があるでしょうか？ その構造をどのようにマークアップするのが正しいのでしょう？
デザイナは，文字のデザインや大きさ，画像と文字のバランスが変わることを嫌って，「画像文字」を使うことがあります．画像文字を使う場合，画像文字に絵で表現されている文字をalt属性で説明することが不可欠です．でも，本当に必要な場合にしか，画像文字を使わないでください．CSSを使いこなせば，そして最新のブラウザで表示すれば，画像文字を使わなくても，かなりのことができるのです．
XHTMLファイルの表示方法をスタイルシートで指定するためには，XHTML文書のhead要素内に外部スタイルシート（下例ではexample.css）の場所を指示します．（スタイルシートの指定方法はこれ以外の方法もありますが，ウェブ標準を最大限に生かすのが下記に示す方法です．）
<head> <link rel="stylesheet" type="text/css" href="http://www.foo.org/example.css"> </head>
外部スタイルシートの場所として，上例のようにURLを用いても良いし，XHTMLファイルからの相対パスを用いても構いません．
クラスとセレクタ
ウェブブラウザが，ウェブページに文字や画像などの要素をレイアウトする際，各要素が入る箱を左上から順番にウェブページに詰め込んでいくと考えてください．この箱（ボックス）は，内容，パディング，枠線，マージンという4つの部分から構成されています．CSSで枠線(border)に色を付けると，枠線が表示されます．内容と枠線の間の隙間がパディング(padding)です．枠線は箱の中に入っていますが，箱と枠線の隙間がマージン(margin)です．
もしmarginもpaddingも0にすると，隣り合った内容がぴったりくっついて表示されます．また，p要素に左マージンを取ると，少し下がって（段落全体がインデントされて）表示されるようになります．
この教材のh2見出しとh3見出しは，このボックスモデルを使って以下のようにCSSで見栄えを指定しています．
h2 {
color: #003300; /* 文字色：薄い緑系の色 */
background: #FFFFCC; /* 背景色 ：レモンイエロー系の色 */
padding: 5pt; /* パディング（4方向とも同じ値を使う） */
border-top: thin solid #003333; /* 枠線の上側：細い実線で，色は#003333 */
border-bottom: thin none #003333; /* 枠線の下側：線を描写しない */
border-left: thick solid #006633; /* 枠線の左側：太い実線で，色は#006633 */
}
h3 {
color: black; /* 文字色：黒 */
background: #FFFFFF; /* 背景色：白 */
padding: 2pt; /* パディング */
margin-right: 100pt; /* 右側のマージンは100pt */
border-bottom: medium dashed #006600; /* 枠線の下側：中太の波線，色は#006600 */
}
枠線はdefaultでは見えないけれど，CSSで borderを指定すると表示されるようになり，パディングやマージンを調整することで，いろいろアレンジできることがわかったでしょうか．
JavaScriptについて今まで全く説明してきませんでした．JavaScriptは，AjaxなどのWeb 2.0でよく使われる技術で，ウェブにダイナミックなインターラクションを与えます．上手に使えばユーザビリティが向上するけれども，下手に使えば使いにくいサイトになります．そして，いずれにしても（上手に使ったとしても）アクセシビリティを大きく損なうことが多い技術です．従って，JavAscriptを使うときは，ユーザビリティとアクセシビリティに対する配慮が重要です．
JavaScriptの例として，マウスをかざすと大きくなるリンクを作ってみましょう．
どんなに凝ったデザインのサイトでも，使いにくければユーザは利用してくれません．そのサイトが使いやすいかどうかは，ユーザの立場に立って考えなければわからないのです．つまり，「ユーザ中心の設計思想（Ucer Centered Design）」に立って，「ユーザビリティ（使いやすさ）」を考えることが重要です．高齢者や障害者をユーザとして考えると，ユーザビリティは必然的に「アクセシビリティ」につながっていきます．ウェブは新しいメディアなので，正しい作り方のルールが定まらないうちに普及してしまいました．今こそ，「ウェブサイトを正しく作る」ことが重要です．
ISO 9241では，ユーザビリティを「特定のコンテキストにおいて，特定のユーザによって，ある製品が，特定の目標を達成するために用いられる際の，効果・効率・ユーザの満足度の度合い」と定義しています．つまりユーザビリティには，3つの下位概念があるわけです．
また，ヤコブ・ニールセンは，「ユーザビリティの特性」として5点を上げています．
ISOでは，ウェブのユーザビリティを取り扱う規格（ガイドライン）として，ISO/DIS 9241-151 "Ergonomics of human-system interaction -Part 151: Guideance on World Wide Web user interface"を策定中です．
サイトのユーザビリティを評価する方法はいろいろありますが，「標準 ウェブユーザビリティ辞典」（ソシオメディア編著，インプレス発行）の前半「基準編」では，ウェブ・ユーザビリティに必須の基準を100取り上げ，この100の基準を満たしているかどうかをチェックするだけで，サイトのユーザビリティを評価できるようにしています．これ以外の評価手法については，後で詳しく述べます．
基準編では，5分野に分かれた100個のユーザビリティ原則が上げられています．原則ごとに詳しい説明があるので，自分で学ぶことができます．たとえば，原則ごとに3段階あるいは5段階評価をして，分野ごとの得点を合計すれば，色々なサイトのユーザビリティを定量的に評価・比較することができます．また，足りないところがはっきりするはずです．
ユーザビリティとユニバーサルデザインの関係
アクセシビリティとの関係．ウェブのアクセシビリティについては，後で詳しく説明．
楽しいユーザ体験とは何か，その重要性．
この授業では，最後に数ページ以上で構成されたウェブサイトを各自で作成してもらい，それを評価の対象とします．どんなサイトを作るのかを考え，コンテンツを集める作業を始めておいてください．
「標準 ウェブユーザビリティ辞典」（ソシオメディア編著，インプレス発行）の後半「プロセス編」では，ユーザビリティが高いサイトを作る上で欠かせない工程を，定義フェイズ，構造フェイズ，実装フェイズ，評価フェイズに分けて詳しく説明しています．以下，この本の後半を簡単にまとめておきますが，詳細はこの本を参考にしてください．
参考：2004年度の渡辺ゼミ3年次演習では，この本を元に「コミュニケーション学科サイト・リニューアル・プロジェクト」に取り組み，今の学科サイトを構築しました．
最終課題で，下記に書いたようなことを全てこなすのは無理だろうと思います．でも，出来る範囲でよいから，下記のようなことを考えて，実践して，最終課題のサイトを構築してみてください．
『Webアクセシビリティ～ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践～』（毎日コミュニケーションズ）が，ここに書いてあることを詳しく解説しています．本章では，この本の第1章「Webアクセシビリティを理解する」から，要点だけを取り上げます．第1章はウェブで公開しているので，皆さんも是非読んでみてください．
ウェブのアクセシビリティを向上させるためには，どこに気をつければよいのでしょうか？ ウェブの制作者だけに責任があるのでしょうか？ それを考えるためにまず，ウェブアクセシビリティを構成する要素をまとめます．
