ユニバーサル・ウェブ
誰もが使いやすい，標準準拠のウェブを簡単に構築する方法

はじめに

このページでは，東京女子大学の学生への教材の形を借りて，誰もが使いやすい，ウェブの標準仕様に準拠したウェブサイトを，できるだけ簡単に構築する方法を解説します．具体的には，以下4つのポイントを押さえたウェブサイトを構築する方法を解説しようと目論んでいます．

ウェブの標準仕様：

コンテンツのアーキテクチャを検討し，コンテンツのデータ構造をXHTMLでマークアップし，コンテンツのプレゼンテーション（見せ方）をCSSで指定する．さらに，インターラクション（ユーザーが利用する際のページの振る舞い）をJavaScriptで提供する．

開発プロセス：

数ページ以上で構成されるウェブサイトを構築しようと思ったら，行き当たりばったりでは駄目です．企画，設計，制作・開発，検証，保守・運用という各段階をきちんと検討する必要があります．XHTMLページを作る前に情報を収集してそのアーキテクチャを検討することによって，その情報をどのようなページに分類し，どのようにXHTMLでマークアップすればよいかわかります．ポンチ絵でデザインして検討した上でCSSを使ってプレゼンテーション（見せ方）を考えることで，サイト全体の統一感が生まれます．制作したページを評価ツールでなどの方法でチェック（評価）することで，文法の間違いを始めとするエラーをつぶすことができます．

ユーザビリティ：

設計段階がしっかりしていれば，利用者のニーズを反映できます．利用者のナビゲーションを考えて制作すれば，さらに使いやすくなるでしょう．このようにして，ユーザビリティ（使い勝手）がよく，使って楽しいサイトを構築できるようになります．また，ここで述べた3つのポイントを押さえることで，高齢者や障害者などの多様な利用者や，モバイル利用などの多様な利用環境においても使いやすくなります．

簡単：

XHTMLやCSSの詳しい知識をウェブ作成者が持っていなくても，賢いオーサリングツールが補助してくれる．（ただし，後述するように，初心者レベルを超えるためには，基本的なことを色々知っておく必要があります．それについても，この教材で説明します．）また，ナビゲーション用のメニュー，目次，レイアウト（ヘッダー，メインコンテンツ，左右ペイン，フッターなどの配置）も，典型的な(X)HTML及びCSSのコードやJavaScriptのライブラリを用いることで，専門的な知識がなくても使えます．

ユニバーサル・ウェブ

インターネットの普及とウェブの力

IT時代といわれる今日，コンピュータやインターネットなどの情報通信技術がますます我々の生活に浸透してきています．総務省の「平成16年 通信利用動向調査」によると，平成16年末には，世帯の8割がインターネットを利用し，利用者数は8千万人にのぼっています．

ウェブ (World Wide Web)は，CERN（欧州原子核研究機構）の研究者Tim Berners-Leeが考え出した仕組みです．CERNは国際的な共同研究施設なので，世界中から研究者がやってきます．しかし彼らは実験が終わるとそれぞれの所属組織に帰ってしまいます．というわけでCERNには，世界中の国からやってくる様々な研究者が作ったデータがあちこちに散在しているものの，それを再利用することは難しい状態でした．そこでインターネット上に散在しているデータを再利用する仕組みとしてウェブが作られました．ウェブではハイパーリンクという仕組みを使って他のデータを指し示すことができます．また文字データのみならず，画像や音などの様々な形式のデータをウェブブラウザで表示できるようになっていました．

ウェブにある情報（文章，画像，動画など）は電子データの形でサーバに置かれており，ネットワークにつながった世界中のコンピュータでその情報を利用できます．ウェブにある情報を利用するのは人間だけではなく，コンピュータが利用することもあります．皆さんがよく使うGoogleなどの検索エンジンは，検索プログラムがウェブ上にあるデータを検索して，人間に結果を教えてくれます．ウェブは，電子メールと並んで多いインターネットの利用形態です．ウェブを利用して新聞や天気予報や地図や電車の乗り換え情報を見たり，オンラインショッピングをしたりすることもできます．今や電子メールでさえ，ウェブで利用することもできるようになっています．ブログ，SNS (Social Network Service)，Ajaxなど，Web 2.0時代を迎え，ウェブは，ますます頻繁に使われるインターネット・アプリケーションになっていくでしょう．

ウェブはサイバー世界とも言われます．サイバー世界では，利用者に合わせて情報を自由に変身させることができます．皆さんが使っているウェブブラウザで「Ctrl」キーと「＋」キーを同時に押してみてください．文字が大きくなりませんか？「Ctrl」＋「－」を押すとどうなりますか？ このとき，画像も文字と同じように拡大・縮小するブラウザもあります．スクリーンリーダと呼ばれる読み上げソフトを使えば，ウェブページにあるデータを合成音声で読み上げさせることもできます．その際，リンクは女性の声で読んだり，見出しの間をスキップしたり，画像の代わりにその説明を読んだりすることもできます．このようにウェブ上のデータは，利用者に応じて変幻自在に変身できるのです．

今度は，ウェブブラウザのウィンドウ幅を変えてみてください．ウェブサイトによっては，ウィンドウ幅に応じてコンテンツの幅が狭くなったり広くなったりする物があります．でも，ウィンドウを広くしてもコンテンツ自体の幅は広がらないサイトや，ウィンドウを狭くしてもコンテンツの幅が変わらないので横にスクロールしないと使えなくなるサイトもあると思います．ウィンドウ幅に応じてコンテンツ幅が変わるサイトと変わらないサイトでは何が違うのでしょうか？ 皆さんはどちらの方が使いやすいですか？ 携帯やPDAではどちらが使いやすいと思いますか？ この授業で学ぶことをきちんと考慮すれば，ウィンドウ幅に応じてコンテンツ幅が変化するサイトを作ることもできるようになりますよ．

日本政府は，2005年2月に「IT政策パッケージ2005」として，ITの利用・活用をいっそう促進し，ITがもたらす問題点を克服することをあげています．IT政策パッケージには，電子政府や電子自治体の推進が取り上げられているので，今後，行政情報がインターネットで提供されるだけでなく，電子申請などのサービスがオンラインで行われることが見込まれます．そして，電子政府のこうしたサービスはウェブで行われるでしょう．行政情報はウェブで提供され，電子申請もウェブページから利用することになると思われます．

ユニバーサル・ウェブの重要性

新聞などで盛んに報道されているように，日本は前例のない高齢化社会に突入しつつあり，2015年には4人に1人以上が高齢者(65歳以上)になると予想されています．高齢になると，認知能力や身体能力が衰えてきます．また，視覚障害などの身体障害を生じる割合も増えます．このような社会で電子政府を推進するためには，高齢者を含む誰もが簡単にウェブを使える（ユニバーサルなウェブ利用ができる）ようにしておく必要があります．

ウェブの便宜を受けるのは健常者だけではありません．障害者のほうが，ウェブをはじめとするICT技術による貢献を受けているかもしれません．ウェブを使えれば，外出できなくても最新ニュースを読めますし，買い物もできます．電子メールで友人と手紙をやりとりすることもできます．逆に，画面が見えないなどの理由でウェブを利用することができないなら，そうした利用者はウェブの利便性を受けることができず，電子政府のサービスからも取り残されてしまいます．

2011年3月11日，東北と東日本は未曾有の大地震に見舞われ，多くの方々が命を落としました．地震と津波による影響の他，安全に停止できなかった原発がまき散らす放射性物質などが大きな問題となっています．このような大震災において，高齢者や障害者を含む全ての人々が，避難や生活に必要な情報を迅速に受け取ることの重要性が改めてクローズアップされています．紙の資料をスキャンしただけのPDFは，視覚を使えない人には読めません．計画停電の画像も同じです．地域のスピーカーで津波が来ることをアナウンスしても，避難先の体育館で食事の用意ができたことを拡声器でアナウンスしても，聴覚を使えない人にはその情報は伝わりません．このような災害時にはパソコンは不向きで，携帯電話やスマートフォンのようなモバイルデバイスで情報を取得したり発信したりすることが有用であることもわかりました．また，誰かがウェブにアクセシブル（マシン・リーダブル）な形で情報を載せれば，善意と技術がある第三者がその情報を加工して，他の情報やサービスと合わせて，全てのユーザに有用な情報を公開できることもわかりました．TwitterやUstreamなどの新しいサービスによって多くの情報が流れ，情報リテラシーを持っていれば情報の信頼性が見分けられるので，自分が必要としている情報をそこから見つけられることもわかりました．アクセシブルなウェブが当たり前の社会になっていれば，このような非常時に必要な情報が手に入るのです．

