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

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

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

    1. 画像を表示してみる

    1.1 <img>タグ

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

    1.2. "src”属性

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

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

    ブラウザーの表示

    image1

    ▲ページトップへ戻る

    1.3. "alt”属性

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

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

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

    image2

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

    ▲ページトップへ戻る

    1.4. "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

    ▲ページトップへ戻る

    2. 絶対パスと相対パス

    上の例では<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を探し、サーバーの画像ファイルを見つけて呼び出しリクエストするため、処理が余計にかかってしまいます。「相対パス」を指定しておけば、その手間がなくなります。インターネットの世界では、できるだけ処理を軽くするような記述を常に心がけることが大切です。

    ▲ページトップへ戻る

    最新案件情報をチェック!

    月額単価60万円〜75万円
    勤務地 東京都 港区
    月額単価50万円〜
    勤務地 東京都 渋谷区
    年収300万円〜
    勤務地 東京都 新宿区
    年収300万円〜
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Ruby】Web開発エンジニア★フォトスタジオサイトのリニューアル

    月額単価 :60万円〜75万円

    ウェディングフォトスタジオや衣装レンタルのWebサイトリニューアルしておりそちらにも携わっていただき...

    フリーランス

    【HTML/CSS/Git】コーダー ★金融系Webシステムの開発

    月額単価 :50万円〜

    3月より新規で金融系のWebサイトを受注するに伴いコーダーを募集します。 そこまで特殊なライブラリ...

    正社員

    【HTML/Java】プログラマー|一般・企業向けWebサイトの制作

    年収 :300万円〜

    ◎仕事内容 ◆9割が未経験からスタート ◆3ヶ月の自社内研修でキホンのキから学べる! 未経験から、人気...

    株式会社日本技研プロフェッショナルアーキテクト

    正社員

    【PHP/JavaScript】WEBエンジニア・プログラマー|Webシステムの開発

    年収 :300万円〜

    【システムエンジニア】 ・WEBシステム、スマートフォンアプリのシステム要件定義~設計までの上流工程...

    株式会社パーミッション