メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。
＜第86号＞ 今週のおさらい 毎週金曜日配信 What's New 2004/2/27 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ■ HTML講座 第29回 --- アクセシブルなテーブル その２ ■ CSS講座 第７回 --- テキスト その２
| 氏名 | 英語 | 国語 | ||
|---|---|---|---|---|
| 前年平均点 | 今年平均点 | 前年平均点 | 今年平均点 | |
| 田中さん | 65.8点 | 63.5点 | 54.1点 | 55.7点 |
| 鈴木さん | 48.2点 | 51.1点 | 37.9点 | 43.3点 |
HTMLでは、 そうした音声ブラウザでも多次元的な表組を理解できるような 「属性」 が用意されています。axis属性の利用th要素 に、あらかじめ axis という属性で「分類名」を設定し、それに関連するデータセルに、headers属性や、scope属性を利用して関連付けることができます。
HTMLコーディングは、以下のとおりになります。<table cellpadding="3" cellspacing="0" border="1" summary="成績一覧"> <caption>期末試験成績一覧表</caption> <tr> <th abbr="受験者" rowspan="2">氏名</th> <th colspan="2" id="english" axis="英語" abbr="科目">英語</th> <th colspan="2" id="tongue" axis="英語" abbr="科目">国語</th> </tr> <tr> <th id="before_1" axis="英語前期" abbr="英語2003年">前年平均点</th> <th id="this_1" axis="英語今期" abbr="英語2004年">今年平均点</th> <th id="before_2" axis="国語前期" abbr="国語2003年">前年平均点</th> <th id="this_2" axis="国語今期" abbr="国語2004年">今年平均点</th> </tr> <tr> <th abbr="名前" axis="受験者" id="tanaka" scope="row">田中さん</th> <td headers="tanaka english before_1">65.8点</td> <td headers="tanaka english this_1">63.5点</td> <td headers="tanaka tongue before_2">54.1点</td> <td headers="tanaka tongue this_2">55.7点</td> </tr> <tr> <th abbr="名前" axis="受験者" id="suzuki" scope="row">鈴木さん</th> <td headers="suzuki english before_1">48.2点</td> <td headers="suzuki english this_1">51.1点</td> <td headers="suzuki tongue before_2">37.9点</td> <td headers="suzuki tongue this_2">43.3点</td> </tr> </table>
HTMLコーディングの実行結果は以下のとおりです。axis属性を利用したテーブルのサンプルtext-align属性です。ただし、この設定は、ブロックレベル要素のみに適用され、インラインレベル要素では無視されますので、扱いに気をつけてください。
p { text-align: left } 文字の左寄せ (デフォルト値)
p { text-align: center } 文字の中央揃え
p { text-align: right } 文字の右寄せ
left --- ここでは左寄せになります。
center --- ここでは中央揃えになります。
right --- ここでは右寄せになります。
text-indent属性でインデントを設定します。
p { text-indent: 1em } １文字分のインデント
p { text-indent: 30px } 30ピクセル分のインデント
ここでは普通に表現されています。
ここでは、１文字分のインデントが設定されています。
ここでは、30ピクセル分のインデントが設定されています。
text-transform属性です。この属性では、１文字目の英文を大文字にしたり、全部を大文字、あるいは小文字に変換するものです。この属性の値となるものは以下のとおりです。none -------- 何もしない（そのまま出力する：デフォルト値）captalize --- 単語の最初の文字のみ大文字にするlowercase --- 英文すべてを小文字で出力するuppercase --- 英文すべてを大文字で出力する
p { text-transform: captalize }
p { text-transform: lowercase }
p { text-transform: uppercase }
W3C とは、world wide web wonsortium の略です。[none」
W3C とは、world wide web consortium の略です。[captalize]
W3C とは、world wide web wonsortium の略です。[lowercase]
W3C とは、world wide web wonsortium の略です。[uppercase]
u要素がありますが、これは物理タグに分類されているのであまり使いたくないところです。ins要素の場合には、何らかの追加する部分があった場合に利用するフレーズ要素なので、この要素で下線を表示させるためだけに利用するのは好ましくありません。text-decoration属性によって多様な線を表示させることができます。その値は以下のとおりです。none --------- 線表示や点滅などは出力しない (デフォルト値)underline ---- 下線を表示するoverline ----- 上線を表示するline-through - 末梢線を表示するblink -------- 点滅表示する
p { text-decoration: underline }
p { text-decoration: overline }
p { text-decoration: line-through }
p { text-decoration: blink }
blink の値は、これを実装している Webブラウザが限られていますので、あなたの環境では表現しないかもしれません。ここでは、文字に下線を付けて表現しています。
ここでは、文字に上線をつけて表現しています。
ここでは、文字に末梢線をつけて表現しています。
ここでは文字を点滅させています。読みにくいのでやめましょう。
font-variant属性です。以下はその値となります。none -------- 何も変化しないsamll-caps -- 文字をスモールキャップに指定する
p { font-variant: small-caps }
font-variant属性によって、small-caps は指定していません。
ここは font-variant属性によって、small-caps を指定しています。
font-style属性、文字の強調の有無を指定する font-weight属性、フォントの大きさを指定する fon-size属性、文字の行間を指定する line-height属性、また、フォント名を指定する font-family属性や、今回説明した font-variant属性などを一括して設定することができます。
p { font: font-style font-variant font-weight
font-size/line-height font-family }
font-style、font-variant、font-weight の値の順番は自由に記述できますが、それ以降は決められた書式の順で設定しなければなりません。なお、フォント名やフォントの大きさ、行間設定などは省略することが可能です。
p { font: obelique normal bold 1.5em/130% sserif }
ここでは通常の５割ほど大きな明朝体を斜体で表現しています。
margin) について詳しく解説する予定です。
初版公開日 2004年2月27日
Copyright（C） 2002-2004 banban@scollabo.com