私がこのウェブページ「簡単ユニバーサル・ウェブ」を書いたのは，高齢者や障害者を含む，誰もが簡単に利用できるわかりやすい（別の表現をすれば利用者に優しい，あるいはユーザビリティが高い，さらにアクセシビリティにも配慮している）ウェブサイトを構築する方法を，ウェブの初心者にもわかるように示したかったからです．しかも，ウェブに関する知識をできるだけ要求せずに，ウェブの標準に準拠したユニバーサルなウェブサイトを簡単に作る方法を示したいと思っています．（ユーザビリティとは使いやすさのことです．アクセシビリティとは，障害のあるなしなどの個人の状態に関わらず，誰でもが利用できるようにすることです．）

使いにくいWebの例

まだ何も学んでいない段階ですが，下記課題をやってみてください．この授業の後半で，もう一度同じ課題に取り組むと，自分の知識や理解が深まっていることが分かると思います．

課題：使いやすいWebと使いにくいWebを探す

皆さんが普段使うサイトで，「使いにくい」サイトはないですか？ 何が原因で使いにくいのでしょう？ 使いやすいサイトと使いにくいサイトをいくつか取り上げて、その理由を考えてみてください．本ページの「ウェブのユーザビリティ」を読んだり，『標準 ウェブユーザビリティ辞典』を参考にしたりすることをお薦めします．

使いやすいと思うサイトと使いにくいと思うサイトに対して皆さんが気づいた点を，「ISO 9241-151 ウェブのユーザビリティ」と比較してみてください．ほぼ一致していることに気づくと思います．最終課題でサイトを構築するとき，何に気をつければよいのか，これでわかりましたよね．（気づいていてもそれを実現するのは簡単ではないけれどね．）

デモ：視覚障害者のWeb利用

全盲の視覚障害者のWeb利用のデモとして，「NVDA（NonVisual Desktop Access）日本語版」というスクリーンリーダを使ってFirefoxというブラウザを音声で利用してみます．（Sourceforgeの「スクリーンリーダNVDA日本語化プロジェクト」からNVDA日本語版をダウンロードできます．）このデモでは，見た目は同じでも音声でも使えるサイトと使いにくいサイト，あるいは全く使えないサイトがあることをお見せします．

今日，デモしたサイトでは，見た目は似ているのに，音声表示で聞くと，ユーザビリティやアクセシビリティが全く違うサイトがあることに気付いたと思います．また，アクセシビリティに配慮したページは，ユーザビリティも高いことが多いです．Web標準に準拠し，少し配慮するだけで，ユーザビリティもアクセシビリティも高いサイトを制作できます．

Web標準，(X)HTML，CSS

ここでは，誰もが使いやすいウェブを作る際に重要なキーワードとなる「Web標準」，そしてそれに付随する技術である(X)HTMLとCSS2について簡単に説明します．

ウェブ標準

ウェブ標準とは，W3Cが策定した技術仕様に則ってサイトを作成（コーディング）することを言います．

• コンテンツの構造を(X)HTMLでマークアップし，そのデータの意味(semantics)をh1やtableなどのタグで示す．
• コンテンツの表現（どのように表示するか）はCSSで指定する．
• （コンテンツのインターラクションはJavaScriptで与える．）

今の時代のウェブサイトは，このウェブ標準に則って作成することが求められているし，クールな方法です．しかし，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定することをせずに，マークアップでデータの見せ方まで指定してしまっているウェブサイトが多いです．また，そのような間違った教え方をする人もたくさんいらっしゃいます．

(X)HTML

ウェブは，HTTP（HyperText Transfer Protocol）という手順に従って，ウェブブラウザ（User Agent）とウェブサーバがデータをやりとりします．やりとりされるデータは，HTML (HyperText Markup Language)又は XHTML (eXtensible HTML) という文法に則って記述されています．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要素をどう表現するかはスタイルシートで設定することができます．）

HTMLとワープロの違い

では図1を例にとって，この「マークアップ」の重要性と，それがいかに誤解されて又無視されているかについて述べます．

図1a)は，この一群のデータが箇条書きのリストであることを，箇条書きリストのタグ<ul>とリストの各要素を示すタグ<li>を使って示しています．

ワープロはこれとはまったく違います．図1b)に示すように，ワープロの場合は，中点で始まる文章を少し字下げして並べることで視覚的に箇条書きリストを表現しています．（Wordはもう少し賢いので，Wordのスタイルを適切に使えば，意味をある程度表すこともできます．）

図1 HTMLとワープロの違い（注：左図の要素名は小文字で書くのが正しいです）

ウェブブラウザは図1a)のようなHTMLを元に，画面には図1b)のように表示します．ウェブブラウザが表示するHTMLページとワープロの画面は非常に似ていますが，HTMLに書かれているのはデータとその意味だけで，それをどういう風に視覚的にレイアウトして表示するかはウェブブラウザに任されています．ですから音声表示専用のウェブブラウザは，耳で聞いたときに分かりやすいように箇条書きを表示することが可能です．（例えば，「リスト2項目．1番目の要素．2番目の要素．リスト終了」）

HTMLとワープロの違いをわかっていただけましたか? ワープロは文字をレイアウトすることで視覚的にデータの意味を暗示しています．HTMLではデータをマークアップすることで，明示的にデータの意味を表現できます．そしてそのデータをどう表現するかはスタイルシートとウェブブラウザーに任されているのです．ところが世の中には，このことを無視してHTMLのタグを使ってレイアウトしてしまっているウェブページが未だ多いのです．

構造化の例

ウェブでは，(X)HTMLのマークアップによって，下記のような構造を表すことができます．

見出し：

卒論でいえば，h1要素が題目，h2要素が章，h3要素が節，h4要素が項に相当します．見出し要素を使うことで，長いページを意味のあるまとまりで階層的（章，節，項）に区切り，その内容の「見出し」をつけることができます．きちんと見出しが付いた文章は，晴眼者にとっても読みやすいと思います．見出しは大きな文字で表示されることが多いので，ページをざっと眺めるだけで，どこに何が書いてあるのかがつかめるし，目的の箇所に移動するのも簡単です．

後で説明する，FirefoxのHeadingsMapを使えば，任意の見出しに簡単にジャンプできるようになります．この教材には，ページの最初に目次が付いています．あれは，見出し要素を拾い出して自動的に生成したものです．でも，HeadingsMapのような機能がブラウザにあれば，目次を作らなくても，簡単にジャンプできるようになります．視覚障害者用のブラウザには，見出し間を簡単にジャンプする機能が付いていて，長いページの中から目的の箇所に移動したり，ページの概要を把握するのを容易にしています．

ページに見出しをマークアップすることで，あるサイトでは，晴眼者・視覚障害者とも，最大2倍早く情報を見つけることができることや，その効果が視覚障害者に対してより大きいことが分かっています．（T. Watanabe, "Experimental Evaluation of Usability and Accessibility of Heading Elements", W4A, (2007)）

表（テーブル）：

表は，2次元のデータの関係を表しています．画面で見れば縦横の関係がすぐ分かりますが，音声で聞くと，どの行のどの列かがわかりません．しかしtable要素でマークアップすれば，視覚障害者用の音声ブラウザは，どの行のどの列かも教えてくれるので，視覚障害者にも理解しやすくなります．さらに表の見出しをth要素でマークアップすれば，（現代文化学部の）教員数が42であることがわかるように読み上げることもできます．

東京女子大学の学部構成

学部名	学科数	教員数（名）	学生数（名）
文理学部	7	93	2460
現代文化学部	3	42	1100

リスト：

箇条書き，順序付きリスト，定義リスト（ここで使っているのがこれ）は，それぞれ，ul要素，ol要素．dl要素でマークアップできます．適切な要素でマークアップすることで，お互いの関係がユーザーにわかりやすくなります．

CSS

