HTML入門:<img>タグで画像を表示させてみよう~

    • このページをはてなブックマークに追加

    公開日:2016年08月09日 最終更新日:2019年09月12日

    目次

    1. 画像を表示してみる

    1.1 <img>タグ

    HTMLで画像を表示するには、<img>タグを使います。"img"はimage(画像)の略称です。

    ●"src”属性
    <img src="画像のURL(ファイル名)">

    <img>タグには、"src”属性を指定します。値には画像のURL(ファイル名)をダブルクオーテーション(" ")で囲って記述します。

    <!DOCTYPE html>
    <html>
    <head>
    <title>画像を表示する</title>
    </head>
    <body>
    <h1>画像の表示</h1>
    <h2>○○寿司</h2>
    <img src="sushi1.jpg">
    </body>
    </html>

    ブラウザーの表示

    image1

    ●"alt”属性
    <img src="画像のURL(ファイル名)" alt="画像の説明">

    "alt”属性には、画像の説明を記述します。通常はここの値は表示されることはありませんが、ブラウザーの設定で画像を非表示にしていたり、何らかの原因で画像が表示されない場合に"alt”属性の値がブラウザーに表示されます。また音声ブラウザーでもこの説明が読み上げられます。

    <body>
    <h1>画像の表示</h1>
    <h2>○○寿司</h2>
    <img src="sushi1.jpg" alt="寿司の写真1">
    </body>

    ブラウザーの表示(画像が非表示の場合)

    image2

    "alt"属性は、画像を表示しないブラウザーなどで、文章に関連付けて画像がどのような配置されているかをわかりやすくテキストや音声で表すためのものです。
    背景やメニューの項目用に用いる画像など文書内で装飾する目的で利用される画像については、"alt"属性には空文字を設定します。

    ▲ページトップへ戻る

    1.2 "title"属性

    "title"属性は、画像に対して補足説明をつけたい時などに使われます。"title"属性の値は、カーソルを画像の上に重ねると「ツールチップ」として表示されます。

    <body>
    <h1>画像の表示</h1>
    <h2>○○寿司</h2>
    <img src="sushi1.jpg" alt="寿司の写真1" title="○○寿司の中トロ">
    <h2>△△寿司</h2>
    <img src="sushi1.jpg" alt="寿司の写真2" title="△△寿司手まり寿司">
    </body>

    ブラウザーの表示

    image3

    ▲ページトップへ戻る

    ●絶対パスと相対パス

    上の例では<img>タグの"src"属性に画像の”ファイル名”を指定しています。ウェブサーバーに配置されている画像ファイルの場所とHTML文書の場所が同じ時はファイル名のみの記述でOKです。ファイルの場所を記述する方式には「絶対パス」と「相対パス」がありますのでしっかりと把握しておきましょう。

    相対パス:

    表示する画像ファイルの場所を指定するのに、HTML文書がある場所を起点とし画像ファイルまでの場所を記述する方

    絶対パス:

    表示する画像ファイルの場所を指定するのに、URLで画像のファイルを記述する方法

    道案内にたとえてみます。「相対パス」の伝え方は、道ですぐ近くの役所の場所を聞かれたら、その場所を起点として「この道をまっすぐ行って一つ目の角を右に曲がった所」と教える方法で、「絶対パス」は、遠くの親戚に具体的に住所を「東京都○×区△△町N丁目N番地」と教える方法です。

    具体的に見てゆきましょう。上記サンプルのHTMLファイル(image01.html)と画像(sushi1.jpg)がサーバーの同じフォルダ内にあり、”sushi2.jpg”の画像ファイルが「img」フォルダーの中に配置されているとします。

    HTML文書と画像ファイルの配置

    image4

    「相対パス」での画像の指定方法は以下のとおりになります。

    <body>
    <h1>画像の表示</h1>
    <h2>○○寿司</h2>
    <img src="sushi1.jpg" alt="寿司の写真1">
    <h2>△△寿司</h2>
    <img src="img/sushi2.jpg" alt="寿司の写真2">
    </body>

    画像ファイルを置いてあるウェブサーバーのURLアドレスが"http://www.xyz.co.jp/"だった場合、
    「絶対パス」の指定方法は、ファイルを開けるURLアドレスを記述します。

    <body>
    <h1>画像の表示</h1>
    <h2>○○寿司</h2>
    <img src="http://www.xyz.co.jp/sushi1.jpg" alt="寿司の写真1">
    <h2>△△寿司</h2>
    <img src="http://www.xyz.co.jp/img/sushi2.jpg" alt="寿司の写真2">
    </body>

    「絶対パス」と「相対パス」の使い分けはどのようにすればよいのでしょうか?
    答えは簡単です。画像ファイルが同じウェブサーバー上に配置されていれば「相対パス」を使い、そうでなければ「絶対パス」を使って下さい。
    「絶対パス」は、インターネット上での一意のアドレスですのでファイルの場所を確実に伝えることができますが、同一サーバー上のファイルを全て「絶対パス」で記述すると画像ファイルを読み込む度にドメインからIPを探し、サーバーの画像ファイルを見つけて呼び出しリクエストするため、処理が余計にかかってしまいます。「相対パス」を指定しておけば、その手間がなくなります。インターネットの世界では、できるだけ処理を軽くするような記述を常に心がけることが大切です。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【プロジェクトマネージャー】1億4千万ユーザーのアプリ開発/O2Oソリューション

    スマートフォンアプリ向けの自社プロダクトFANSHIPを用いた大規模案件の プロジェクトマネジメント業務...

    株式会社アイリッジ

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【Scala/Ruby】サーバーサイドエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【リーダーポジション】国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)のサービスサイトおよび基幹システムの開発業務 - テックリード - 開発案件...

    夢の街創造委員会株式会社

    正社員

    【JavaScript/CSS/React】フロントエンドエンジニア|国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)サービスサイトおよび基幹システムのフロントエンド開発業務 UI/U設計、ツ...

    夢の街創造委員会株式会社

    OCTPASS

    絞り込みメニュー

    絞り込みメニュー

    職種で探す

    SEACH_LISTjobcat257

    SEACH_LISTjobcat258

    SEACH_LISTjobcat259

    SEACH_LISTjobcat260

    SEACH_LISTjobcat261

    SEACH_LISTjobcat262

    SEACH_LISTjobcat263

    SEACH_LISTjobcat264

    SEACH_LISTjobcat265

    SEACH_LISTjobcat266

    SEACH_LISTjobcat267

    業種で探す

    雇用形態で探す

    勤務地で探す

    SEACH_LISTloccat391

    SEACH_LISTloccat394

    SEACH_LISTloccat403

    SEACH_LISTloccat413

    スキルで探す

    SEACH_LISTsklcat465

    SEACH_LISTsklcat466

    SEACH_LISTsklcat467

    SEACH_LISTsklcat468

    SEACH_LISTsklcat469

    SEACH_LISTsklcat470

    SEACH_LISTsklcat471

    こだわり条件で探す

    SEACH_LISTgoodcat337

    SEACH_LISTgoodcat338

    SEACH_LISTgoodcat339

    SEACH_LISTgoodcat340

    SEACH_LISTgoodcat341

    SEACH_LISTgoodcat342

    SEACH_LISTgoodcat343