html6-8

(1)

DHC-オンライン講座

文系の人にもわかる！

HTML入門

Textbook

3

(2)

Lesson 6

表

時刻表やメニュー，スポーツのメンバー表など，日常生活には表がたくさん使われます。ウェブブラウザにも表機能が備わっています。HTMLの表（table）機能は，文字どおり「表」を作成する目的で導入されたものですが，その目的を離れ，ページを美しくレイアウトするためにも大変広く使われるようになっています。表機能を使えば，テキストや画像など，HTMLのコンテンツを行と列にきれいに並べて表示することができるのです。このLessonでは，まず本来の目的である普通の表を作るための機能について学びましょう。

●単純な表

まず，いつものように実際に簡単な例を見てみましょう。リスト6-1のHTMLコードを読み込むと図6-1のような表が表示されます。まず，図6-1に表示されている各項目と，リスト6-1の内容を比較してみてください。

●罫線付きの表̶<table border="1">...</table>

表は<table>...</table>で囲まれます。<table>タグについているborder属性は，表の罫線（縦と横の升目）の太さをピクセル単位で指定するものです。リスト6-1では，太さを1ピクセルと指定しています。

●罫線なしの表̶<table border="0">...</table>

これをborder= " 0 " と指定すると，罫線を書かかないようにできます（図6-2）。この例の場合は罫線を書いた方がわかりやすそうです。罫線を書かない表が役に立つのが疑問に思うかもしれませんが，<table>タグをページのレイアウト用に利用したりする場合などに大変便利なのです。このような使い方についてはTextbook 4で例を見ます。

●１行を囲む ̶ <tr>...</tr>

ここまでは話が単純ですが，ここから少し複雑になってきます。図6-1 単純な表図6-2 罫線をとるリスト6-1 table1.html 簡単な表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

<head>

(3)

図6-1とリスト6-1の10-21行目を比べてみると，表の１行（横の並び）が<tr>...</tr>で囲まれていることがわかると思います。trはTableとRow（行）を省略したものです。 10-13行目が最初の行，14-17行目が第２行，18-21行目が最後の行を表しています。

●項目を囲む

̶

<td>...</td>

<tr>...</tr>で囲まれた１行の各項目を分けるのは<td>...</td> です。図6-1の表の各行はそれぞれ２つの項目から成っていますから，<td>...</td>の組が２つあるわけです。この項目（ひとつの升目）のことを「セル（cell）」と呼ぶことがあります。tdはTableとDataを省略したものです。第１行は「月曜∼金曜」と「午前10:00∼午後8:00」の２つの項目で構成されています。同様に第２行は「土曜日」と「午後1:00∼午後10:00」，第３行は「日曜・休日」と「午後1:00∼午後8:00」から構成されています。このように，HTMLでは表の一番上の行を左から右に記述し，１行目が終わったら２行目を左から右に，続いて３行目という順に上から下に記述していきます。まず，この点をしっかり理解しておいて，徐々に複雑な表の記述方法を見ていきましょう。

●見出し行の指定

̶

<th>...</th>

リスト6-2（図6-3）は，上のリスト6-1のコードに「曜日」と「時間」という「見出し行」を追加したものです。加わっているのは，10-13行目ですが，２つの項目が <td>...</td>ではなく<th>...</th>で囲まれています。thは table header（見出し）を省略したものです。図6-3で， <th>...</th>によって見出しと指定した行に書かれた「曜日」と「時間」は，センタリングされて太字で書かれている点に注意してください。これに対して，他の項目は普通の書体で左寄せで書かれています。 Lesson 1などで強調したように，HTMLでは具体的な表示方法までは指定できません。見出しや普通の項目の表示方法はブラウザによっては異なっている場合もあります。いずれにしろ<th>...</th>で指定した見出しの項目は，<td>...</td>で指定された普通のデータ項目よりも，何らかの形で強調されて表示されるのが普通です。図6-3 見出し行の追加リスト6-2 table2.html 見出し行を追加した表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<head>

(4)