(X)HTMLと並んで重要なのが CSS (Cascading Style Sheets)です．ウェブでは，データの見栄え（見せ方，表示方法，プレゼンテーション）は，(X)HTMLではなくてCSSなどのスタイル言語を用いて指定します．つまり，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定するのが，ウェブページの正しい（つまり，ウェブの標準に従った）作成方法です．

CSS2（Cascading Style Sheets, level 2）では，画面，印刷，スライド，音声といった表示メディアごとに表示スタイルを指定できます．この仕組みを使うと，ウェブページを画面で見るときはゴシックフォントで表示し，印刷して読むときは新聞などで使われている明朝体フォントで表示し，音声で表示するときは本文は一郎君の声でリンク部分は花子さんの声で読み上げるというように，表示メディアに適した表示スタイルを使い分けることができます．しかもCSS2では，ウェブページの製作者が指定した表示スタイルを置き換える形でユーザが指定した表示スタイルを使うことができます．たとえば弱視のユーザならば，フォントサイズを大きくしたり色のコントラストを明確にしたりした自分専用のスタイルシートを使って，ウェブを見ることができます．

［CSSの力］：スタイルシートを切り替えて表示を変える例

コミュニケーション学科サイトの画面右上にある文字サイズ切り替えボタン：

「文字を大きく」というリンクを切り替えると，スタイルシートが切り替わり，大きな文字で表示されるようになります．

ある研究会用に作成した発表資料 「ウェブ・アクセシビリティ向上の要件」：

このページの「表示切り替え」ボタンを押すか，アクセスキー+D とすると，プレゼンテーションを決めているスタイルシートがはずされて，素のテキスト表示になります．書いてある内容は同じなのに，スタイルシートのあるなしで，これだけ見栄えが異なることに驚くでしょう．

CSS Zen Garden：

非常に有名なサイトです．同じコンテンツなのに，CSSを切り替えることでクールなデザインに生まれ変わることに驚くと思います．

代替スタイルシートの利用：

この教材には，3種類の代替スタイルシートを用意してあります．Firefoxならば，「表示」メニューの下の「スタイルシート」を選択してください．すると，「Default」，「Large font」，「Small font」．「Simple style」の4つのスタイルシートがあって，今は「Default」を使っていることが分かると思います．試しに，他のスタイルシートを選んでみてください．コンテンツは全く同じなのに，文字が大きくなったり小さくなったり，シンプルなデザインになったりすることが分かると思います．

表示メディアごとにスタイルを変える例：

このページには，印刷用のスタイルシートを用意しました．画面表示と印刷がどう違うか確認してみてください．

画面幅によってスタイルシートを切り替える例

「ウェブアクセシビリティ基盤委員会」：スマートフォンなど画面幅が小さいブラウザで閲覧するときに横スクロールが発生しないように，ページ内のコンテンツの配置を並び替えてくれます．

(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ページに下記の記述があったら，「ここは大事」だけが赤色で表示されます．（CSSのセレクタ名を"red"としているのは本当はよい例ではありません．なぜならredは視覚的な表現に直結しているから．でもここでは，わかりやすさを優先させます．）

<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>
　
<!-- 上記ul要素の直後で回り込みを解除しておく -->
<p style="clear: left;"> </p>

どうです．CSSを使いこなせばいろいろなことができるのがわかるでしょう!

HTMLの要素でレイアウトしてしまう間違い

ウェブ標準を無視して，あるいは無知なために，HTMLの要素でレイアウトしてしまう間違いを2例挙げます．

太文字にするためにstrong要素を使う間違い

strongは強調表示するための要素です．ほとんどのウェブブラウザはこの要素を太文字で表示しますが，太文字で表示するための要素ではありません．太文字を使いたいならば，CSS（スタイルシート）で，font-weight:bold;のように指定すべきです．

画面上にきれいにレイアウトしたいためにtable要素を使う間違い

下例に示すようにtableは表を作るための要素です．表では，縦方向や横方向に並んでいるデータにはお互いに関係があります．下記の例ならば，左側一列に並んでいるデータはコンピュータに関するデータで，右側の列は人間に関するデータです．横方向に見ても，各行ごとに両者で対照的な性質が書いてあります．

table要素を使うときれいに縦横にレイアウトできるので，table要素をレイアウトのためだけに用いているケースが多いです．たとえば，下図2のように，ページ上端に広告記事，左端に今日の天気と株価の表示，右上端に本文，右下端にその他の記事が表示されているようなニュースサイトは，table要素で簡単に実現できます．

<table width="200" border="1" cellpadding="5" cellspacing="5 rules="none">
  <tr>
    <td colspan="2" class="LT_ad" style="width:50; background-color:#EEEEEE;">広告記事</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; background-color:#EEEEEE;">その他の記事</td>
  </tr>
</table>

でも，このページでは，左と右の同じ高さに並んでいる情報には何の関連もありません．これらの情報はレイアウト上同じ高さに来ているだけです．このようなページを音声表示すると，古い（テーブル要素に対応していない）音声ブラウザは，たまたま同じ高さに並んでいる情報を続けて読み上げるので，音声で聞いている視覚障害者にはちんぷんかんぷんなことになってしまいかねません．このような音声ブラウザでレイアウトテーブルを読み上げるとどうなるかという例を図3に示します．

図3 table要素の誤用

ただし，音声ブラウザがテーブルをどういう順番で読み上げるかに配慮し，また，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;
}


