03 はじめてのホームページ　画像をHTMLで配置とCSS

2020年4月3日2024年12月25日

URLをコピーしました！

画像をHTMLで配置する方法

3回目の講座では、画像の配置について学びます。HTMLでは、画像は埋め込むのではなく、リンクとして表示されます。そのため、画像ファイルをHTMLファイルと同じフォルダに保存し、HTML内でそのファイルを読み込んで使用します。

例えば、画像が多いページでは、1つのHTMLファイルに対して10個以上の画像を使うこともあります。その結果、フォルダ内にたくさんのファイルが混在し、ごちゃごちゃしてしまうことも。

このような混乱を防ぐために、フォルダの整理整頓がとても大切となります。

今回使うHTMLコードの確認

今回も前回と同様に、index.htmlファイルを使います。
「index.html」が保存されているフォルダに、使用する画像ファイルを事前に入れておきましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題 </title>
    <style>
        body {
            background-color: #FAFAD2;
        }

        h1 {
            background-color: #87CEEB;
            color: #DC143C
        }
    </style>
</head>

<body>
    <h1>ECOLOGY 【エコロジーへの取り組み】</h1>
    <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
        Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
    </p>
    <p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
    </p>
    <p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p>
</body>

</html>

画像をHTMLに表示する方法

index.htmlファイルを作成したら、その中に画像を表示するコードを追加します。
画像を表示するには、<img>要素を使います。
注意点：
ホームページはインターネット上に公開されるため、HTMLファイルに画像データを直接埋め込むのではなく、画像は別ファイルとして保存し、リンクで呼び出すのが一般的です。
<img>要素には以下のように書きます：
- src属性は、画像ファイルの場所を指定するためのものです。ファイル名は「green.jpg」のように拡張子を含めて記述します。

<img src="ファイル名">

例えば、画像ファイル「green.jpg」を表示するコードは以下のようになります

<p><img src="green.jpg"></p>

インライン要素とは
画像はインライン要素に分類されるため、今回の例では<p>要素（段落）内に記述しています。
<p>要素を使うことで、画像に前後の余白が追加され、見やすく表示されます。

他のインライン要素は下記のページで解説しています。

画像が別フォルダにある場合

画像は整理整頓のため、別のフォルダに格納されている場合は通常です。画像がHTMLファイルより下の階層のフォルダに保存されている場合は、以下のようにフォルダ名を入れて/（スラッシュ）で区切ります。

<img src="フォルダ名/ファイル名">

例えば、画像が「images」というフォルダに保存されている場合は、images/　を画像の前に追加します。

<img src="images/green.jpg">

画像は下記の画像の上で右クリック＞名前をつけてファイルを保存しましょう。ファイル名は「green.jpg」とします。ファイルは、ホームページ練習の03のフォルダに設置しておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題 </title>
    <style>
        /* ここにCSSを追加してみましょう */
        body {
            background-color: #FAFAD2;
        }

        h1 {
            background-color: #87CEEB;
            color: #DC143C
        }
    </style>
</head>

<body>
    <h1>ECOLOGY 【エコロジーへの取り組み】</h1>
    <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
        Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
    </p>
    <p><img src="green.jpg" alt="緑色のサンプル画像"></p>
    <p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
    </p>
    <p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p>
</body>

</html>

画像名を間違えたり、階層が異なると下記のような表示になりますので注意しましょう。

アクセシビリティでは推奨となっているalt 属性

アクセシビリティでは推奨となっているalt 属性は、画像の説明文の入力する部分です。画像の説明文を代替テキストと呼びます。

<p><img  src="ファイル名" alt="画像の説明文"></p>

alt属性に、極力画像に、代替テキストを入力するように心がけましょう。

画像の説明をする「alt属性」とは？

アクセシビリティの観点から、画像に**alt属性**を設定することが推奨されています。
alt属性とは、画像の説明文を入力するための部分で、この説明文を「代替テキスト」と呼びます。

画像が何らかの理由で表示されない場合に、代替テキストがその画像の内容を伝える。
画面読み上げソフトが代替テキストを読み上げ、視覚障害のあるユーザーにも画像の内容を伝える。

次　04講座でclassを学ぼう

03HTMLとCSS　画像を設定するマークアップ動画

よかったらシェアしてね！

URLをコピーしました！

03 はじめてのホームページ 画像をHTMLで配置とCSS