既に説明したように，HTML文書では特別な場合を除いて，改行や空白は意味を持ちません。リスト6-1や6-2では，説明しやすいように，表の１行分のデータを４行に分けて書きましたが，これをリスト6-3のように，表１行分のデータをHTMLコードでも1行に書くこともできます (１行目から６行目は同じなので省略しました）。この例のように，各データが短いと，リスト6-3のようにしておいた方が対応が取りやすくなってよいでしょう。後で読む人（自分を含む）がわかりやすいように書いておきましょう。リスト6-3 table3.html 表の各行を１行に記述 7 8 9 10 11 12 13 14 15 16 <body> <h1>営業時間</h1> <table border="1"> <tr><th>曜日</th> <th>時間</th></tr> <tr><td>月曜∼金曜</td> <td>午前10:00∼午後8:00</td></tr> <tr><td>土曜日</td> <td>午後1:00∼午後10:00</td></tr> <tr><td>日曜・休日</td> <td>午後1:00∼午後8:00</td></tr> </table> </body> </html>

●横の見出し

リスト6-2（図6-3）では縦方向の見出し（列見出し）を指定しましたが，リスト6-4（図6-4）は，横方向の見出し（行見出し）を指定した例です。横方向の見出しを表すのにも，<th>...</th>を使います。

●キャプション

̶

<caption>...</caption>

リスト6-4では，もうひとつ<caption>...</caption>で図の説明（キャプション）を指定してみました。<caption>... </caption>は必ず，<table>タグの直後，最初の<tr>の前に書くようにしてください。図6-4 横方向の見出しとキャプションの指定リスト6-4 table4.html 行見出しの指定 7 8 9 10 11 12 13 14 15 16 17 <body> <table border="1"> <caption>日替わり定食</caption> <tr><th>月</th> <td>レバニラ炒め</td></tr> <tr><th>火</th> <td>サワラの西京漬け焼き</td></tr> <tr><th>水</th> <td>焼き肉定食</td></tr> <tr><th>木</th> <td>餃子定食</td></tr> <tr><th>金</th> <td>オムライス</td></tr> </table> </body> </html>

●複数の列にまたがるデータ

̶

colspan="..."

これまでは，行と列の要素の数が同じ表ばかり見てきましたが，図6-5のように升目の数が行や列ごとに違っている表を書くこともできます。この例では一番下の「休業」の欄が２升分を使って書かれています。このようにするには，<td>タグや<th>タグの属性としてcolspan属性を指定します。colspanはcolumn（列）とspan（範囲）を合わせたものです。図6-5の表のコードはリスト6-5のようになります。13行目の２つ目の<td>の属性にcolspan="2"が指定されている点に注意してください。図6-5 複数のセルにまたがる項目 Textbook 3 Lesson 6 表

(5)

リスト6-5 table5.html 複数の列を使うセルの指定 7 8 9 10 11 12 13 14 15 16 <body> <table border="1"> <caption>営業時間</caption> <tr><th>曜日</th> <th>開店時刻</th> <th>閉店時刻</th></tr> <tr><td>月曜∼金曜</td> <td>午前10:00</td> <td>午後8:00</td></tr> <tr><td>土曜日</td> <td>午後1:00</td> <td>午後10:00</td></tr> <tr><td>日曜・休日</td> <td colspan="2">休業</td></tr> </table> </body> </html>

●複数の行にまたがるデータ

̶

rowspan="..."

図6-5の縦と横を反対にしてみたのがリスト6-6（図6-6）です。先ほど２つの列にまたがっていた「休業」は今度は２つの行（縦方向に２升）を占有することになります。このためにrowspan属性を指定しています。ところで，この表はとても見にくい感じがしませんか？図6-5の方が自然な感じがします。表題は上の行に書く方が見やすくなる場合が多いのです。表を作る場合は，見やすさも考慮して作るようにしましょう。図6-6 複数のセルにまたがる項目（２）リスト6-6 table6.html 複数の行を使うセルの指定 7 8 9 10 11 12 13 14 15 <body> <table border="1"> <caption>営業時間</caption> <tr><th>曜日</th><td>月曜∼金曜</td> <td>土曜日</td> <td>日曜・休日</td></tr> <tr><th>開店時刻</th> <td>午前10:00</td> <td>午後1:00</td> <td rowspan="2">休業</td></tr> <tr><th>閉店時刻</th> <td>午後8:00</td> <td>午後10:00</td></tr> </table> </body> </html>

●colspanとrowspanの組合せ

さて，図6-6はやや不自然な例でしたが，図6-7のような例は，日常生活でも見かけることがあるでしょう。「木曜」の欄は縦方向に２升分を使っており，「休業」の欄は横方向に２升分を使っています（リスト6-7）。じつは，リスト6-7を見るとわかるのですが，「曜日」「月∼水・金」などのセルも２升分を使っています。このコードをじっくりと読んで，この表の分析をしてみてください。このように列や行が複雑に入り組んでくるとなかなか大変ですので，注意深くコードを書く必要が出てきます。図6-7 colspanとrowspanの組合せリスト6-7 table7.html colspanとrowspanの組合せ 9 10 11 12 13 14 15 16 17 18 19 20 <body> <table border="1"> <caption>営業時間</caption> <tr><th colspan="2">曜日</th> <th>開店時刻</th> <th>閉店時刻</th></tr> <tr><td colspan="2">月∼水・金</td> <td>午前10:00</td> <td>午後8:00</td></tr> <tr><td rowspan="2">木曜</td> <td>第１・第３</td> <td>午後2:00</td> <td>午後8:00</td></tr> <tr><td>上記以外</td> <td>午前10:00</td> <td>午後8:00</td></tr> <tr><td colspan="2">土曜日</td> <td>午後1:00</td> <td>午後10:00</td></tr> <tr><td colspan="2">日曜・休日</td> <td colspan="2">休業</td></tr> </table> </body> </html> Textbook 3 Lesson 6 表

(6)

リスト6-8 table8.html align属性の指定 7 8 9 10 11 12 13 14 15 16 <body> <table border="1"> <caption>営業時間</caption> <tr><th>曜日</th> <th>開店時刻</th> <th>閉店時刻</th></tr> <tr align="right"> <td>月曜∼金曜</td> <td>午前10:00</td> <td>午後8:00</td></tr> <tr align="right"> <td>土曜日</td> <td>午後1:00</td> <td>午後10:00</td></tr> <tr align="right"> <td>日曜・休日</td> <td colspan="2" align="center">休業</td></tr> </table> </body> </html> align属性は<tr>タグに指定することも<td>タグに指定することも，そして必要ならば<th>タグに指定することもできます。この例では，11-13行目<tr>タグに指定して，表の２行目から４行目のすべての要素を右寄せ（right）に指定する一方で，「休業」を囲む<td>タグでセンタリング（center）を指定しています。「休業」の部分については，<td>タグに付いているalign="center"の指定がなければそれを囲む<tr>タグの指定align="right"が効いて右寄せになってしまうのですが，より内側にある<td>での指定が有効になってセンタリングされます。

●表全体の位置指定

̶

<table align="...">

上の例では，各項目の位置を指定しましたが，表全体の横方向の表示位置を指定することもできます。これには，<table>タグにalign属性を指定すればよいのです。リスト6-8の<table>タグにalign="center"を追加すると図 6-9のようになります。

●表機能を使った図の整列

さて，<table>...</table>の中にはさまざまな要素を並べることができます。たとえば，<img>タグを中に入れると図6-10のような写真のページを作ることができます。このコードはたとえば，リスト 6 - 9 のようになります。 <td>...</td>の中に<img>タグで写真のファイルが指定されていることに注意してください。この例では，HTML ファイルtable9.htmlと同じフォルダの中に，no1.jpg， no2.jpg，...という名前の画像ファイルが置かれています。サポートページにありますので，実際に表示してみてください。図6-9 <table>タグにalign="center"を指定図6-10 画像の整列

●横方向の位置合わせ ̶ align="..."

これまでは表示されるデータそのものの指定方法を学びましたが，個々の要素や表全体についての位置揃えなど細かなことについて見ていきましょう。<tr>...</tr>， <th>...</th>， <td>... </td>やcolspan，rowspanの指定で，各升目に入れるデータを決めたら，セル内のデータの表示位置を調整して見やすい，心地よい表を作ります。HTMLの表では，データのセル内での水平方向（左右）および垂直方向（上下）の位置を指定するオプションが用意されています。前に見たリスト6-5（図6-5）の例に少し手を加えてみましょう。図6-5では見出し行がセンタリングされているのはよいのですが，そのほかの行は左揃えになっています。<td>タグでは属性を何も指定しないと，各欄のデータは左揃えで表示されるわけです。これを図6-8のようにしてみましょう。曜日の各欄や時刻は右揃えになっていた方が何となく見栄えがよさそうですし，「休業」は真ん中に書かれていた方が収まりがよさそうです。このためには，たとえばリスト6-8のように<td>タグの align属性を指定します。align属性はすでに<h1>タグや <img>タグなどの属性として登場しましたが，同じ使われ方です。図6-8 セル内の横位置の指定 Textbook 3 Lesson 6 表

(7)

さらに，リスト6-10のように，<img>タグをリンクタグ <a>...</a>で囲むことにより，写真自体をリンクにすることもできます。このリストの例ではimages-bigというフォルダに置かれた写真にリンクされており，クリックすると，より大きな写真が表示されます。サポートページで試してみてください。リスト6-10 table10.html 写真をリンクにする 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <body> <h1 align="center">夕焼けの富士</h1> <table border="0" align="center">

<caption>クリックすると大きな写真が表示されます</caption> <tr align="center">

●縦方向の位置指定

さて，写真などの画像を表を使って並べる方法を学んだ所で，簡単な画像を使って，セル内の縦方向の位置指定の方法を説明しましょう。align="..."は横方向の位置指定でしたが，valign= " ... " （verticalのv）でセル内の縦方向の位置の指定ができます。valign= " top " で上，valign= " bottom " で下になります。中央に表示するには，何も書かないかvalign="middle"を指定します。リスト6-11をブラウザに読み込むと，図6-11のように表示されます。リスト 6 - 1 1 では，この H T M L ファイル（table11.html）と同じフォルダにあるbutton.gifという画像を各セルの違う位置に並べています。align= " ... " と valign= " ... " を組み合わせていることに注意してください。また，<table border= " 10 " >として，外枠を太くしてみました（中に書かれる罫線はこれでは太くはなりません）。 _{図6-11 セル内の位置指定のまとめ} リスト6-9 table9.html 表機能を使って写真を並べる 7 8 9 10 11 12 13 14 15 <body>

<table border="0" align="center"> <caption>夕焼けの富士</caption>

</body> </html>

(8)

●表の幅とセルの幅

̶

width="..."

ここまでに作成した表では，表全体の幅や表中の各セルの幅はブラウザが決めてくれるままにしました。どんな環境で表示されても大丈夫なようにするためには，このようにブラウザまかせにしておくのが最良の策です。しかし，パソコン用のページと携帯用のページを分けて作るときなどには，表の幅やセルの幅をもっと細かく自分で決めたいという場合もあるでしょう。それには， <table>タグや<th>，<td>などのタグにwidth属性を指定します。 <table>タグには，表の幅を指定するwidth属性があります。width属性の値としては，ピクセル単位で幅を指定するほかに，現在の画面幅に対する相対的な幅を指定することもできます。width= " 50% " ，width= " 75% " といった具合に指定でき，ウィンドウの横幅を変えると，表の大きさも変わります。図6-12は，先ほどの図6-11の<table>タグにwidth= " 90% " を指定した例です。サポートページからたどってこのページを表示して，ブラウザウィンドウの横幅を変更して確かめてみてください。これに対して，width="640"のようにピクセル単位で幅をしてすると，ブラウザウィンドウの横幅を変更しても，表の大きさは変わらなくなります。表の横幅よりもウィンドウの横幅の方が小さくなると，横方向のスクロールバーが表示されるはずです。図6-12 表全体の幅を%で指定図6-13 表全体の幅をピクセル単位で指定。幅が足りないと横スクロールバーが表示されるリスト6-11 table11.html 位置指定のまとめ 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <body>

<caption>セル内の位置指定のまとめ</caption> <tr> <th></th> <th>左揃え</th> <th>センタリング</th> <th>右揃え</th> </tr> <tr> <th>上</th>

<tr>

<tr>

</table> </body> </html>

(9)

図6-14 セルの幅を指定リスト6-12 table12.html セルの幅の指定 7 8 9 10 11 12 13 14 15 34 35 36 <body>

<table width="640" border="10" align="center"> <caption>セルの幅を指定</caption> <tr> <th width="16%"><br></th> <th width="28%">左揃え</th> <th width="28%">センタリング</th> <th width="28%">右揃え</th> </tr> ... ... </table> </body> </html> width属性を<table>タグで指定すると表全体の幅になりますが，<th>，<td>，<tr>などのタグで指定すると，それぞれの升目（セル）の幅を指定することができます。リスト6-12（図6-14）は上の図6-13の一番上の行を表す <th>タグにwidth属性を指定したものです。図6-12や図 6-13では，「センタリング」の列の幅が他の列よりも大きくなっていますが，図6-14では「左揃え」「センタリング」「右揃え」のセルの幅は同じになっています。同じ列に表示されるセルは複数ありますので，同じ列として表示される別の<th>や<td>で別の値を指定することもできてしまいます。たとえば，「左揃え」の欄には<th width= " 20% " >と指定しながら，その下の欄では<td width="40%">などと指定した場合です。このような場合は，ブラウザが「適当に処理してくれる」ようです。しかしその挙動は予想できませんので，こういった指定はしないようにしましょう

●セルの背景色の指定

Lesson 5で色の指定方法を学びましたので，セルの背景色の指定方法も見ておきましょう。表のセルの背景色の指定を使うと図6-15（リスト6-13）のような「カラーテーブル」を作ることができます。いろいろな色を加えれば，前のLessonで見た表5-1と同じ表を作ることもできます。ページ全体の背景色と同じように，セルの背景色も bgcolor属性を使って指定します。行全体に同じ背景色を用いたい場合は，<tr>タグの属性として指定することもできます。図6-15では見出し行の背景を薄い灰色にしています。セルのひとつひとつの色を指定するには<td>タグに指定します。図6-15 カラーテーブルリスト6-13 table13.html セルの背景色の指定 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body>

<table align="center" width="90%" border="1"> <caption>カラーテーブル</caption>

<th width="20%">色名</th> <th width="20%">名称指定</th> <th width="20%">RGB指定</th> <th width="40%">色</th> </tr> <tr><td>白</td> <td>white</td> <td>#FFFFFF</td> <td bgcolor="#FFFFFF"></td></tr> <tr><td>赤</td> <td>red</td> <td>#FF0000</td> <td bgcolor="#FF0000"></td></tr> <tr><td>黄</td> <td>yellow</td> <td>#FFFF00</td> <td bgcolor="#FFFF00"></td></tr> <tr><td>緑</td> <td>green</td> <td>#00FF00</td> <td bgcolor="#00FF00"></td></tr> <tr><td>水色</td> <td>aqua</td> <td>#00FFFF</td> <td bgcolor="#00FFFF"></td></tr> <tr><td>青</td> <td>blue</td> <td>#0000FF</td> <td bgcolor="#0000FF"></td></tr> <tr><td>黒</td> <td>black</td> <td>#000000</td> <td bgcolor="#000000"></td></tr> </table> </body> </html> Textbook 3 Lesson 6 表

(10)

□<td>...</td> ̶ ひとつのデータ（セル）の記述 □<th>...</th> ̶ 見出しの記述 □border ̶ 罫線の幅を指定する □align ̶ 表全体，あるいはセルの横方向での位置指定 □valign ̶ セルの上下方向の位置指定 □width ̶ 表全体あるいはセルの幅を指定 □colspan ̶ 複数の列にまたがる場合の指定 □rowspan ̶ 複数の行にまたがる場合の指定 □bgcolor ̶ 背景色を指定する

●まとめ

このLessonでは，HTMLの表機能の基本的な事柄について説明しました。自分でいろいろな表を作って練習してみてください。

■HTMLのタグなど

□<table>...</table> ̶ 表の開始と終わり □<caption>...</caption> 表題（キャプション）を指定 □<tr>...</tr> ̶ １行（横の１列）の記述 Textbook 3 Lesson 6 表

(11)

●文字に対するスタイル指定

HTMLにおいて，文字に対して「スタイル」を指定する方法には「論理スタイル指定」と「物理スタイル指定」の２種類があります。

●論理スタイル指定

論理スタイルを指定するタグは，パラグラフや見出しなどと同様，テキストの持つ意味を指定するもので，どう表示されるかを指定するものではありません。論理スタイルタグを指定した場合，指定されたテキストの表示方法（太字にする，イタリック体にする，その他の飾り文字にする）はブラウザにまかされています。したがって指定のテキストが必ず太字やイタリック体になるとは限りませんし，それを前提とした書き方をしてもいけません。文字のスタイルを指定するタグは，それぞれ開始タグと終了タグを持ち，間に挟まれたテキストに作用します。論理スタイルタグはいくつかありますが，一般の人がよく用いるのは次の２つでしょう。 □<em>...</em> ̶ 文字が何らかの方法で強調（empha-size）されることを示します。多くのブラウザでは，イタリック体で表示されます。 □<strong>...</strong> ̶ <em>よりさらに強調の度合いを強くしたい場合に用います。<strong>を指定したテキストは，太字などを使って表示されます。リスト7-1（図7-1）にこの２つのタグを使った例を書きました。

MEMO

英語の文章を書いているときにはよいのですが，日本語には強調する際に斜体（イタリック）にするという習慣はありませんので，強調に<em>...</em>を使っていいものかは悩ましいところです。Textbook 4で紹介する「スタイルシート」の機構を使えば，見栄えを自分で制御することができますので，そちらを利用する方がよいかもしれません。図7-1 論理スタイルタグの指定

Lesson 7

テキストの修飾

このLessonでは文字の大きさや太さなどの「スタイル」の指定方法など，文字の外観や文字の並び方に関連するタグをいくつか紹介していきます。このLessonにはタグがたくさん登場しますが，一度に全部覚える必要はありません。HTMLを使ってどのような指定が可能なのかを把握し，後で参照できるようにしておいてください。このLessonで紹介するタグはウェブページの見え方（見栄え）を指定するものですが，前に説明したように，HTMLは本来ドキュメントの構造だけを指定するものであり，見え方に関する指定は「スタイルシート」という機構を使うという方向に動いています。ですから，自分でページを作る場合は，当面見栄えの指定にはあまりこだわらずにおく方がよいでしょう。他人の作ったページのHTMLコードを読む場合（あるいは翻訳したりする場合）は，この章で学ぶ内容が重要になります。リスト7-1 logical-style.html 強調 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<head>

<title>文字の強調</title>

(12)

●物理スタイルタグ

論理スタイルタグの他に，テキストのスタイルを直接指示するタグ ̶ 物理スタイルタグ ̶ があります。論理スタイルタグと同様，物理スタイルタグも開始タグと終了タグが対になっています。次の３つはかなり以前から一般的な文書でもよく使われています。 □<b>...</b> ̶ 太字（ボールド） □<i>...</i> ̶ イタリック体 □<tt>...</tt> ̶ 固定幅の文字（タイプライタフォント）次のようなタグも最近では一般的になっています。 □<u>...</u> ̶ 下線つき □<strike>...</strike>あるいは<s>...</s> ̶ 横線抹消 □<big>...</big> ̶ 周囲より大きな文字 □<small>...</small> ̶ 周囲より小さな文字 □<sub>...</sub> ̶ 下付き添字（周囲より下げて表示） □<sup>...</sup> ̶ 上付き添字（周囲より上げて表示）物理スタイルタグを使った場合，環境によってはブラウザはそれを扱えず，別のスタイルで代用したり，まったくスタイル指定を無視してしまうこともあることに注意しておいてください。次のように文字修飾用のタグを入れ子にすることも可能です。この例では，太字とイタリック体を同時に指定しています。 <b><i>このテキストは太字かつ斜体です</i></b> しかし，表示方法はブラウザによって変わるので，太字かつイタリック体のテキストが表示されるという保証はありません。片方だけが有効になる可能性もあります。たとえば多くの携帯電話のブラウザではどちらの指定も無視されてしまいます。

●整形済みテキスト

前に説明したように，HTMLファイル内にあるスペース，タブ，改行（これらをまとめて「ホワイトスペース」と呼ぶことがあります）はそれが要素間の区切りを表すものでない限りブラウザによって無視されてしまいます。しかし，あらかじめ整形されたテキストを表すタグ<pre> を使った場合は例外です（preはpreformattedの略）。 <pre>と</pre>に囲まれたテキスト中のホワイトスペースは，最終的な出力でもそのまま保持されます。つまり，このタグを使えばスペースなどを使って形を整えておいたテキストをそのまま表示できるわけです。いわゆる「等幅フォント」で表示されることになっているので，わかりやすく字下げをしたHTMLやプログラムのコードなどに最適です。また，スペースで桁を合わせることができるため，<pre>タグを使って表を作ることもできます。ただし，必ずしも美しいというわけには行きません。表を作りたいのならば，<table>タグを使った方がよいでしょう。 <pre>タグを使った例をご覧に入れましょう。図7-2はリスト7-2を読み込んだものです。リスト7-2の1-6行目はタイトルを除いてリスト7-1と同じですので省略します。図7-2 整形済みテキストリスト7-2 preformatted.html 整形済みテキスト 7 8 9 10 11 12 13 14 15 16 17 18 <body> <h1> preタグの使用例</h1> <pre> 北海道東北北陸関東中国近畿中部九州沖縄 </pre> </body> </html>

MEMO

<pre>...</pre>の中のタブ文字は注意して使う必要があります。タブ文字の次の文字がどこに来るかは，ブラウザごとに異なっているのです。あるブラウザは４文字ごとにタブ位置がありますが，別のブラウザでは８文字ごとだったりするのです。タブによる位置指定を使っている場合には，代わりに空白文字だけで位置を揃えるようにしてください。

●

強制

改行

<br>タグは改行（break）を指定するもので対応する終了タグはありません。ブラウザは，<br>タグがあると改行してから，それに続くテキストを表示します。<p>タグと違って行間を余分に空けたりはしません。<br>タグは，パラグラフ，リストなど他のタグの中に入れることができます。図7-3（リスト7-3）は<br>タグを使った例です。図7-3 強制改行 Textbook 3 Lesson 7 テキストの修飾

(13)

こうしたことがありますので，たとえウェブエディタを使う場合でも，ある程度HTMLの知識を持っていた方がよいのです。そうすれば，自分でコードを修正して問題を回避できます。HTMLの知識がまったくなければ，どう修正してよいかわからないのですから。図7-4 強制改行の誤用（１）図7-5 強制改行の誤用（２）リスト7-4 break-bad.html 強制改行の誤った使い方 7 8 9 10 11 12 13 14 <body> 通学講座ではウェブページ（ホームページ）に関する文書を翻訳しながら，<br> ウェブページの作り方の基本を学びます。ホームページの翻訳を仕事として<br> 受注できるのに十分な知識を学びます。Webページ作成用の言語であるHTML<br> の基本のほか，サウンド，画像，ビデオなどの基礎知識，それにJavaScriptや<br> Javaなどを使って作ったプログラムの簡単な利用法などを学びます。 </body> </html> リスト7-3 break.html 強制改行 7 8 9 10 11 12 13 14 15 16 <body> <h1>改行</h1> <p> 俳人小林一茶は生涯に約二万の俳句を残しているそうである。一茶の代表的な句をいくつかあげてみよう。 <p> 我ときて遊べや親のない雀<br> 痩せ蛙負けるな一茶ここにあり<br> 目出度さもちう位也おらが春<br> </p> </body> </html>

CAUTION!

ときどきリスト 7 - 4のように，改行をするのにいつも < b r > タグを用いているページに出会うことがあります。図7-4のように表示されますので，とくに問題がないように見えます。しかし，たとえば，図7-5のように視力の弱い利用者が文字の大きさを変更したり，ブラウザウィンドウの大きさを変更したり，あるいは画面の小さな携帯情報端末（PDA）などで見たりすると，図7-5のようにおかしなところで改行されていて読みにくく，また醜くなってしまいます。困ったことに，一部のウェブページ作成支援アプリケーション（ウェブエディタ）では，設定によって，このようなページを平気で作るようになっています。したがって，ウェブエディタを使って書く場合は，できるだけ多くのブラウザで自分の作ったページを確認し，ウィンドウや文字の大きさを変えてみても意図した通りに表示されることを確認するようにしてください。

●短い引用と長い引用 ̶ <cite>と<blockquote>

<cite>...</cite>を使うとテキスト中に埋め込まれた短い引用を指定できます。また，<blockquote>...</blockquote> は独立した段落になったブロックの引用に使われます。その内容は通常，字下げなどによって，普通のテキストと区別されます。リスト7-5（図7-6）に例を示します。この例にあるように<p>...</p>の中と同様，改行を入れるには改行タグ < b r > を使います。じつは図 7 - 3 の例は <blockquote>を用いた方がよかったのです。リスト7-5 quote.html 引用 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body> <h1>引用</h1> <p> 俳人小林一茶の句の中で一番有名なのは<cite>痩せ蛙 </cite>の句であろうか。しかし，一茶はなんと生涯に約二万の俳句を残しているそうである。代表的な句をいくつかあげてみよう。 <blockquote> 我ときて遊べや親のない雀<br> 痩せ蛙負けるな一茶ここにあり<br> 目出度さもちう位也おらが春<br> 我ときて遊べや親のない雀<br> </blockquote> </body> </html>

MEMO

< c i t e >タグで囲まれた部分のテキストは，多くのブラウザではイタリックで表示されます。日本語では引用部分は括弧（「. . .」）などを使って表すのが普通ですので，強調の<em>タグの場合と同様，これもちょっと困ってしまうところです。 Textbook 3 Lesson 7 テキストの修飾

(14)

図7-7 タグをブラウザで表示するには... 図7-8 タグを表示するには文字符号を使うリスト7-7 special-chars2.html 特殊文字の表示（2） 7 8 9 10 11 12 13 14 15 16 <h1>特殊文字</h1> <p> <cite>タグで囲まれた部分のテキストは，多くのブラウザではイタリックで表示されます。日本語では引用部分は「...」などを使って表すのが普通ですので，強調の<em>タグの場合と同様，これもちょっと困ってしまうところです。 </blockquote> </body> </html>

MEMO

文字符号としては分類されていないようですが，「 」という文字列を書くと空白をあけることができます。普通の（半角）スペースはいくつ連続させてもひとつ分しか表示されませんが，「 」を連続して書くと個数分の空白がとられます。

●ブロック単位の揃え指定

<div>タグを使うと，さまざまな要素に対してまとめて位置指定をすることができます。<div>...</div>の中には好きな数だけ見出し，段落などが入れられ，それらにはすべて<div>タグのalign属性による位置揃えが適用されます。この方法には次のような長所があります。 □ <div>の１箇所だけに揃え指定すれば済むので，各要素にすべて揃えを指定するより楽である。 □ align属性をサポートしていない要素にも適用可能である。リスト7-8（図7-9）に例を示します。

●特殊文字

ウェブページの中で，「<」や「>」などタグに使われる文字を表示したいときがあります。たとえば，上の MEMOの文章をウェブページに書こうとしてリスト7-6 のようなページを作ったとします。すると，このページは図7-7のように表示されてしまいます。リスト7-6 special-chars.html 特殊文字の表示（１） 7 8 9 10 11 12 13 14 15 <h1>特殊文字</h1> <p> <cite>タグで囲まれた部分のテキストは，多くのブラウザではイタリックで表示されます。日本語では引用部分は「...」などを使って表すのが普通ですので，強調の<em>タグの場合と同様，これもちょっと困ってしまうところです。 </blockquote> </body> </html> これは，「<cite>」の部分をブラウザが自分への命令だと解釈してしまったためにおこります。したがって，タグ自体をブラウザで表示するには，何らかの方法で「<」や「>」をタグの一部としてではなく，普通の文字として扱うように指示する方法が必要になります。 HTMLでは，「文字符号（character entity）」と呼ばれる特別な書き方が用意されており，これを使って特殊な文字の入力や表示ができるようになっています。文字符号には，名前符号（named entity）と番号符号（num-bered entity）の２種類があります。名前符号は「&」ではじまり，次に文字の名前（あるいはその省略形）がきて，「;」で終わります。この名前は，すべて小文字で書きます。番号符号も「&」ではじまり「;」で終わりますが，名前の代わりに「#」と番号を書きます（この番号はそれぞれ文字に対応しているものです）。次に主な文字について，名前符号と番号符号を示します。名前符号番号符号表示される文字 < < < > > > " " " & & & &copy © © ® ® ® é é é ö ö ö 「<」「>」「 " 」など，タグや属性の一部として用いられる文字や，éやöなど西欧言語でよく用いられる文字には名前符号が用意されていますが，番号符号だけしかない文字もあります。文字符号の一覧は，たとえばhttp:// www.htmlhelp.com/reference/html40/entities/などにあります。図7-7の例は文字符号を使って，たとえばリスト7-7のようにすれば，タグを表示することができます（図7-8）。 Textbook 3 Lesson 7 テキストの修飾

(15)

図7-9 <div>タグを使った位置揃え <div>...</div>の中にあるすべての要素は<div>タグの align属性で指定した揃えになります。ただし，個別の要素に対してalign属性を指定した場合はそちらが優先されます。注意して欲しいのは，<div>...</div>自体は意味を規定しないブロックであり，段落でも何でもないということです。ですから，その中に < p > ， < h 1 > ， < u l > ， <blockquote>など通常の要素タグを入れて使う必要があります。なお，似た機能をもつものとして<center>...</center>があります。これは<div align= " center " >...</div> とまったく同等で，囲まれた要素をセンタリングしてくれます。

●フォントとフォントサイズ

<font>タグを使うと文字の大きさや色，書体（フォント）を指定できます。ただし，何度か繰り返しているように，こういった「見栄え」については，スタイルシートを使うという流れにありますので，自分の作る文書ではあまり使わない方がよいでしょう。 <font>タグには次の３つの属性を指定できます。 □ size ̶ フォントの大きさを1∼7の数値で指定します

（標準の大きさは4です）。<font size= " +2 " >，<font size= " -3 " >のように符号つき数値を指定することで，現在の大きさから何段階か大きく（小さく）するようにもできます。

□ color ̶ 文字の色を指定します。色の指定方法についてはLesson 5で説明したように，<font color="red">のように色名で指定するか，<font color= " #FF00FF " > のようにRGBの値で指定します。 □ face ̶ カンマで区切ったフォント名のリストを指定します。指定した順に利用可能なフォントを探し，最初に見つかったものが表示に使われます。いちばんよく使われるのはやはり大きさの変更でしょう。「+」あるいは「-」付きで指定する方法は，現在の大きさにかかわらず文字サイズを変更できるという利点があります。 <font>タグで大きな文字が出せるからといって，これをテキストの内容を表すタグ（<h1>，<h2>など）や字句の強調などに使うのは避けてください。多くの携帯電話のブラウザや，<font>をサポートしていないブラウザでは通常の段落と同じ表示になり，わけのわからないことになってしまいます。きちんと<h1>...</h1>や<strong>...</ strong>などを使っておけば，ブラウザはその表示能力の範囲内でそれらしく表示してくれます。ですから<font>タグは特殊効果のために最小限使う，というのがよいのです。 face属性では属性値としてはフォント名を「,」で区切って並べたものを指定します。ブラウザは現在動作しているシステムで指定されたフォントが使えるかどうかを，先頭から順に調べて行きます。そして，最初に見つかった利用可能なフォントを使います。最後まで探しても利用可能なフォントがなければあきらめて標準のフォントを使用します。ですから，次の例ではシステムに「MS明朝」という名称のフォントがあればそのフォント，なければ「Hiragino Mincho Pro W3」という名称のフォント，それもなければ標準のフォントが使われます。

<p><font face="MS明朝,'Hiragino Mincho Pro W3'">HTMLでのフォントの指定には注意しましょう。ブラウザ利用者の環境にないフォントは使いようがありませんので。</font></p> face属性は文字サイズよりさらに環境依存性が強いので，注意が必要です。きちんとサポートしていないブラウザも多くありますし，サポートしていてもシステムによって同じような字体が別の名前を持っていたりします。たとえば t i m e s フォントはシステムによっては単に「times」ですが，別のシステムでは「times-roman」，「times new roman」などの名前で呼ばれたりします。ですからfaceの指定は十分注意して使うようにしてください。リスト7-8 block.html <div>タグを使った横位置の指定 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <body> <div align="center"> <h1><div>タグ</h1> <h2>目次</h1> <table> <tr><td align="right"><a href="info.html">会社概要</a></td><td>役員紹介，地図等があります</td></tr> <tr><td align="right"><a href="products.html">製品</a></td><td>弊社の製品のご紹介</td></tr> <tr><td align="right"><a href="contacts.html">ご連絡</a></td><td>ご連絡はこちらから</td></tr> </table> </div> </body> </html> </body> </html> Textbook 3 Lesson 7 テキストの修飾

(16)

□<u>...</u> ̶ 下線つきのテキスト □<strike>...</strike> ̶ 横線抹消のテキスト □<s>...</s> ̶ 横線抹消のテキスト □<big>...</big> ̶ 周囲より大きな字 □<small>...</small> ̶ 周囲より小さな字 □<sub>...</sub> ̶ 下付添字 □<sup>...</sup> ̶ 上付添字 □<pre>...</pre> ̶ 整形済みテキスト □<br> ̶ 強制改行。次の文字を次の行の先頭に表示 □<blockquote> ̶ 段落単位の引用 □<q> ̶ パラグラフの中に挿入される引用 □<cite> ̶ 短い引用 □<div>...</div> ̶ ディビジョン。複数の段落などに関してまとめて位置を指定

□<center>...</center> ̶ <div align="center">...</div> と同じ □<font>...</font> ̶ フォントの指定 □size ̶ 文字の大きさ。1-7の数字，あるいは+1，-2といった形式で □color ̶ 文字の色 □face ̶ 文字の字体。HTML 4.0以降

●まとめ

このLessonでは，文字の修飾をしたり，段落の整形をしたりするタグをまとめて紹介しました。次のリストには，本文に紹介しなかったタグもあげておきましたので，自分で試してみてください。

■HTMLのタグなど

論理スタイルタグ

□<em>...</em> ̶ 強調されたテキスト □<strong>...</strong> ̶ より強調されたテキスト □<code>...</code> ̶ コードのサンプル □<samp>...</samp> ̶ サンプルテキスト □<kbd>...</kbd> ̶ 利用者によりタイプされるテキスト □<var>...</var> ̶ 変数名 □<dfn>...</dfn> ̶ 何かの定義あるいは定義される用語 □<cite>...</cite> ̶ 文献などの引用 □<acronym>...</acronym> ̶ 省略語

物理スタイルタグ

□<b>...</b> ̶ 太字のテキスト □<i>...</i> ̶ イタリック体のテキスト □<tt>...</tt> ̶ タイプライタフォント（等幅フォント）のテキスト Textbook 3 Lesson 7 テキストの修飾

(17)

●色の表現

画像について理解するためには，画像を構成する各点を彩る「色」についても理解する必要があります。まず，コンピューターで色を表現する方法を見てきましょう。色の表現法にはさまざまな方法がありますが，ここでは直感的にわかりやすいHSB方式と，パソコンの画面で色を表すのによく使われるRGB方式という２つの表現方法について説明しましょう。

●HSBモデル

HSBは，人間による色の認識をモデル化したものです。 HSBは，Hue（色相あるいは色合い，色そのもの）， Saturation（彩度，鮮やかさ），Brightness（明度，明るさ）の頭文字をとったものです。人間が色を認識し，色と色の違いを認識するために使われる方式を直感的に記述するモデルです。図8-1にMac OS XのHSBによる色の指定のウィンドウを示します。残念ながらWindowsでは標準でHSBによる色の指定は用意されていないようです。図8-1 Mac OS XのHSBによる色の指定

●色相

色相は絵の具のチューブのようなもので，色そのものを示す属性です。物理的には（色がついている）物体が反射または発光した光の波長によってきまります。一般にがって，赤，黄，青，緑，ピンク，紫などがすべて特定の色相を表すことになります。また，オレンジがかった黄色，青っぽい緑なども色相になります。色相の変化は「色相環」として表現されます。特定の色は色相環で0 から360 の範囲のどこかに置かれます。0 と360 が赤で，黄色が120 ，そして青が240 になっており，他の色はこの間に入ります。図8-1では「環」を赤のところで切って「棒」にした形になっています。一番左が 0 ，一番右が360 を表しています。

●彩度

彩度は色の強さ，つまり混じりけのなさを示します。水色は青と白が混ざったものですが，これに青を加えれば彩度が高くなって，より青に近くなります。彩度も0から 100の割合で表し，0はまったく色のない状態，100がもっとも色が強い状態を指します。彩度が低ければいわゆるパステルカラーになり，高ければはっきりとした色になります。

●明度

明度は，色の明るさを表します。ある色の絵の具に黒や白の絵の具を混ぜると，明度が上がったり下がったりします。明度は，白を0，黒を100とした割合で測定されます。 HSBモデルを使ってひとつの色を指定するには，色相，明度，彩度の3つの数値を指定します。HSBでは「もう少し明るく」「もう少し紫がかかった青に」といったことが，明度や色相の数値にうまく対応付けられており，直感的に色を変化させることができます。また，彩度と明度を同じにして，色相だけを変えていくと同じようなトーンの色が作成できるといった利用法もあります。

●RGBモデル

画像編集プログラムの大多数や，ウェブページ上では HSBモデルではなく，RGBモデルを使います。RGBモデルは，コンピュータの画面に色を表示させる方法に対応したモデルです。画面に表示される各ドットは，従来広く使われてきたブラウン管型の表示装置（CRTディスプレイ）の場合，装置に内蔵されている電子銃が電子ビームを発射し，ビームが表示面に塗ってある蛍光体に当たって，蛍光体が発光することによって色が目に見える仕組みになっています。最近一般的になってきた液晶モニターでは仕組みが違いますが，CRTモニターとほぼ同等の色が表現できるような仕組みになっています。

Lesson 8

色と画像の詳細

Lesson 4で<img>タグを使った画像の配置方法を説明しました。また，Lesson 6では，それを<table>タグを使って並べる方法も見ました。しかし，自分がデジカメで撮った画像をウェブページ用に編集したり，独自のイラストを描いたりするには，ウェブで使える画像に関してもう少し詳しい知識を身につけておく必要があります。このLessonでは画像に関する基本的な事柄を学び，代表的なアプリケーションの利用法を学びましょう。

(18)

化，飛び越し走査（interlace），そして簡単なアニメーションが実現できるアニメーションGIFといった面白い機能も備わっています。 GIFファイルは，ロゴ，アイコン，線画など，どちらかというと単純な画像に適しています。扱える色の数が256に限られるというのが最大の特徴（制約）で，細かな画像には向いていません。たとえば，写真をGIF形式にすると多くの場合やや不鮮明な印象になります。

●JPEG

J P E G （ジェイペグ）形式は， J o i n t P h o t o g r a p h i c Experts Groupという公的なグループが開発した，元々はファイルの容量を小さくして保存する（圧縮する）ための方式ですが，この方式で保存されたファイルの形式のことも慣習としてJPEGと呼んでいます（つまり，JPEG という圧縮方法は画像用のファイルだけでなく，他のファイルについても利用できるわけです）。 JPEGはもともと写真用に設計されたもので，GIFと違い JPEGには色数の制限がありません。また，写真を対象としたときに高い圧縮率が得られるような方法を使っているため，同じ写真をGIF形式で保存した場合よりもファイルがかなり小さくなるのが普通です。一方，線画や同じ色のブロックがたくさんあるような画像に対しては圧縮率があまりよくありません。 JPEGに関して気を付けなければならないのは，ファイルのサイズを小さくするために，情報を少し欠落させている点です。つまり，JPEG形式で画像を保存すると，ファイルのサイズは小さくなりますが，その代わり画像が少し荒くなったりしてしまうわけです（とは言っても，普通の人の目には判断できない程度に抑えておけば実用上は問題ありません）。JPEGは情報が落ちてしまう変換，つまり「非可逆な」変換方法ということになります。このため，一旦画質が落ちた画像を元に戻すことはできません。オリジナルの画像を別に保存しておく必要があります。

●PNG

PNG（ピングあるいはピーエヌジー，Portable Network Graphicsの略）は，グラフィックス関連の専門家とWeb 関連の開発者が設計した比較的新しい形式です。PNG は，おもにGIFの代替形式として考えられているものですが，写真などにも使うことができます。PNGには以下のような特徴があります。 □ 圧縮アルゴリズムが特許の対象となっていない（じつはGIF形式やJPEG形式にはこの問題があり，ブラウザや画像変換アプリケーションの開発者は特許料の支払いを求められているのです） □ JPEG形式と同じ程度の色数の画像を扱える □ 情報が欠落しない（可逆な）圧縮方法を用いている □ 画像がだんだんはっきり表示される「インターレース（飛び越し走査）」機能に対応している □ 背景の「透明化」ができるインターレース機能と背景の透明化については後ほど説明します。 RGBモデルではCRTモニターの原理に対応して，赤，緑，青の3色の強さをそれぞれ0から255までの数値で表すことにより，特定の色を表現します。0 0 0はまったく光がない状態，つまり黒を表し，255 255 255は３色が均等にもっとも強く光った状態，つまり白を表します。黒や白も含めて，全部で256 256 256=16,777,216通りの色が指定できます（ただし，普通の人の目はこれほど多くの色の違いを識別できません）。このように，RGBモデルでは1,677万以上の色が指定できるのですが，コンピュータの表示機構（ビデオカード）の制約から，すべての色を表示できない場合もあります。RGB値それぞれについて0∼255（８ビットで表せる数値）の任意の値を表示できるような場合，そのような表示装置を「24ビットカラー」と呼びます。以前は使われることが多かった，もっと廉価な 1 6 ビットカラー（65,536色）や８ビットカラー（256色）の装置では，指定した色が表示できない場合，できるだけ近い色で代用したり複数の違う色の点を交互に配置して，指定した色に近付けます。ですから，画像で使われている色と，表示装置の能力との間にギャップがあると色が違ってしまうことがあります。 RGBを使ってもHSBを使っても，表現できる色は同じです。色を数学的に記述するのに別の方式を用いているというだけなのです。RGB値で表現できる色はHSB値でも表現でき，変換すればまったく同じ色が得られます。度量衡の単位が違うようなもので，体重をキログラムで測るかポンドで測るかの違いのようなものです。色の変化について考える場合，HSBを使ったほうがRGB を使うよりも直感的で簡単です。しかし，すでに見たように，HTMLの世界では色をRGB値で指定する必要があります。もっとも，多くの画像編集ツールでは，RGBでもHSBでも色を指定できるようになっています。

●ウェブ上で使われる画像の形式

色について基本的なことを学びましたので，今度は色の点が集まってできる画像について見ていきましょう。パソコン上に表示する場合も，プリンタで印刷する場合も，最終的に画像はすべて色の付いた点の集まりとして表現されます。この点の集まりを記憶するにはさまざまな方法があります。ここではウェブページに使われる３つの形式について，詳しく見ていきましょう。

●GIF

GIF（ジフ，CompuServe GIFとも呼ばれます）は，ウェブ上で一番古くから使われている画像形式です。GIFは， Graphics Interchange Format（グラフィックス交換フォーマット）を略したもので，異なるコンピュータ環境における画像交換を簡単に行えるよう，米国のパソコン通信会社CompuServe（1997年にAOLが買収）が開発したものです。 GIFには，オリジナルのGIF87とGIF89aという２つの形式がありますが，ほとんどのブラウザは新しいGIF89aに対応していますので，通常GIFというとこちらを指すことになります。GIF89aには背景（background）の透明 Textbook 3 Lesson 8 色と画像の詳細

(19)

●画像の縮小

Lesson 6で写真を表機能を使って並べましたが，デジカメで撮った写真を公開しようとすると，そのままではウェブ用には大きすぎるという問題があります。画像処理ソフトを使うと簡単にサイズの調整ができます。たとえば，IrfanView32では「画像」メニューの「リサイズ/リサンプル」という項目を選択すると，図8-3のようなダイアログボックスが表示されるので，画像の大きさをピクセル単位で指定したり，オリジナルの画像との割合で指定したりして，「OK」をクリックすると変更された大きさの画像になります。

●一括変換

IrfanView32など多くの画像処理ソフトウェアには「一括変換」という機能があり，たとえばある所で撮った写真をすべて同じ大きさに縮小するといったことが簡単にで

●画像の形式とカラーマップ

GIFでもJPEGでも，そしてPNGでも，色を表すにはRGB の値，つまり0から255の３つの数値を使います。GIF形式では保存の際に合計で256色しか使えないのに対して， JPEGやPNGでは保存する色の数に制限はありません。 G I F 形式では，色の情報は「カラーマップ（ c o l o r map）」と呼ばれる表の形で保存されています。カラーマップは256個までの色のタイルが集まったようなもので，各ピクセルの色はカラーマップにあるタイルのどれかに対応しています。つまり，各ピクセルは色に付けられた0∼255の番号で表され，カラーマップが色番号とRGBモデルの色指定との対応付けを行います）。ですから，カラーマップのタイルの色を変えてしまうと，画像中でそのタイルを使っているピクセルすべての色が変わります。 GIF形式では，256色（あるいはそれより小さい）カラーマップを持ちます。つまり，最高でも256色の画像しか保存できないわけです。画像をGIF形式に変換すると，通常は画像で使われている色数を256以下に減らさなければなりません（そして，機能の豊富な画像編集プログラムの場合には，どの色を無視するかを指定できるようになっています）。何も256色全部を使う必要はありません。通常は使う色が少なければ少ないほどファイルの大きさは小さくなります。図8-2はIrfanView32というWindowsのアプリケーションでGIF画像を開いて，そのカラーマップを表示したものです。この画像では小さなウィンドウに表示された256の色が使われています。なおカラーマップは，カラーテーブル，インデックスカラー，パレット，カラーインデックス，カラールックアップテーブルなどとも呼ばれますが，これらはすべて同じもので，いずれも画像中で使われている色の一覧を表します。

●ウェブ用の画像処理

画像について基本的な事柄を学んだところで，ウェブページを作る際に必要となる画像処理をいくつか実行してみましょう。これを行うためには画像処理アプリケーションが必要です。Adobe Photoshopは超有名で高機能のソフトウェアですが，入手にはかなりの費用がかかります。そこで最初は，無料あるいは安価で利用できるソフトウェアを使ってみるのがよいでしょう。個人的には， Windows用にはIrfanView32（http://www8.plala.or.jp/ kusutaku/iview/から日本語化されたものがダウンロード可能），Mac OSではGraphic Converter（http:// www.lemke soft.de/）がおすすめです。IrfanView32は個人的に使う場合には無料で利用できます。Graphic Converterは試用ができ，気に入れば30ドル出して購入する必要があります。以下の説明では，IrfanView32を例にして見ていきましょう。 Textbook 3 Lesson 8 色と画像の詳細図8-2 カラーマップの例図8-3 一大きさの変更

(20)

きるようになっています（この機能はGraphic Converterにもあります）。「一括変換」を行うには「ファイル」メニューの「一括変換形式/名前」を選択します。図8-4のようなダイアログボックスが選択されますので，画像のあるフォルダに移動し，変換したいファイルを選択します。サイズ変更後のファイルを置くフォルダは「参照」ボタンを押して指定しておきます（この例では C:¥TEMPを指定しています）。サイズを指定するには右下の「詳細設定」のボタンをクリックします。すると図8-5のような新しいダイアログボックスが表示されるので，ここで大きさを指定します。大きさの設定が終わったら「OK」ボタンを押して２つ目に表示された「詳細設定」のダイアログを閉じて前のダイアログに戻り，「実行」ボタンをクリックします。これで実行が始まり，しばらくすると選択したすべての写真に対応した縮小版の写真のファイルが，指定したフォルダにできているはずです。

●JPEG画像の圧縮率の変更

JPEG形式で保存された高画質の写真などはかなりのサイズになります。ブロードバンドが一般的になったとはいえ，余り大きなファイルを大量に使うのは感心しませんので，画質がそれほど落ちない範囲で画像を圧縮してファイルのサイズを小さくするのがよいでしょう。 JPEG形式では「圧縮率」を変えて画像を保存することができます。IrfanView32の場合，「ファイル」メニューから「名前を付けて保存」を選択し，表示されるダイアログボックスの下部中央にある「設定ダイアログを表示」の項目を選択すると，「JPEG/GIF保存設定」という小さなウィンドウが表示されます。ここで「保存画質」を選択することができます。この数値を90とか80とかに設定すると，それほど質を落とさずにファイル容量をかなり小さくできます。それほど質にこだわらない写真ならば 50程度にしても大丈夫でしょう。あまり，画質を落とすと画像全体に縞模様が出てしまいますので注意が必要です。 JPEG形式で画像ファイルを保存する場合は，いくつかの圧縮レベルを試してみて，満足できる画像の質で最小の大きさになるものを選択するとよいでしょう。なお，一括変換の機能を使うと，複数のファイルに対して圧縮率を指定して変換を行いファイルサイズを小さくすることができます。 Textbook 3 Lesson 8 色と画像の詳細図8-4 一括変換の準備図8-5 一括変換の大きさの指定図8-6 JPEGの圧縮率の指定