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タグには属性として幅や高さなどを付けることができます。

 ＜ソースコード(抜粋)＞
<img src="mtFuji.jpg" alt="富士山" width="300">

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

なお、画像の場合は縦横比（アスペクト比）を保って表示するので“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タグの数を数えて２列ですね。したがって、実際の表と照らし合わせると下図1のように考えるとイメージしやすいと思います。

<table>
<thead>
 <tr><th>都市名</th> <th>名物</th></tr>
</thead>
<tbody>
 <tr><td>名古屋</td><td>ひつまぶし</td></tr>
 <tr><td>伊勢</td><td>赤福</td></tr>
</tbody>
</table>
図1 tableのイメージ

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

4.1 テーブルの大きさを指定する方法

テーブルの幅を指定する方法には、画面横幅のピクセル数を指定する方法と、画面横幅のパーセンテージを指定する方法があります。

１．ピクセル数を指定する方法

<ソースコード（抜粋）>

       <table border ="1"  width="200">
            <thead>
                <tr>
                    <th>都市名</th>
                    <th>名物</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>名古屋</td>
                    <td>ひつまぶし</td>
                </tr>
                <tr>
                    <td>伊勢</td>
                    <td>赤福</td>
                </tr>
            </tbody>
        </table>
＜アウトプット＞

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

　

4.2 パーセンテージで指定する方法

＜ソースコード（抜粋）＞
<table border ="1"  width="50%">
            <thead>
                <tr>
                    <th>都市名</th>
                    <th>名物</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>名古屋</td>
                    <td>ひつまぶし</td>
                </tr>
                <tr>
                    <td>伊勢</td>
                    <td>赤福</td>
                </tr>
            </tbody>
        </table>
＜アウトプット＞

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

4.3 セルのサイズ指定

なお、データセル一つ一つのサイズを設定することもできます。ただし、異なる値を設定した場合は一番大きい値に統一されます。例えば、以下のように1列目に100と200という異なる幅を設定した場合は200で統一されます。

＜ソースコード（抜粋）＞
        <table border ="1">
            <thead>
                <tr>
                    <th width = 100>都市名</th>
                    <th>名物</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td width = 200>名古屋</td>
                    <td>ひつまぶし</td>
                </tr>
                <tr>
                    <td>伊勢</td>
                    <td>赤福</td>
                </tr>
            </tbody>
＜アウトプット＞

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

4.2 数値を右寄せにする

なお、業務アプリケーションでは金額を扱うことが多く、金額は右寄せで表示するのが半ば常識となっています。そんなときには以下のように「align="right"」と設定します。

＜ソースコード（抜粋）＞

       <table border="1">
            <thead>
                <tr>
                    <th>都市名</th>
                    <th>名物</th>
                    <th width="150">金額</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>
＜アウトプット＞

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

例題1

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

       <table border="1">
            <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>
あなたの答え：

例題2

以下のリンクのようなテーブルを作成してください。

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

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□ 画像を貼るには、imgタグを使う

□ 背景画像を使うには、cssを使う

□ テーブルを作るには、tableタグを使い、その中にtheadタグとtbodyタグを作る

□ trタグが表の1行にあたり trタグの中にthタグやtdタグを入れる

□ trタグの数で行数が決まり、tdタグ（thタグ）の数で列数が決まる

今回は「画像とテーブル」について学びました。

次回からは「フォーム部品でユーザーに入力してもらう」方法について学びます。

新人エンジニア向けHTML講座の一覧に戻る

画像とテーブル（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる