[PR]500000円と車プレゼント:今なら無料で現金と新車が当たる大抽選!

HTML(ハイパーテキストマークアップ言語)学習辞典(ロゴ、2.36k)

<<|辞典の1ページ目|リンク集|ヘルプ|>>

1(目次)>>>辞典の4ページ目>


優先度3(応用)

accesskey=""(属性)

指定したキーボードのボタンを押すと、作動する。対応しているブラウザーは、インターネットエクスプローラー4.0以降とネットスケープ6である。この属性はA、 AREA、BUTTON、INPUT、 LABEL、LEGEND、 TEXTAREA要素で使うことができる。

関連したものに、「tabindex=""」がある。これをサポートするのは、A、 AREA、BUTTON、INPUT、OBJECT、SELECT、TEXTAREA要素。

使用例:<a href="index.htm" accesskey="a">altキーとaボタンを同時に押してごらん</a>

表示例:Altキーとaボタンを同時に押してごらん

<table>の詳細

基本

表を書き、情報を構造化させる。スタイルのために使うべきではない。テーブル要素を、誤って使っているページが多々ある。

<tr>タグで横一列を定め、<td>タグで一項目を決める。見だしを書くときは、<td>タグの代わりに、<th>タグを用いる。百聞は一見にしかず、まずは例を見て欲しい。

使用例:<table boder="1" summery="私が大好きな本をまとめたものです。">

<caption>好きな本</caption>
<tr>
<th>歌集</th>
<th>物語</th>
<th>哲学書</th>
</tr>
<tr>
<td>万葉集</td>
<td>竹取物語</td>
<td>存在と時間</td>
</tr>
<tr>
<td>古今和歌集</td>
<td>源氏物語</td>
<td>死にいたる病</td>
</tr>
</table>
表示例:
好きな本
歌集物語哲学書
万葉集竹取物語存在と時間
古今和歌集源氏物語死にいたる病

従って、常に、td、thタグはtrタグに挟まれる。

テーブル要素の開始タグのそばには、必ず、上のように1個のcaptionを付け加える。これはテーブルの表題を示すものである。

また、テーブル要素には、summery属性を使うべきである。この属性は、表の要約を表現する。

線(ボーダー)について

テーブルの線を付けるためには、例のように「border="1"」と言う属性を加えなければならない。数字1は線の太さを表している。むろん、0にすると、線が消える。border属性を消しても同じ効果が得られる。

使用例:<table boder="0">
<tr>
<th>歌集</th>
<th>物語</th>
<th>哲学書</th>
</tr>
<tr>
<td>万葉集</td>
<td>竹取物語</td>
<td>存在と時間</td>
</tr>
<tr>
<td>古今和歌集</td>
<td>源氏物語</td>
<td>死にいたる病</td>
</tr>
</table>
表示例:
歌集物語哲学書
万葉集竹取物語存在と時間
古今和歌集源氏物語死にいたる病

さらに、インターネットエクスプローラー3以降とネットスケープ6でしか対応していないが、枠の形についても、変えることができる。これにはframe属性とrules属性を使う。frame属性は表の枠線を指定できる。

使用例(枠を周囲全て表示させるframe="border"でもよし):<table frame="box">
<tr>
<th>歌集</th>
<th>物語</th>
<th>哲学書</th>
</tr>
<tr>
<td>万葉集</td>
<td>竹取物語</td>
<td>存在と時間</td>
</tr>
<tr>
<td>古今和歌集</td>
<td>源氏物語</td>
<td>死にいたる病</td>
</tr>
</table>
表示例:
歌集物語哲学書
万葉集竹取物語存在と時間
古今和歌集源氏物語死にいたる病