ul.LTnavi {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

ul.LTnavi li {
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #AAAAAA;
    background-color: #EEEEEE;
}

図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に従ってウェブページを作成するのが望ましい書き方です．（2010年度からHTML5が急速に影響力を増していますが，W3Cの正式な仕様には未だなっていませんので，この授業ではHTML5は取り上げません．）

残念ながら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を分離したウェブページを作成する方法

今まで見た例でわかるかもしれませんが，XHTMLとCSSを別々のファイルで編集するのは，結構大変です．XHTMLファイルを書くときは，CSSファイルにどのようなスタイル要素があるのか知っておく必要があります．見栄えを変更したくなったら，CSSファイルを編集しなければなりません．それに，XHTMLやCSSの文法を知らなければ，このようなソースコードを書くことができません．このような作業を簡単にしてくれるのが，オーサリングツールです．以下にオーサリングツールを4つ紹介します．

Adobe Dreamweaver

プロ用のオーサリングツール．Web標準に準拠したサイト作成ができる．ウェブサイト作成を大幅に楽にしてくれる有用な機能が満載．基本的な使い方を取得するのは難しくないし，エデュケーション版は値段も高くない (2万円弱)．Windows版とMac OS X版がある．

Microsoft Expression Web

プロ用のオーサリングツール．Web標準に準拠したサイト作成ができる．アクセシビリティやクロスブラウザ対応を支援するWeb標準サポート機能も搭載している．アカデミック版は2,800円（税別）と安いので，学生の皆様にお勧め．Windows版しかない．

BlueGriffon

無料ソフト．（2006年度のCompIIEの授業で使用していたNvu，2010年度まで使用していたKompozerの後継版とも言えるソフト．）WindowsでもMac OS XでもUbuntu Linuxでも利用できる．ソースを書く作業が不要になるようにデザインされているので，(X)HTMLやCSSの細かな文法を覚えていなくても，ウェブ標準に即したページを作成できる．HTML5への対応も進んでいてSVGエディタも附属している．2011年5月10日にバージョン1.0が公開され，日本語メニューも選べるようになりました．（この授業では初級編で使用．）

Aptana Studio

無料ソフト．Ajaxなサイト（つまり，JavaScript）を作成するための統合開発環境としてスタートしたが，現在は多種多様な機能を持っている．もちろん，(X)HTMLやCSSを書くこともできる．BlueGriffonとは違い，ソースを書く機能に最適化されている．本家は英語だが，メニューなどは日本語できる．

上記のうち，DreamweaverとMcrosoft Expression WebとBlueGriffonは，作者にXHTMLやCSSの知識がなくても，WYSIWYG（What You See Is What You Get）なGUIエディタでウェブサイトを構築できます．DreamweaverとMcrosoft Expression WebとAptanaは，自分で（XHTMLやCSSの）ソースコードを直接書いてサイトを作成できます．今回はBlueGriffonを使いますが，後述するようにBlueGriffonにはサイト作成の限界があるので，中級編以上のレベルでウェブ標準を勉強したい場合は，DreamweaverかMcrosoft Expression Web（あるいはAptana）等を使って，ソースコードを自分で書いてみることも大事だと思います．

BlueGriffonのインストールと初期設定

自分のWindowsパソコンやMacパソコンでBlueGriffonを使うときには，下記手順でインストールしてください．東女の情報処理教室のMac OS XにはBlueGriffon本体（v1.0）がインストール済みです．

1. BlueGriffonの公式ダウンロードページから，Windows用あるいはMac OS X用のインストーラをダウンロードする（2011年6月10日の最新版はv1.1.1）
2. BlueGriffonの初期設定を変更します：Windowsの場合は，BlueGriffonの「Tools（ツール）」メニューから「Preferences（オプション）」を選ぶ．次に，「Advanced（詳細）」メニューの「Blue Griffon's user interface」の「Use installed locale（インストール済みの言語を使用する）:」から「Japanese（ja，日本語）」を選び，「Use language（この言語を使用する）」ボタンを押す．するとBlueGriffonが自動的に再起動してメニューなどが日本語になる．（Mac OS Xの場合は，「BlueGriffon」メニューの「Preferences」から設定すればよい．以下同じ）
3. 先ほどと同じ要領で「ツール」メニューの「オプション」から「文書（Documents）」タブをクリックして，「著者名：（Author's Name：）」に自分の名前を入れる．最後に「閉じる（Close）」ボタンを押して設定終了．
4. 次に新規ファイルを作成します．まず，「ファイル（File）」メニューから「新規文書ウィザード（New Document Wizard）」を選ぶ．
   1. 「文書の種類（Document type）」の設定で，「言語（Language）」をXHTML1，「文書のタイプ（Document Type）」をstrictにしたら「次へ（Next） >」をクリック．
   2. 「文書のプロパティ（General document properties）」でウェブページの「タイトル（Title）」欄を書く．今は練習なので「BlueGriffon使い初め」にする．「言語（Language）」の欄は「ja」にする（言語を選択の一覧から選んでも良い）．「文字セット（Character set）」は「Unicode（UTF-8）」にする．他は空欄でよい．「次へ（Next） >」をクリック．
   3. 今回は「色と背景（Colors and backgrounds）」はスキップして「次へ（Next） >」をクリック．
   4. 今回は「文書の背景（Document background）」もスキップして「次へ（Next） >」をクリック．
   5. 今回は「ページレイアウト（Page layouts）」の「CSSレイアウトをパターンから選択する（Apply a predefined CSS layout）」のチェックボタンを外す．「完了（Finish）」をクリックして完了．新規ページの編集画面に変ります．

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"  />
    <title>BlueGriffon使い初め</title>
    <meta name="author" content="Takayuki Watanabe" />
    <meta name="generator" content="BlueGriffon wysiwyg editor" />
 </head>
 <body>
   <br />
 </body>
</html>

BlueGriffonの解説

（2011年5月時点で）BlueGriffonの日本語の解説はありません．SourceforgeにBlueGriffon日本語版の開発プロジェクトがあるのですが，停滞しているようです．（探した中では，「フリーのＨＴＭＬ５エディタBlueGriffonの使い方１－基本編集」が少しは使えるかも．）

でも，BlueGriffonは，NvuやKompozerの親類と言っても良いソフトなので，Kompozerの情報が役に立つ場合もあります．「KompoZer(Nvu)マニュアル」はKompozerの公式なサイトではありませんが，チュートリアルなどが書いてあります．まずは，このマニュアルの「ユーザーインターフェイスの説明」を見てください．編集ツールバー，書式ツールバー，タブブラウザツールバーについて簡単に説明してあります．

BlueGriffonによる簡単なウェブページ作成

ファイル構成

（実際にウェブ公開する場合は他のフォルダに作成する必要がありますが，）以下の例では，作業を簡単にするために，（Macの）書類フォルダの下に「CompIIE」（大文字のI，大文字I，大文字E）フォルダーを作って，その下に各種ファイル（HTML，CSS，jpeg画像など）を配置します．フォルダーの階層構造やファイルの適切な配置を理解してもらいたいので，まずは演習をします．:-）

簡単な演習：ファイル構造（ディレクトリ，ファイル，絶対パス，相対パス）

BlueGriffonによる簡単なウェブページ作成（HTML編）

習うより慣れろ．まずはBlueGriffonを使って簡単なウェブページを作ってみましょう．（万が一の時に編集中のファイルが失われるのを避けるために，作業中はこまめにファイルを保存すること．）

トップページを新規作成

「ファイル」メニューの「新規作成ウィザード」を選択する．一度設定してあるので，XHTML1とstrictがチェックされているはず．タイトルにそのページの内容を表す言葉（日本語が使える）を書く．

注：タイトルはウェブページのtitle要素に使われるもので，ウェブページを表示したときのウィンドウタイトルやブックマーク保存時の見出しに使われる．だからページの内容を簡潔に表すタイトルにし，複数のウェブページで同じタイトルにしないこと．（『Web標準XHTML+CSSデザイン』の「法則13 (X)HTML文書には内容が伝わりやすいタイトルを設定する」参照）

言語はjaにする．説明やキーワードは，必要ならば適切な言葉を書く．文字セットはUTF-8のまま．「色と背景」では何もチェックしない．「文書の背景」はスキップ．「ページレイアウト」では「CSSレイアウトをパターンから選択する」のチェックを外す．「完了」ボタンを押すとページ作成状態になる．

トップページを保存

編集メニューの「名前を付けて保存」をクリックすると，保存場所を聞かれる．今回は書類フォルダーの下に「CompIIE」フォルダを作って，その下にindex.htmlという名前で保存する．デフォルトの拡張子はxhtとなっているが，この授業ではいちいちhtmlに書き直すことにする．

（注：ファイル名は半角の英数字と一部の記号だけにして日本語を使わないこと．タイトルとファイル名は全く違う物である．両者は異なっていても構わない．）

H1見出し作成

ページには見出しが必要．もっとも大きな見出しがH1要素で，ひとつのウェブページに一つ，しかもページの先頭にあることが望ましい．私は，H1要素とtitle要素の中身を同じにしています．卒論でいうと，題目に相当します．

H1要素を作るには，まず文字を書き，それを全部選択してから，編集ツールバー1行目左端のドロップダウンメニュー(注2)から「見出し1」を選択する．（BlueGriffon画面下から2行目に，編集中の文字の要素名（今の場合は<body> <h1>）と表示されているはず．又は，「表示」メニューの「All Tagsモード」にチェックを入れると編集中の文字のすぐ横に黄色で要素名を表示してくれる．）

H2見出し作成

見出しにはH1からH6までのレベルがあります．ページの構造として美しいのは，一つのH1見出しの下に，H2，H3が順番に続くことです．H2レベル以下の見出しは複数あっても構いません．卒論で言うと，章がH2で，節がH3で，項がH4でしょう．（私はH5以下の見出しは滅多に使いません．)

何か文字を入力してから，編集ツールバー1行目左端のドロップダウンメニューから「見出し2」を選ぶ．

文章入力

通常の文章は段落（p）要素で囲むこと．（H2見出しなどの後など，）最初のp要素を作るためには，編集ツールバーのドロップダウンリストから「段落」を選ぶ必要があるが，次の段落要素を始めるには，BlueGriffonではENTERキーを押すだけけでよい．ENTERキーを押すと自動的に新しいp要素が作られ，BlueGriffonで入力した文字は，そのp要素の中に書き込まれれる．（BlueGriffonのAll Tagsモードを用いれば，入力した文字がどの要素になるのか一目瞭然．）

表示方法を変えてみる

BlueGriffonにはページを見る方法（View）が2つあり，BlueGriffon画面下の「wysiwyg」と「source」で切り替えられる．「source」表示にすれば，XHTMLのソースを見ることができる．また，ソースを直接編集することもできる．

ウェブブラウザでプレビュー

ある程度できたら自分が普段使っているブラウザーでどのように見えるかチェックしてみましょう．メニューバー直下のアイコンが並んでいるツールバー右端にある地球のアイコン（ブラウザーでプレビュー）をクリックして，閲覧するブラウザを指定する．

保存

