デジハリ070120＋アクセシビリティ

DTPアートディレクターコース専攻　（第８回）　授業メモ（ライブバージョン）

DTPのコースだが、WEB関係の授業にはいる。
DTPだけでは業界に出ても通用しないのでWEB関係の技術も身につけるため。前回のFireworksから始まって、計５回の授業を行う。本日はHTMLの基本なので余裕はありそうだ。休み時間ごとにアップしていく。

午前の前半：DTDの意味とHTMLの構造
TeraPadを使ってDTDの記述と基本タグの練習。bodyタグとfontタグの属性、色について。

午前の後半：アクセシビリティを絡めた文字の強調など
文字の強調にはemタグ、さらなる強調はstrongタグを使う（通常は斜体と太字）。見た目は同じ効果のiタグとbタグは使わないように。音声ブラウザの種類にもよるが、設定した単語を音で強調してくれる機能は、em/strongでしか得られない。
ｈｒタグとtableタグの実習とブラウザによる見栄えの違いの説明。WEB制作を仕事にするならば、WindowsとMacで各ブラウザのバージョン毎のチェックが必要。

昼休みに質問：高校の授業でアクセシビリティを実習させたいが。。
回答：音声ブラウザは高価。富士通アクセシビリティ・アシスタンスに３種のフリーのツールがある。

WebInspector（ウェブインスペクター）

ウェブサイトが高齢者や視覚に障害のある方にも読みやすいかを診断する

ColorSelector（カラーセレクター）

アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができる、開発者の為の支援ツール

ColorDoctor（カラードクター）

仕事や生活の中で利用するウェブサイトや動画、プレゼンテーション資料で色のアクセシビリティをチェックするためのツール

さらに、Webアクセシビリティを理解し実践するためのポータルサイトInfoaxiaを紹介していただいた。ブラウザを使って、Webページのアクセシビリティをチェックしたり、シミュレーションしたりすることができる「WebAccessibilityToolbar」というツールをダウンロードできる。

午後の前半：テーブルのセルの結合と枠の幅／余白の設定・背景色に馴染んだタイトル画像
たった１時間でこれだけの内容を教えるとは！
3x3のテーブルを作り、rowspan/colspanで結合する実習。borderの値でエンボスのような枠線を付けるのは流行らない。マットな枠線を設定する。属性の説明を受けながら、tableの属性にbgcolor="#666666" border="0" cellspacing="1" cellpadding="5"、trの属性にbgcolor="#cccccc"を設定。10分間、自由なテーブルを作成。
次にウェブセーフカラーを背景色にしたHTMLを作成。ホトショで、同じ色を背景にしたタイトル画像を作成。文字には適当な効果をつける。イメージ＞トリミングで切り取って、Web用に保存。HTMLに配置。

午後の後半：背景画像の応用と、ボタンにリンクの設定。
マットにHTMLの背景色を設定した透過GIF。左からグラデーションを付けた2500ｘ1pxの背景画像。
画像格納用のフォルダ名は「images」か「img」。前者はアプリケーションで作業するのに便利（デフォルト名）。後者は手書きで作業するのに便利。
画像にリンクを貼る場合は、imgタグにborder="0"を設定して、リンクの枠線を消す。

内容が多くて結構つかれた。HTML初めての人は居残って質問している。

さて、これから近くの情報科学専門学校に寄ってみよう。
基本情報技術者対策講座に参加している生徒の様子を見に。