HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

★月々263円からオンラインショップを運営!高機能カート・クレジット決済が簡単導入 [PR]

● 表の見出し構造

・見出しとデータの関連づけ

TABLE要素とTH要素、TD要素を組み合わせて表を作成しても、 その間・・・見出しとそのデータの間には何の関連性もありません
これは、視覚的に表を見るのなら問題はありませんが、音声システムなどのブラウザで表を参照する場合、 見出しを見出しの様に読み上げたとしても、それとデータの関係を把握することは困難でしょう。
そこで、見出しとデータを関連づけるために、『scope』属性を使用します。 scope属性は以下属性値を持っています。
row:、設定したセルを見出しとして、設定したセルを含む行と関連づけます。
col:設定したセルを見出しとして、設定したセルを含む列と関連づけます。
rowgroup:設定したセルを見出しとして、設定したセルを含む行グループと関連づけます。
colgroup:設定したセルを見出しとして、設定したセルを含む列グループと関連づけます。
複雑な表のため、行・列単位ではなく単独のセルと関連づけたいときは、 『headers』属性と『id』属性を使用して、 それぞれの見出しとデータを関連づけることが可能になります。
これにより、音声システムはデータと見出しを合わせて話すなど、見出しとデータを関連づけた出力の仕方ができます。

テーブル例(拡張子一覧)
拡張子意味対応アプリ・備考
一般アプリ
txtテキストファイルメモ帳等のテキストエディタ
pdfAcrobatファイルAcrobat Reader(読込み用で無償提供)
圧縮関係
lzhLZHファイル日本国内で普及している圧縮ファイル。
圧縮解凍ソフトはフリーで大量にある。
zipZIPファイル海外で普及している圧縮ファイル。
圧縮解凍ソフトはフリーで大量にあるけど、解凍パスワードの設定が可能。

<TR><TH scope="col">拡張子</TH><TH scope="col">意味</TH><TH scope="col">対応アプリ・備考</TH></TR>
<TR><TH id="appl">一般アプリ</TH></TR>
<TR>
<TH scope="row" headers="appl">txt</TH><TD headers="appl">テキストファイル</TD><TD headers="appl">メモ帳等のテキストエディタ</TD>
</TR>
<TR>
<TH scope="row" headers="appl">pdf</TH><TD headers="appl">Acrobatファイル</TD><TD headers="appl">Acrobat Reader(読込み用で無償提供)</TD>
</TR>
<TR><TH id="arch">圧縮関係</TH></TR>
<TR>
<TH scope="row" headers="arch">lzh</TH><TD headers="arch">LZHファイル</TD><TD headers="arch">日本国内で普及している圧縮ファイル。<BR>圧縮解凍ソフトはフリーで大量にある。</TD>
</TR>
<TR>
<TH scope="row" headers="arch">zip</TH><TD headers="arch">ZIPファイル</TD><TD headers="arch">海外で普及している圧縮ファイル。<BR>圧縮解凍ソフトはフリーで大量にあるけど、解凍パスワードの設定が可能。</TD>
</TD>
</TR>

この表の『ZIPファイル』と記述されているセルは見出しの『意味』と『zip』そして、『圧縮関係』と関連性がもたれているので、 そのセルが読み上げるときに、それぞれの見出しと合わせて読み上げられることが期待されます。
註:IE等の通常のブラウザでは確認できません。私も確認していません(以下も同じ)

・見出しの省略形

表の見出しセルにおいて情報量が多すぎて、音声システムでその内容を繰り返すことが望ましくない場合、 省略した単語を『abbr』属性を使用して設定しておきます。
これにより、参照して見出しを出力する時は、『abbr』属性により設定されている 省略した情報を出力します。

<TR><TH abbr="一般アプリ">一般アプリケーションソフト</TH></TR>
<TR><TH abbr="圧縮関係">圧縮関係のファイル拡張子</TH></TR>

・多次元構造の表

この表は、拡張子とその説明、そしてファイルの種別と三種類(3次元)の項目で作成されています。
HTML文書は行と列の2次元を基本としていますが、 『axis』属性を使用して軸の概念を取り入れることで多次元の表を作成できます。

TABLE border summary="TABLE要素の表示例です">
<CAPTION>テーブル例(拡張子一覧)</CAPTION>
<TR><TH id="h1" axis="項目">拡張子</TH><TH id="h2" axis="項目">意味</TH><TH id="h3" axis="項目">対応アプリ・備考</TH></TR>
<TR><TH id="appl" axis="ファイルの種別">一般アプリ</TH></TR>
<TR>
<TH id="d1" headers="appl h1" axis="拡張子">txt</TH><TD headers="appl d1 h2">テキストファイル</TD><TD headers="appl d1 h3">メモ帳等のテキストエディタ</TD>
</TR>
<TR>
<TH id="d2" headers="appl h1" axis="拡張子">pdf</TH><TD headers="appl d2 h2">Acrobatファイル</TD><TD headers="appl d2 h3">Acrobat Reader(読込み用で無償提供)</TD>
</TR>
<TR><TH id="arch" axis="ファイルの種別">圧縮形式 </TH></TR>
<TR>
<TH id="d3" headers="arch h1" axis="拡張子">lzh</TH><TD headers="arch d3 h2">LZHファイル</TD><TD headers="arch d3 h3">日本国内で普及している圧縮ファイル。<BR>圧縮解凍ソフトはフリーで大量にある。</TD>
</TR>
<TR>
<TH id="d4" headers="arch h1" axis="拡張子">zip</TH><TD headers="h2 d4 arch">ZIPファイル</TD><TD headers="arch d4 h3">海外で普及している圧縮ファイル。<BR>圧縮解凍ソフトはフリーで大量にあるけど、解凍パスワードの設定が可能。</TD>
</TD>
</TR>
</TABLE>

axis』属性を使用して、『項目』『ファイルの種別』 『拡張子』の3つの項目を定義し、それぞれのデータセルには『headers』属性で関連づけを行っています。 『ZIPファイル』と書かれたセルに設定されてる『headers』属性の属性値 『arch d4 h2』はそれぞれ『圧縮関係、zip、意味』が設定されているので、 該当セルを読み上げるときに合わせて読み上げられることが期待されます。
また、『axis』属性は表などで、音声システムなどの補助のためだけではなく、 例えばデータをポイントすることにより、見出しを表示したり、 検索へ利用したりなどのコンピュータ的な処理を行うために使用することも可能ではないかと思われます。

これは、H1要素(文章の見出し)とP要素(段落・・・つまり本文)の間にも言えることではないかと思われるのですが・・・?
現状ではH1要素とP要素の間には何の関係もありません。さらに見出しはH1要素からH6要素までの見出しレベルが用意されていますが、 文中に存在するH6要素がどのH1要素の小見出しかを判断するすべもありません。
ってことを考えた場合、HTML文書はBODY要素をTABLE要素として上のような構造にすることが望ましいのではないでしょうか?
つまり、P要素をポイントすることにより、見出しを表示したり、 検索へ利用したりなどコンピュータ的な処理を行うために使用することも可能になるのでは・・・と思われます。

<<前へ  |上へ|  次へ>>
123456789101112131415

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09