作成中のファイルはこまめに保存するようにしましょう．ファイルメニューには「保存」と「名前を付けて保存」の2種類があり，ツールバーにも「保存」アイコンがあります．ページのタイトルを変更したい場合は．「書式」メニューの「ページのプロパティ」で変更できる．

リストを作る

リスト要素は，順序付きと順序なし（箇条書き）と定義リストの3種類あります．定義リストの話は後回しにして，ここでは番号付きで表示されるol (ordered list)要素と箇条書きになるul (unordered list)要素の作り方を説明します．（注：番号付きリストは，1番目，2番目というように，リストの各項目(li要素)に順番があることを暗示しています．）

基本的にはWordと同じです．まずリスト項目を書いたら改行して，次の項目を書く．全項目を書き終わったら，全項目を選択して，書式ツールバー1行目のアイコン（記号付きリストか番号付きリストのどちらか）を選択する．あるいは，最初の項目を書いた段階で書式ツールバーのアイコン（記号付きリストか番号付きリストのどちらか）を選択して，改行すると自動的に2番目の項目を入力できる状態になる．

後から項目を追加したかったら，改行キーを押せば新しい項目が追加される．改行によって新しい項目が追加されるのを止めるには，書式ツールバーのアイコンをもう一度クリックしてアイコンが選択されていない状態にすればよい．（あるいはEnterキーを空打ちすると消える．）

画像を挿入

まず，画像を用意する．また，画像を挿入する前に作成中のウェブページを保存します．画像の場所は，ローカルにあるファイル（を作成中のファイルと同じフォルダーの中にコピーして，コピー下ファイルを参照して）も良いし，インターネット上のファイル（のURLを指定して）も良いです．ただし，著作権を侵害しないように注意．（ウェブで公開しないならば，私的利用の範囲で使えるかも知れません．）ここでは，「コミュニケーション学科のロゴ」をダウンロードして，作成中のファイルと同じ場所にコピーしたものを挿入してみます．

BlueGriffonの編集ツールバーから「画像を挿入または編集」アイコンを選択すると「画像を挿入」ダイアログボックスが表示されるので，まず，「URLをページに対して相対にする」にチェックを入れる．次に，「画像の場所」に画像ファイルのURLを入力するかローカルファイルを選択します．また，画像ファイルには「代替文字列」(alt属性)を指定する（これを入力しないと「OK」ボタンを押せません．:-）．代替テキストとは，画像が表示されないときに画像の代わりに表示される文字のことで，「コミュニケーション学科のロゴ」のように簡潔に書く必要がある．意味のない装飾画像の場合は，「空の代替文字列を許す」を選択してください．

<img src="deptC-logoChars.png" alt="コミュニケーション学科のロゴ" />

画像要素を段落要素で囲んでおくこと！

<p><img src="deptC-logoChars.png" alt="コミュニケーション学科のロゴ" /><p>

リンクを張ってみる

文字列をリンク要素にしたいときは，文字列を選択してから編集ツールバーの「リンクの挿入または編集」アイコンを選択する．すると，「リンク」ダイアログボックスが現れるので，「対象」にリンク先のURLを入力するかローカルファイルを選択する．

画像にリンクを張りたい場合は，画像をクリックしてから編集ツールバーの「リンクの挿入または編集」マイコンを選択すると，「リンク」ダイアログボックスが表示されるので，「対象」にリンク先URLを入力すればよい．画像リンクを使う場合は，画像に，リンク先がわかるような代替テキストを付与するのを忘れないこと．

表を作ってみる

表の作成も簡単です．「表の挿入，または表の設定を編集」アイコンを選択するとダイアログボックスが表示されるので，マウスでドラッグして表の大きさ（何行何列）を決める．挿入された表が選択された状態でもう一度「表の挿入，または表の設定を編集」アイコンをクリックするか，セルをダブルクリックするか，あるいは各セルで右クリックすると表示されるコンテクストメニューから「表のプロパティ」を選ぶと，セルや表全体の詳細（何行何列，表の枠線の太さなど）も設定できる．

セルには見出しセル（th要素）とデータセル（td要素）があるが，（左端や上端などで）見出しの役割をしているセルは見出しセルに変更する必要がある．セルのコンテクストメニューから「表のプロパティ」を選び，「表を挿入または編集」ダイアログボックスの「セル」タブの一番下の「スタイル」の中の「ヘッダー」にチェックを入れると，そのセルが見出しセルになる．th要素への変更は，「選択」で編集対象を選ぶことにより，セル単位でも行又は列単位でもできる．

セル内のテキストの配置も指定できる．また，マウスで隣りあったセルを複数選択してから右ボタンをクリックして，「セルを結合」とすると，セルが結合される．

表は凝るといろいろ複雑な物を作成できるが，レイアウトテーブルに使わないことをお薦めする．また，レイアウトテーブルでなくても，表の中に別の表を入れるとややこしくなるので，表を使う場合はシンプルにすること．

定義リストを作ってみる

定義リスト(dl要素)は，定義項目(dt要素)と定義内容(dd要素)のペアで構成される．今，皆さんが見ているこのリストも定義リストです．

定義リストの作り方はいろいろな方法があるが，たとえば，最初の定義項目を書いたらそれを選択し，編集ツールバー2行目右側にある「定義のタイトル」と選ぶ．次に，（最初の定義項目がハイライトされているのをはずしてから）最初の定義項目の最後尾にカーソルを移動し，そこでEnterキーを押すと，自動的に定義内容(dd要素)を書き込む場所が作られる．定義内容を書いてからEnterキーを押すと，次の定義項目を書く場所が作られる．あるいは，最初に定義項目と定義内容を書いておいて，編集ツールバーを使って，あとから各行を定義項目にしたり定義内容にしたりすることもできる．（「All Tagモード」で作業すると，要素の左側に要素名が表示されるのでわかりやすい．）

要素にアンカーを打って，ページ内リンクを張ってみる

ページ内の任意の要素にジャンプするようなページ内リンクを張ることもできる．

まず，リンク先の要素にアンカーという固有の名前（目印）を付ける必要がある．次に，そのアンカーを指すようなリンクを張るわけ．アンカーを打つには，リンク先にしたい要素を選択してから編集ツールバーの「アンカーの挿入または編集」アイコンを選択し，わかりやすい名前を付ける（BlueGriffonはこの名前をname属性で使います）．次に，リンク元となる文字列を選択してから「リンクの挿入または編集」アイコンを選択し，「対象」のドロップダウンリストの中から先ほど付けた名前を探して選択する．（名前の前に#が付いているはず．） sourceビューで見ると下記のようになっています．

<a href="#anchor1">アンカーにジャンプ！</a>
......
<p><a name="anchor1">ここにジャンプするよ</a><p>

BlueGriffonを使ってみよう（CSS編）

前章では，見栄えを全く指定しませんでした．今度は見栄えを指定してみましょう．

CSS練習用のXHTMLファイル作成．

以下のCSS練習のために，h1要素とh2要素とp要素があるXHTMLファイルを作っておく．

外部スタイルシートの指定

1. 「挿入」メニューから「スタイルシート」を選択すると，「スタイルシートを挿入又は編集」ダイアログが表示される．
2. 左下の「＋」（スタイルシートを追加）をクリックすると，「スタイルシートのプロパティ」ダイアログが表示される．
3. 「文書からリンクする」と「URLをページ相対にする」をチェック．
4. 「新しいファイルを開く」を選択して，XHTMLファイルと同じ場所にCSSファイルを作成する．ファイル名は任意だが，拡張子はcss（例：nabe.css）．
5. 「OK」を押して「スタイルシートのプロパティ」ダイアログに戻る．
6. 「スタイルシートのプロパティ」ダイアログも閉じる．

作成中の(X)HTML文書にスタイルシートを結びつける方法には複数ありますが，この授業では「外部スタイルシート」をlink要素で読み込む方法を使います．(X)HTML文書中のhead要素内にstyle要素を挿入して指定する「内部スタイルシート」や，(X)HTMLの各要素にstyle属性で指定する「インラインスタイル」は,この授業内では原則として用いません．各方法の詳細は，『現場のプロから学ぶ XHTML+CSS』の「2-3 CSSの適用方法」p59 又は『Web標準XHTML+CSSデザイン』の「法則8 XHTML文書ではCSSやJavaScriptをできるだけ外部ファイル化する」，「法則31-4 CSSの基本的な記述方法を理解する／(X)HTML文書への組み込み方を理解する」参照．