次に、rules属性とは、項目間の線についてその規則を定めている。ブラウザ対応状況は、frame属性と同じだが、ネットスケープ6がちゃんと表示できない。

  • rules="rows"(線が行間のみに登場する)
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病
  • rules="cols"(列間のみ)
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病
  • rules="groups"(thead,tbody間や、colgroup,colで指定された間のみ)
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病
  • rules="all"(全て)
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病
  • rules="none"(線なし)
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病
  • ヘッダについて

    ヘッダとは見出し情報である。上記の使用例のように、tdタグの代わりに、thタグを使っているが、このthタグがヘッダ(見出し)である。応用として、このthタグに省略を意味する、abbr属性を用いて、その見出しの要点を書くのがよい。

    テーブル(表)の形について

    rowspan属性と、colspan属性を使うと、項目をまたがって作ることができる。使用例を参照してもらいたい。

    使用例:<table boder="1">
    <tr>
    <th colspan="2">歌集</th>
    <th>物語</th>
    </tr>
    <tr>
    <td>万葉集</td>
    <td>竹取物語</td>
    <td rowspan="2">存在と時間</td>
    </tr>
    <tr>
    <td>古今和歌集</td>
    <td>源氏物語</td>
    </tr>
    </table>
    表示例:
    歌集物語
    万葉集竹取物語存在と時間
    古今和歌集源氏物語

    colspan属性は横にまたがり、rowspan属性は縦にまたがる。数字を設定して、どれだけの列、行をまたがせるか定められる。

    細かい設定について

    以下はテーブルの細かい設定について、解説する。対応しているブラウザーが少ないので、注意を要する。

    列設定

    ネットスケープはバージョン6以外対応してないのだが、colgroup要素を使う。この要素を使えば、スタイルシート等の設定を列ごとに設定できる。細かい設定にcol要素を使う。

    ちなみに、span属性は、適用される列の数を表す。

    使用例:<table boder="0">
    <COLGROUP span="3" width="10">
    </COLGROUP>
    <tr>
    <th>歌集</th>
    <th>物語</th>
    <th>哲学書</th>
    </tr>
    <tr>
    <td>万葉集</td>
    <td>竹取物語</td>
    <td>存在と時間</td>
    </tr>
    <tr>
    <td>古今和歌集</td>
    <td>源氏物語</td>
    <td>死にいたる病</td>
    </tr>
    </table>
    表示例:
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病

    上のCOLGROUPの部分を下のごとく置き換えることができる。

     <COLGROUP>
         <COL width="10">
         <COL width="10">
         …合計3個のCOL要素…
     </COLGROUP>
    
    行設定

    今度は行について細かく設定する。thead要素とtbody要素を使う。前者は、thのようなヘッダにタグで挟んで用いる。span属性はない。

    余白

    項目の余白について、設定する。これは、ブラウザがちゃんと対応しているので、格別な配慮を要さない。

    cellspacing属性はどれだけ、表の端と項目が離れているかなど、項目間の隙間を定める。一方、cellpadding属性は項目内の、端と内容の間を決める。以下の通りである。

    使用例:<table boder="1" cellspacing="5">
    <tr>
    <th>歌集</th>
    <th>物語</th>
    <th>哲学書</th>
    </tr>
    <tr>
    <td>万葉集</td>
    <td>竹取物語</td>
    <td>存在と時間</td>
    </tr>
    <tr>
    <td>古今和歌集</td>
    <td>源氏物語</td>
    <td>死にいたる病</td>
    </tr>
    </table>
    表示例:
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病

    cellpaddingの場合

    表示例:
    歌集物語哲学書
    万葉集竹取物語存在と時間
    古今和歌集源氏物語死にいたる病

    注:テーブル(表)は便利だが、スタイルやデザインのために使わないでほしい。なぜなら、テーブルは情報の構造化が目的であるため、スタイルには用いられないから。さらに、なかなか表示されない、携帯電話では思った通りに表示されないなどの、不利な点があるからである。スタイルシートを用いた方が、よっぽど上手にできる。

    <fieldset>

    form要素を構造化するのに使われる。legend要素と併用する。

    インターネットエクスプローラー4.0以降、または、ネットスケープ6に対応している。

    (大きさ:大きな要素

    使用例:<form name="例" method="post" action="省略">
    <fieldset>
    <legend>記入欄</legend>
    <input type="text">
    <input type="radio"></fieldset>
    </form>
    
    表示例:
    記入欄

    <ins>,<del>

    文章を修正するときに、修正した跡を残したいときがある。そのとき、必要となるのが、この二つ。

    ins要素は、挿入部を意味する。del要素は取り消しを意味し、取消線が引かれる。

    インターネットエクスプローラー4以降とネットスケープ6で対応している。

    datetime属性は、修正した日にち時間を指す。これは対応しているブラウザーが今のところ無い。

    表示例:<del>6</del><ins datetime="2001-4-16T21:45-21:47">9</ins>である。

    使用例:69である。

    <object>

    この要素は、ファイルをページに埋め込みたいときに使う。正常に作動するのが、ネットスケープ6のみである(インターネットエクスプローラー、ネットスケープ4.xについては不確実)。

    img要素applet要素embed要素、iframe要素の代わりとして、このobject要素を使う。かなり、使える。なぜなら、ファイルを読み込むことができなかった場合、別のファイルを読み込ませることが可能だからである。

    以下は、使用する属性である。

    data
    data="ファイル名"で使う。このファイルがブラウザに表示される。
    type
    type="ファイルの形式"で使う。ここでファイルを読みとれるかどうか、ブラウザが判断する。
    classid
    オブジェクト実装の所在を示す。dataの代用をしてもいい。
    使用例:
    <object data="simple.gif" type="image/gif">
    hsimpleを表示できないときには、simple.gifを表示します。それを表示できないときには、このテキスト部分が表示されます。
    </object>
    表示例: hsimpleを表示できないときには、simple.gifを表示します。それを表示できないときには、このテキスト部分が表示されます。
    優先度2.1へ3ページ目へ戻る (4/5) 次のページへ進みます優先度4へ 
    優先度1  2.1   
    シンプル

    >>辞典の1ページ目へいく

    >>この章の関連リンク集が見たい

    以降は私(dhr)の署名です。転載の際は消してください。

    simple by dhr(ご意見、ご感想はEメールでdhrname@mail.goo.ne.jp

    [PR]田丸麻紀さん愛用ダイエット:大人気サプリメント!注文殺到中です