Click here to visit our sponsor

ECサイトのお勧め商品カタログ|映画好きのBS/CSガイド

Webアクセシビリティ: body

body(ボディ): 本論へ


body(ボディ) 本論

今現在行われているHTML文書作成は
原稿→レイアウト
このような行程ですが、
HTML4.01、ウェブアクセシビリティでは
原稿→構造化(ユニバーサルデザイン)
→レイアウト→アクセシビリティ

作業的にはこう変わっていくのでしょう。

つまりはbody部からスタイルシートのデザインを分離する事により、最低限、構造化(ユニバーサルデザイン)された文書として閲覧可能となり、アクセシビリティを施されると更に判りやすい文書になるという事です。

ここではまず、body部でよく使われる汎用属性とデータ形式についてお話しします。

汎用属性

以下の属性はほとんどの要素で使用可能です。

id="固有の名前"

idは識別子であり、そのページにおける番地のようなもので、同じ名前を繰り返し、ひとつのページに付ける事は出来ません。

英字で始まる文字列で、大文字、小文字の区別がされます。

今まで、<a name=""></a>で書かれていた任意の場所の指定などもXHTML1.0では<a name="" id=""></a>とこのように書き、nameとidは同じ名前にします。

class="分類名"

classはページの中での同じグループを指定する場合に使われ、ひとつのページ内で何度でも使用可能です。
主にスタイル適用に使われますが、スタイルシートでは乱用を避けるようにも指示されています。

複数指定も可能ですが、これもまた英字で始まる文字列で、大文字、小文字の区別がされます。

「このページのトップに戻る」などの複数回使われる箇所に使用します。

id class ともにHTML CSSの規則では特に制限はないのですが、ブラウザ側の認識として、"_"(アンダースコア)はうまく認識しないようです。
無難に半角英数字とハイフン"-"を使用すべきでしょう。

idとclassの違い

着せ替え人形ってありますよね。
HTMLは着せ替え人形本体にあたり、CSSは着せ替える洋服にあたります。

そして、どの洋服を何処に飾り付けるか、これがid class の役割となるのですが、差詰め、classは既製品で、idは特注。こんなとこでしょうか?

例えば大きな文字で表示と指定するのをid指定だと一カ所にしか指定出来ません。けれどもclass指定ならば複数箇所指定可能になります。

一見class指定の方が便利なように見えますが、複数箇所のうち、数カ所を斜体で表示させたいとかなった場合、class指定は不便となります。
HTMLのソースの中のclass名を書き換え、スタイルシートのclassを書き足さねばならないですから。

それよりも複数のidをスタイルシートで指定した方が修正時、スタイルシートのみの変更ですむようになります。

つまりはスタイルシートとは、洋服であり、HTMLという着せ替え人形本体がしっかりしていれば、どんなデザインにも衣替え可能となるわけです。

それゆえ、ページを作る上での設計が大切となってくるわけです。

なお、スタイルシートの認識順はidの方を優先するようです。

title="補足情報"

要素に対する補足的な情報を記述できる属性で、ポップアップで画面に表示されます。
視覚、聴覚共にサポートしますが、現状では晴眼者に対するアクセシビリティな属性になっています。

ただし、あまり長い情報はその利用法からも付加できません。

style="スタイルシート"

meta要素で指定したスタイルシート言語が記述可能で、要素のスタイルを指定できます。

ただし、XHTML1.1では非推奨となっています。

lang="言語コード"

その要素の内容で使われている言語が指定可能です。主にスピーチシンセサイザーなどで読み上げる際、正しい発音をさせるために使用されます。
en : 英語 en-US : アメリカ英語 en-cockney : コックニー英語
各言語でも地域指定が可能となっています。

このページのトップへ戻る

データ形式

HTMLでは指定できるデータ形式が限られています。

「#」(シャープ)に続く16進数 RGB値(Red,Green,Blue) #ff0000などまたは基本16色の色名(英語)

CSSではこの他にRGB値16進数の簡略形や数値指定
#f00 rgb(255,0,0) rgb(100パーセント,0パーセント,0パーセント)などが指定可能です。
#システムGUIに合わせた色指定も可能だそうです。

ページで使用可能とされているWeb Safe カラーとは RGB(Red,Green,Blue) それぞれ0-255まで色分けし、フルカラーだと、256*256*256=16,777,216色
それを6段階にしたものがWeb Safeカラー6*6*6=216色です。

考え方は0,51,102,153,204,255 51ずつ増やしていったもので
51は16進数でいえば、33 割合でいえば、20パーセント
10進数 051102153204255
16進数 0336699CCFF
パーセンテージ 0%20%40%60%80%100%

HTML定義済みの色

Black = #000000
Navy = #000080
Blue = #0000FF
Green = #008000
Teal = #008080
Lime = #00FF00
Aqua = #00FFFF
Maroon = #800000
Olive = #808000
Purple = #800080
Gray = #808080
Silver = #C0C0C0
Red = #FF0000
Fuchsia= #FF00FF
Yellow = #FFFF00
White = #FFFFFF

長さ

CSSではこの他にフォントサイズのプロパティの値を1としたem
指定文字のフォントの値を1としたex相対単位
インチ(in)、センチメートル(cm)、ミリメートル(mm)、
ポイント(pt)、パイカ(pc)の絶対単位が指定可能。

ただし、アクセシビリティの観点から、相対単位が望ましいとされています。

ちなみにピクセル数は相対単位になりますが、サイズ変更などの場合、使用環境により、サイズ変更出来ない文字コードが含まれている場合、絶対単位的な表示、つまりはサイズ変更出来ない不具合を起こす事があります。

文字列

文字参照といい、記号などは特定の文字列を使う事で使用可能です。
< は &lt; > は &gt; など

属性値では前後に空白文字がある場合、無視され、タブや改行は半角スペースとして置き換えられます。

XHTMLとの互換性を参照。

少し難しくなりましたが、このようなきまりがHTMLにはあるという事を認識して置いて下さい。

このページのトップへ戻る

2002-05-30 著作 2003-12-11 加筆
Copyright ©2003-2013 問い合わせ. All Rights Reserved
[all that's jazz][wag ひょうきん者]
Netscape 6.* Mozilla(ja) だと「表示」→「スタイルシートを使う」で画面表示を変更できます。
Netscape Communicator 4.* は簡易版のスタイルシートを適用しています。
このページのトップへ戻る