（確認）

XHTMLファイルからCSSにリンクが張られていることを確認するために，BlueGriffonのsourceビューでソースを見てみよう．

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

この一行で外部スタイルシートとXHTMLファイルを関連づけているわけです．

新しいスタイル（見栄えを決めるルール）作成

1. CSSスタイルを設定する前にXHTMLファイルを保存する．
2. スタイルを適用したい要素（今回はh1要素）にカーソルがある状態で「CSSスタイルを設定」アイコンをクリックすると，「スタイルプロパティ」ダイアログが表示される．
3. 「スタイルの適用先：」として「要素名で指定する．．．」を選択．するとその右側に「h1」と薄く表示されるはず．（うまくいかないときは「スタイルプロパティ」を閉じて，h1要素にフォーカスがあるか確認する．）
4. 「スタイルプロパティ」では「一般」，「色」，「大きさ」，「位置とレイアウト」，「枠線」，「影」，．．．など様々なスタイルをGUIで指定できる．
5. 今回は，「一般」で揃えをセンタリング，「色」で前景色を適当な色に変えてみましょう．
6. それ以外に，色々遊んでみて下さい．
7. スタイルの設定をすると，BlueGriffonで編集中のページがリアルタイムで変っていくのがわかると思います．設定が終わったら「スタイルプロパティ」を閉じます．
8. 注：外部スタイルシート（nabe.css）に設定を書き込んでいるので，HTMLファイル（index.html）のsourceを見てもスタイルの設定は書き込まれていません．別のエディタでスタイルシート（nabe.css）の中身を見ると，そこに設定が書き込まれているのがわかります．

BlueGriffonのスタイルの作成には，「この要素のみ（ID指定）」，「クラスで指定する．．．」，「要素名で指定する．．．」，「この要素のみ（インラインスタイル）」の3+1種類があるが，これはスタイルセレクタの種類に相当している．

スタイルセレクタ：

CSSでは，要素ごとに表示スタイルを指定することもできるし，特定のclass属性をもった要素に対して表示スタイルを指定することもできる．BlueGriffonの「スタイルの適用先」でいうと，下記のようになる：

クラスで指定する．．．：

同じ名前のclass属性を持った要素にだけ適用される．前に出した，文字を赤色で表示する例がこれを使っている．

<span class="red" >ここは大事</span>

書式ツールバー2行目左端のドロップダウンリストには，CSSエディタで作成した名前付きスタイルの一覧が表示される．

要素名で指定する．．．：

h1要素とか，p要素とか，ある種類の要素全部に適用される．この教材で言うと，h2要素やh3要素で，これを使っている．

詳細は，『現場のプロから学ぶ XHTML+CSS』の「2-4 セレクタ」p62 又は『Web標準XHTML+CSSデザイン』の「法則35 セレクタと疑似クラスを使いこなして効率的なCSSを記述する」参照．複雑な指定のセレクタもできることがわかると思う．

H2見出しの色を変えてみる

h2見出し全部の見栄えを変更したいので，「要素名で指定する．．．」を用いる．要領はh1見出しのスタイルを指定したときと全く同じ．今回は，「一般」で「太さ」を「太字」に，「色」で前景色を赤色，背景色を薄い水色にする．さらに「枠線」で，「全てに同じ枠線を適用する」をチェックしてから，色をオレンジ，その右横の（太さを選択する）ドロップダウンリストをmidium，さらに右横の（線の種類を選択するドロップダウンリストを）直線にする．スタイルを変更するとリアルタイムで，編集中のページの色などが変るのがわかると思う．また，すべてのh2要素のスタイルが一度に変るのもわかる．

h2見出しの見栄えを変更

一度設定したh2見出しの見栄えを変更するには，h2要素が選択された（カーソルがh2要素内にある）状態で「CSSスタイルを設定」アイコンをクリックすると，「スタイルプロパティ」ダイアログが表示される．ここでは，行揃えをセンタリングしてみよう．また，「大きさ」で，「全ての余白を同じ大きさにする」チェックボックスを外してから，右側の余白（灰色のボックス領域の右側に表示されているドロップダウンリスト）を20％にしてみる．（まず，％を選んでから，数字を20に変えればよい．）

文字を赤色で表示するためのスタイルを作成し，文章の一部に適用してみる．

今度は，特定のclass属性を持つ要素に適用される規則を作ってみる．

1. 特定のスタイルを適用したい箇所（文字）をマウスで選択し，「書式」メニューから「span」を選ぶ．（すると，選択した箇所がspanタグで囲まれる．）
2. そのspan要素が選択された状態で，「CSSスタイルを設定」アイコンをクリックして「スタイルプロパティ」ダイアログを表示する．（span要素だけを選択するにはコツが必要．画面最下行の<body;><p><span>において，<span>が選択された状態になっていればうまくいっている．）
3. 「クラスで指定する．．．」を選び，その右側の入力欄に「red」と入力する．そして「色」で前景色を赤色にする．
4. これで完成．選択した文字だけが赤色で表示されているはず．

htmlのsourceは次のようになっている．（CSSファイルには「.red」というセレクタが作成されている．）

<p>あれこれ，<span class="red">ここは赤色</span>だよ，かれこれ．</p>

先ほど作成したスタイル（class属性）を他の箇所にも適用する

別の箇所の文字を選択し，先ほどと同じ要領で，スタイルを変更したい箇所だけをspan要素で囲む．次に，編集ツールバー2行目の（クラスなし）と表示されているドロップダウンリストをクリックして，「red」を選択する．

おまけ1：代替スタイルシート

既に作成したスタイルシート（例えば，nabe.css）以外に，代替スタイルシート（例えば，large.css）を作成して，ウェブブラウザ（IEを除く）のメニューからスタイルシートを切り替えることもできます．

1. 「挿入」メニューの「スタイルシート」を選択．
2. 「スタイルシートを挿入または編集」ダイアログが開くので，左下の「＋」をクリックして，「スタイルシートのプロパティ」ダイアログを表示．
3. 「文書からチェックする」をチェックしてから，「代替スタイルシート」もチェック．
4. 「新しいファイル」をクリックして，XHTMLファイルと同じ場所（フォルダー内）にスタイルシートを作成．（例：large.css）
5. 「URLをページ相対にする」をチェック．
6. 「タイトル」欄に，作成した代替スタイルシートのわかりやすい名前（例：文字を大きくする）を入力．
7. 「スタイルシートを挿入または編集」ダイアログを閉じる．

sourceビューで見ると下記のようになっているはず：

<link rel="stylesheet" type="text/css" href="nabe.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="large.css" title="Large font" />

残念ながら，BlueGriffonで，代替スタイルシートにスタイルのルールを設定する方法がわかりません．:-）でも，他のエディタなどを使って，先ほど作成したスタイルシート（large.css）に下記を書き込むと，文字を大きくする代替スタイルシートのできあがりです．

文字サイズを大きくする代替スタイルシートの例（large.css）

@import url(nabe.css);  /* nabe.cssのルールに下記を追加する */

body {
  font-size: x-large;
  }

詳細は，『Web標準XHTML+CSSデザイン』の「法則68 代替スタイルシートを利用して複数のスタイルシートを切り替える」参照．

おまけ2：メディアごとに表示スタイルを変更

印刷用のスタイルを追加します．

1. 代替スタイルシート同様の手順で「print.css」を作成．
2. 「新しいメディアを追加する」を選択して，真ん中のドロップダウンメニューから「印刷メディア」を選択して，「OK」

すると，XHTMLファイルのソースが以下のようになっているはず．

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

このprint.cssに印刷用スタイルのルールを書き込めば，印刷時に適用されます．

なお，複数メディア用のスタイルを一つのスタイルシートに書き込むこともできます．

CSSファイルに印刷用CSSを挿入する例

@media print {

  body {
    font-size: 10.5pt;
    font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
  }

  .TOCBackLink {
    display: none;
  }

  h2 {
    page-break-before: always;
  }

}

フォントサイズを10.5ポイント，フォントは明朝体，「目次に戻る」リンクは印刷しない，h2見出しの前で必ず改ページするという指定をしています．

