5.画像とテーブルで表現力アップ

1. なぜ、画像とテーブルの扱いを学ぶのか、その理由

前回は、「リンクを張って回遊性を高める」方法を学びました。今回は、画像をWebに表示する方法を学びましょう。

当社の新人エンジニア研修でも、画像の知識は重要です。なぜなら、データベースにある商品情報の一覧を取り出したとしても、文字だけだとユーザーにアピールできないからです。

また、テーブルは商品の情報などデータベースから取得して一覧表示するときなどに必要です。

2. 画像の貼り方

画像を挿入するにはimgタグを使います。

“img”は【image】の略です。

＜ソースコード＞

<html>
    <head>
        <meta charset="UTF-8">
        <title>img1.html</title>
    </head>
    <body>
        <p><img src="mtFuji.jpg"></p>
    </body>
</html>

src属性の属性値にその画像名を指定します。“src”は【source】の略です。今回は例として画像名をmtFuji.jpgとしています。ちなみに、imgタグに閉じタグはありません。

ブラウザで確認してみましょう。

＜アウトプット＞

https://saycon.co.jp/html/img.html

少し大きすぎましたね。ということでサイズを変更する方法を学びましょう。

2.1 width, height, alt属性

imgタグには属性として幅や高さなどを付けることができます。CSSで設定することもできますが、分かりやすいのでこの方法をオススメします。

＜ソースコード(抜粋)＞

<img src="mtFuji.jpg" alt="富士山" width="300">

“width”または“height”はその名の通り画像の「横幅」と「高さ」を指定します。数値は「px（ピクセル）単位」です。Pixelは、【Picture Element】の略でディスプレイを構成する画素のことです。したがって、表示しているディスプレイによって大きさは異なることになります。単位の"px"は省略できます。

なお、画像の場合は縦横比（アスペクト比）を保って表示するので“width”または“height”のどちらか一方を指定すればOKです。ただし、両方を指定した場合は①横、②縦の順ですのでしっかり覚えましょう。

ブラウザで確認してみます。

＜アウトプット＞

https://saycon.co.jp/html/img2.html

alt属性は、画像が読み込まれなかった際に代わりに表示されるテキストです。【alternate】の略で代わりのという意味です。目の不自由な方向けの読み上げブラウザ等では有効になりますから省略しないようにしましょう。また、SEO【Search Engine Optimization】（検索エンジン対策）にも有効とされています。

2.2 画像リンク

ユーザーに画像をクリックして別ページに遷移させたいときには画像リンクが有効です。バナー広告や製品画像などによく用いられます。

タグは入れ子にすることもできました。したがって、以下のコードは画像リンクになります。

<a href="https://en.wikipedia.org/wiki/Mount_Fuji"><img src="mtFuji.jpg" alt="富士山" width="300"></a>

インライン要素とブロック要素

imgタグはHTML４でいうところのインライン要素です。したがって<img>はブロック要素の中で使い、基本横並びになります。

一方、ブロック要素は要素のまとまりを作る効果があり、基本縦並びとなります。また、一般的なインライン要素は、ブロック要素と違い「width」、「height」、「margin」、「padding」の設定ができません。(左右のpaddingとmarginの設定は可能)

しかし、<img>は「width」、「height」、「margin」、「padding」の設定が可能な、例外的なインライン要素なのです。

3. 背景画像の設定

背景画像はCSSで以下のように設定します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img4.html</title>
        <style>
            body { background-image: url(mtFuji.jpg);}
        </style>
    </head>
    <body>
        <h1 style="color: white">富士山の写真</h1>
    </body>
</html>

なお、これまでの方法で画像の表示を小さくしても画像の容量は変わっていないことに注意してください。もし、スマホなどで撮影した容量の大きな画像ファイルを小さくしたい方にはこちらのサイトを紹介しておきます。

新人エンジニア研修で画像変換ツールを紹介 — https://www.iloveimg.com/ja

4. テーブルのtableタグ

以下のようなテーブルを作りたいとします。

＜アウトプット＞

テーブルを別ウィンドウで表示

（注：このテーブルにはCSSによる装飾がかかっています）

＜ソースコード＞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>このタイトルはブラウザのタブに表示されます</title>
    </head>
    <body>
        <table border ="1">
            <thead>
                <tr>
                    <th>都市名</th>
                    <th>名物</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>名古屋</td>
                    <td>ひつまぶし</td>
                </tr>
                <tr>
                    <td>伊勢</td>
                    <td>赤福</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

上から順に説明します。

テーブルを作るには、tableタグを使います。border ="1"という属性はテーブルに枠線を表示させるためのものです。もしも、0を指定すると見えないテーブルを作ることができますので試してみましょう。

試した結果：

見えないテーブルの用途としては次に学ぶフォームや前回学んだ画像の位置を揃えるのに使えます。（簡易的な方法です。本当はCSSを使う方が好ましいです）

tableタグの中にtheadタグとtbodyタグを作ります。それぞれ【table head】（見出し要素）と【table body】（中身要素）という意味です。

行を作るにはtrタグを使います。“tr”は【table row】の略で、テーブル（表）の横一行を定義する際に使用します。</tr>(table rowの閉じタグ)であたかも改行されたように次の行に移ります。

上のソースコードでテーブルの行数が何行かわかりますか？

あなたの答え：

そうですね。 trタグの数を数えて３行ですね。そのtrタグの中にthタグやtdタグを入れます。thタグは見出し、tdタグはデータです。それぞれ、テーブル・ヘッダー【table header】とテーブル・データ・セル【table data cell】の略です。

上のソースコードでテーブルの列数が何列かわかりますか？

あなたの答え：

そうですね。 trタグの中の tdタグの数を数えて２列ですね。したがって、実際の表と照らし合わせると下図のように考えるとイメージしやすいと思います。

<table>
<thead>
	<tr>	<th>都市名</th>	<th>名物</th>	</tr>
</thead>
<tbody>
	<tr>	<td>名古屋</td>	<td>ひつまぶし</td>	</tr>
	<tr>	<td>伊勢</td>	<td>赤福</td>	</tr>
</tbody>
</table>

tableのイメージ

ちょうど、trの閉じタグ（</tr>）で改行が行われるイメージです。なお、上記のようにテーブルのサイズ指定がない場合は、文字列の長さに応じて自動調整されます。ただし、長い文字列が入るとレイアウト崩れが発生するために以下のいずれかの方法でサイズを指定したほうが良いでしょう。

例題

以下のテーブルは何行何列で表示されますか？

       <table border="1">
            <thead>
                <tr>
                    <th>都市名</th>
                    <th>名物</th>
                    <th>金額</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>名古屋</td>
                    <td>ひつまぶし</td>
                    <td align="right">3,400</td>
                </tr>
                <tr>
                    <td>伊勢</td>
                    <td>赤福</td>
                    <td align="right">760</td>
                </tr>
            </tbody>
        </table>

あなたの答え：