詳細は，『Web標準XHTML+CSSデザイン』の「法則39 出力メディアに合わせて適用するスタイルを制御する」及び「法則69 印刷に適した印刷用スタイルシートを作成する」参照．

CSSの基礎

CSSで使用する単位

CSSで使う単位は大きく分けて2種類あります．

• 絶対値を示す単位：cm，mm，in（インチ），pt（ポイント），px（ピクセル），
• 相対値を示す単位：%（デフォルトの大きさの何倍か），em（フォントの大きさを1とする単位），ex（小文字xの高さを1とする単位）

両者を比較すると，相対的な単位のほうが利用者の環境に応じて適切な値で表示されることを期待できます．emやexを単位にしておけば，ユーザがブラウザで見ている文字の大きさの何倍にするかを表示できるわけです．（ただし，img要素などは画像ファイルの大きさがpxになるので，pxで指定する場合が多い．）

スタイルシートの指定方法

スタイルの指定方法には，外部スタイルシート，内部スタイルシート，インラインスタイルの3種類があります．

<head>
  <link rel="stylesheet" type="text/css" href="http://www.foo.org/example.css" />
</head>

外部スタイルシートを使えば，複数のページで同じデザインを共有できるなどのメリットがあります．（XHTML文書のhead要素内の）link要素で外部スタイルシートのURLを指示することで，XHTMLファイルとCSSファイルを結びつけます．

外部スタイルシートの場所として，上例のようにURLを用いても良いし，HTMLファイルからの相対パスを用いても構いません．また，複数のスタイルシートを読み込んでも構いません．

<head>
  <style type="text/css"><![CDATA!
　　　　/* ここにスタイルのルールを書く */
  ]]</style>
</head>

内部（埋め込み）スタイルシートは，head要素の中にstyle要素としてデザインのルールを書き込みます．他のページとデザインを共有できないので内部スタイルシートの利点はあまりないし，HTMLファイルの中にCSSのルールを書くわけですから，CSSのルールが間違ってHTMLと解釈される可能性があります．それを避けるために内部スタイルのstyle要素全体をHTMLのコメントで囲む方法や，下記のようにCDATA（Character data）と明示的に指定してHTMLとして解釈されることを防止する方法もあります．でも一番安全なのは外部スタイルシートを使う方法ですよ．

<img src="foo.jpg" alt="適当" style="width: 100px; height: 50px;" />

インラインスタイルは，要素のstyle属性でデザインを指定する方法です．table要素やimg要素など，その要素のその場所でしか使わない特殊なルールを指定する場合のみで使うこと．BlueGriffonの「スタイルの適用先：」で「この要素のみ（インラインスタイル）」を選択すると，外部スタイルシートではなくてインラインスタイルで書くことができます．

CSSのルール

BlueGriffonではGUI画面でCSSのルールを指定しましたが，実際のCSSファイルには下記のように書き込まれています．

/* 要素全体に適用するスタイル */
h1 {                   
  font-size:170%;         /* 文字サイズ：170% */
  text-align:center;      /* 中央揃え */
}
　
/* class属性が"red"である要素全体に適用するスタイル */
.red {                 
  color: #FF0000;         /* 文字色：赤 */
}
　
/* id属性が"TOC"である要素に適用するスタイル */
#TOC {
  background: red;
}
　
/* class属性が"nobullet"であるul要素の中のli要素全部に適用するスタイル */
ul.nobullet li {             
  list-style: none;          /* リスト項目に中点などをつけない */
}

上記の例で，"h1"とか".red"とか"#TOC"とか書いてあるのが「セレクタ」です．"h1"は要素セレクタ，".red"はクラスセレクタ，"#TOC"はIDセレクタに該当します．セレクタではもっと複雑な宣言もできますが詳細を知りたい人はCSSを勉強してください．

セレクタの後の"{"と"}"で囲まれた部分に「宣言」を書きます．各宣言の間は";"で区切ります．一つの宣言は"font-size: 170%;"のように，プロパティ"font-size"の値が"170%"と指定します．

"/* コメント */"はCSSのコメントです．

ボックスモデル

ウェブブラウザが，ウェブページに文字や画像などの要素をレイアウトする際，各要素が入る箱を左上から順番にウェブページに詰め込んでいくと考えてください．この箱（ボックス）は，内容，パディング，枠線，マージンという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を指定すると表示されるようになり，パディングやマージンを調整することで，いろいろアレンジできることがわかったでしょうか．

Validate

BlueGriffonのGUIで編集していると，空のp要素やbr要素が混入していしまっていることに気づきません．このような余分な要素を整理するために，「ツール」メニューの「HTMLマークアップを整理」を選択して，「整形」ボタンを押してください．画面のレポート欄に表示されている数が全部0になるまで何回も「整形」を押すと，HTMLがきれいにクリーンアップされます．

整理が終わったら，作成したウェブページが文法(DTD)通りに書かれているかどうか，Validatorでチェックしてみましょう．BlueGriffonでページを保存してから，HTML Validation Serviceをブラウザで開いて，「Validate by File Upload」タブでローカルにあるファイル（つまり自分が作成したHTMLファイル）を指定して「Check」ボタンを押してください．

DTDの仕様と一致していたら"This socument was successfully checked as XHTML 1.0 Strict!"と表示されます．そして，XHTML 1.0に適合していることを示すマークをページに貼ることができます．

また，「Another HTML-lint gateway」も使ってみてください．非常に厳しく採点するので，最初は得点が負の値になるかも知れません．このサイトで満点を取るためには，ある程度の文法の知識を持ってソースを直接編集する技能が必要です．

ValidatorやHTML-lintなどの文法チェッカでチェックすると，もしかしたらかなりの数のエラーを指摘されるかも知れません．BlueGriffonは賢いので，注意深く使えばValidatorに指摘されるようなエラーは出ないはずなのですが，インライン要素である文字列や<br />要素がbody要素の下に書かれてしまったりしてエラーになることもあります．BlueGriffonの「ソース」タブで不要なインライン要素を削除してから文法チェックをしてみてください．

ソース編集

Validatorで指摘されたエラーを修正する時は，ソースを直接編集した方が早い場合が多いと思います．また，BlueGriffonには限界があり，グラフィカル画面で編集するだけでは意図したとおりの(X)HTMLにならない場合もあるので，そういう場合もソース表示で編集する必要性に迫られると思います．ソースを直接編集する場合は，(X)HTMLの知識が（ある程度）あることが必要になってきます．

皆さんが普段見ているウェブページのソースは簡単に見ることができます．気になったページがあったら，(X)htmlファイルのソースやCSSファイルのソースを見てみると良いと思います．

でも，BlueGriffonを使えば，かなりのところまでソースを全く編集せずにウェブページを作ることができるのがわかったと思います．しかもそのウェブページは，標準に（かなりの程度）準拠した「正しい」ウェブページになっています．「BlueGriffonでは物足りないな，直接ソースを編集したいな．」と思ったあなたはもうウェブの初心者ではありません．今後はXHTML 1.0とCSS 2.1の仕様を勉強して，より高度で正確なウェブページを作成してください．また，そういうあなたは，DreamweaverやExpression Webなどの本格的なオーサリングツールを使用することをお薦めします．Mac OS X標準のスクリプトエディタ（だったと思う）は(X)HTMLファイルやCSSファイルの表示・編集にも対応しているので，簡単な編集を行うこともできます．情報処理教室には（Webアプリケーション開発ツールとして有名な）Aptana Stusioがインスト－ルされているので，これを使うこともできます．

サイトの公開

今までは，作成したページを公開することを全然考えていませんでした．Wordなどの他のファイルと同じ場所に作成しても，自分以外の人はそのページを見ることはできません．しかし，作成したページを適切な場所（ウェブサーバが指定する場所）に置くと，世界中に公開できます．

つまり，WWWフォルダーの下に「hobby」フォルダーを作って，その下に「index.html」ファイルがある場合，http://www.cis.twcu.ac.jp/~ユーザ名/hobby/index.html というURLで世界中に公開されます．なお，index.htmlはトップページを表す標準ファイル名なので，ファイル名を省略してhttp://www.cis.twcu.ac.jp/~ユーザ名/hobby/と指定しても同じページが表示されます．

サイト作成の練習（小課題）

初級から中級にステップアップ！

ここまでくると，BlueGriffonだけでは物足りなくなり，自分で直接ソースを編集したくなると思います．また，文法エラーの理由を理解するためには，(X)HTMLやCSSの技術仕様（文法）を勉強する必要が出てきます．つまり，文法などのの技術的知識をBlueGriffonにおおまかせした初級段階が終わり，自分でも知識を持って詳細なウェブページを作成する中級段階に来たわけです．

文法エラーの解決法

Validatorで指摘されたerrorの理由を知りたい人は，以下の手順で修正すると良いかも知れません．ただし，ソースを直接編集する必要が生じます．

1. 「5.4 Validate」でエラーが出たら，文法チェッカ：Another HTML-lint gateway でチェックしてみる．
2. Another HTML-lint gateway を開いたら，「FILE」をチェックして，「参照...」ボタンで，エラーが出たファイルを指定する．
3. 「チェック」ボタンを押して文法チェック．
4. Validatorよりも詳細な結果が日本語で表示されるので，エラーメッセージなどを参考にしながら，BlueGriffonでソースを修正する．

最終課題の準備

最終課題では，数ページで構成されるウェブ「サイト」を作ってもらいます．ウェブサイト開発では，1ページのウェブページを作成するのとは違った知識や技術が必要になります．以下，「ウェブのユーザビリティ」，「ウェブの開発プロセス」，「ナビゲーションの工夫」の章で，最終課題のために知っておいてほしいことを書きます．

どのようなサイトを作るのかを考え，コンテンツを集める準備を始めておくとよいと思います．

参考：最終課題の情報

基本技術

BlueGriffonはWYSWYG (What You See is What You Get)エディタなので，XHTMLやCSSの仕様を知らなくても，ワープロ感覚で，ウェブの標準に準拠したウェブサイトを作成できます．とは言っても，基本的なことを知らないと，BlueGriffonを効率的にあるいは正しく使えません．

このサイトの目的の一つは「難しい知識なしにウェブサイトを構築」することだと述べましたが，初心者を超えるためには，ある程度，基本的なことを知っておく必要があります．ウェブサイト構築の専門家を目指すなら，(1) (X)HTML，CSS，JavaScriptなどの技術スキル，(2) ウェブのユーザビリティやアクセシビリティのガイドラインの知識，(3) ユーザニーズ収集，情報アーキテクチャーとサイト設計のスキル，(4) （テストツールやチェックリストやユーザ評価などの）サイト評価のスキルが必要になると思います．そこで，これらの技術や知識について，以下，大事なところだけをまとめておきます．

情報アーキテクチャ（ページの構造）

文書の構造

XHTMLで文書の構造をマークアップするためには，文章に構造がある必要があります．章，節，項のようなセクション構造，箇条書きのようなリスト構造，そういう構造があって初めて，タグでマークアップすることができるわけです．ということは，ウェブで情報を公開するためには，まず情報の構造を見つけて，次にその構造をマークアップすることになります．この「構造を見つける」という作業がとても重要です．

最初に，文章の題目を考えましょう．それがtitleとh1見出し になるはずです．次に，文章を適切な単位に分けましょう．いくつかの大グループに分け，次に各大グループを中グループに分けていきましょう．そしてグループ毎に，そのグループの中身を適切に示す見出しを考えましょう．その見出しが，h2やh3になります．heading要素やulやolなどリスト要素，またテーブル要素などを，適材適所で上手に使ってください．

また，ひとつのページが，本文以外に，ヘッダー（ロゴ，サイトイメージを示す画像やH1要素，サイト内検索などが含まれる），グローバルナビゲーション（サイト内の各カテゴリーにジャンプするメニューやパンくずリストなど），フッター（サイトポリシーや連絡先などが含まれる），左側や右側のカラム（メニューや広告やそのほかの機能などが含まれる）などの大きなブロックで構成されることが多いと思います．こうしたブロックはサイト内の全ページに共通したレイアウトで配置され，ウェブサイトに一貫したデザインと操作性を提供します．こうしたブロックはdiv要素で囲い，ブロックごとに適切な深さ（H2やH3など）の見出しを付けることをお薦めします．機能ごとにまとめたdivブロックには，そのブロックの機能を表すid属性あるいはclass属性，さらにrole属性をつけましょう．divブロックごとに見出しが見えることがどうしても嫌なら，CSSを使って（音声では表示されるけれど）画面表示から隠すこともできます．このようにデザインすると，class属性を持ったdivブロックの画面上の配置やプレゼンテーションをCSSで自由に指定すると共に，音声ユーザには見出し要素によるナビゲーションやコンテンツの把握を容易にさせることができます．

「NVDA日本語版操作ガイド」は2009年度の卒業研究の一部として作成したマニュアルを一般公開しているドキュメントですが，以下のようなdivブロックの階層になっています．

このページは，WAI-ARIAが定義しているlandmark（本文なら"main"，ヘッダーなら"banner"，ナビゲーションなら"navigation"，本文以外のコンテンツなら"complementary"，フッターなら"contentinfo"という値をrole属性に与える）を使って，最新のスクリーンリーダがdivブロックごとに簡単にジャンプできるようにしています．Googleの検索結果のページをはじめ，多くのページがこのlandmarkを使い初めています．

<div id="header" role="banner">
    	<h1>NVDA日本語版　操作ガイド</h1>
</div>

<div id="global-navi" role="navigation">
	<h2>目次</h2>
	<ul class="navi">
		<li>ああ</li>
		<li>いい</li>
	</ul>   
</div>

<div id="main-content" role="main">
	<div class="h2section">
		<h2><a id="readme">はじめに</a></h2>
        	この見出しの下に文章が続く．．．
 	</div>
    
	<div class="h2section">
		<h2><a id="accessibility">アクセシビリティ</a></h2>
        	この見出しの下に文章が続く．．．
 	</div>
    
    本文がさらに続く．．．．
    
</div>

<div id="side-pane" role="complementary">
     サイドペインのコンテンツ．．．
</div>


<div id="footer" role="contentinfo">
      サイトに関する補足情報．．．．
</div>

なお，ページ内で複数使われる機能のブロックにはclass属性を使い，1回しか使わない機能にはid属性を使います．（同じid属性が複数回出現するのは文法違反） 上記例でいうと，h2sectionはすべてのH2見出しを含むブロックに適用する属性なのでclass属性にしていますが，それ以外はid属性になっています．id属性あるいはclass属性とは別に，WAI-ARIAの技術仕様で定められたlandmarkをrole属性で示しています．

このようにdivブロックに分けておけば，id属性やclass属性をCSSで指定して．各ブロックごとのスタイルを作ることが容易になります．たとえば，class属性が"h2section"のブロックの見栄えは，CSSで".h2section"という規則を作って,そこで指定できます．id属性が"header"のブロックなら，CSSで"#header"という名前の規則を作って，そこで指定します．CSSの規則（セレクタ）名は，id属性ならシャープ（#）で始まり，class属性ならピリオド（.）で始まります．

課題：構造の発見

いくつかのウェブページを調べて，どのような構造があるか見つけてください．見出し要素を使っていないサイトを取り上げるのが良いと思います．たとえば，東女のサイトにはどんな構造があるでしょうか？ その構造をどのようにマークアップするのが正しいのでしょう？

文字を使うか絵を使うか

デザイナは，文字のデザインや大きさ，画像と文字のバランスが変わることを嫌って，「画像文字」を使うことがあります．画像文字を使う場合，画像文字に絵で表現されている文字をalt属性で説明することが不可欠です．でも，本当に必要な場合にしか，画像文字を使わないでください．CSSを使いこなせば，そして最新のブラウザで表示すれば，画像文字を使わなくても，かなりのことができるのです．

JavaScript

JavaScriptについて今まで全く説明してきませんでした．JavaScriptは，AjaxなどのWeb 2.0でよく使われる技術で，ウェブにダイナミックなインターラクションを与えます．上手に使えばユーザビリティが向上するけれども，下手に使えば使いにくいサイトになります．

JavaScriptの例

JavaScriptの例として，マウスをかざすと大きくなるリンクを作ってみましょう．

JavaScript実習

<a href="略" onmouseover="this.style.fontSize='xx-large'" onmouseout="this.style.fontSize='medium'">JS実習</a>