htmlで画像を表示する方法を解説

htmlで画像を表示する方法を解説

この記事では、htmlで画像を表示する方法を解説します。

 

htmlで画像を表示するimgタグ

htmlで画像を表示するには、「img」タグを使います。

imgタグには、画像のディレクトリを指定する「src」属性と、画像の代替えとなるテキストを指定する「alt」属性を併せて記述します。

htmlで画像を表示するには、以下のように記述します。

imgタグの記述方法

<img src=”画像のディレクトリ” alt=”代替えテキスト”>

※imgには閉じタグは必要ありません。

たとえば、index.htmlと同じ階層にある「imageフォルダ」に保存されている「picture.png」をWeb上で表示する場合には、以下のように記述します。

<p><img src="image/picture.png" alt="旅行の写真"></p>

 

alt属性とは?

htmlで画像を表示するには、imgタグにalt属性を記述します。

「alt属性」は代替えテキストとも言い、画像がブラウザ上で表示や閲覧ができない場合に、画像の代わりとして画面に表示されるテキストのことです。

コンテンツの内容と関連のある画像を表示する場合には、その画像がどんなものかを簡単に説明したテキストをalt属性に記述しておくとユーザビリティを上げることができます。

ただし、アイキャッチ画像のように、ただの装飾目的で表示する画像には特に記述する必要ありません。

その場合は「alt=””」と空の状態にしておきます。

 

画像のサイズを変更する

次に、表示する画像のサイズを変更したい場合に、サイズを指定する方法について説明します。

画像のサイズは、imgタグの「width」「height」属性を使って画像の幅や高さを調整することが可能です。

たとえば、以下のように記述して、幅400px、高さ300pxの画像を表示することができます。

<p class="sample"><img src="image/picture.png" alt="旅の写真" width="400" height="300"><p>

※width属性、height属性で数値を指定する場合、単位は必要ありません。

表示例

width、height属性でサイズを指定した画像

また、「width」「height」プロパティを指定して、CSSでサイズを変更することも可能です。

sample img {
 width: 300px; 
 height: auto; 
}

表示例

CSSで横幅300pxに設定した画像

 

画像にリンクを貼る

次に、画像にリンクを貼りたい場合に、「a」タグを使ってリンクを作成する方法について説明します。

この場合は、imgタグをaタグで囲って以下のように記述します。

<a href="https://upwd-trend.com/blog/html-image/"><img src="picture.png" alt=""></a>

ブラウザ上の表示

リンクを設定した場合の画像

PCで閲覧時、リンクをマウスオーバーした際にホバーエフェクトを付ける場合には、擬似クラス「:hover」を使いCSSで調整します。

たとえば、マウスオーバーした時に画像を透過させたい場合には、opacityプロパティを使って以下のように記述すればOKです。

a:hover {
opacity: 0.8;
}

表示例

リンクにホバーエフェクトを付けた場合

 

まとめ

以上、htmlで画像を表示する方法について説明しました。

htmlで画像を表示するには、imgタグを使い、src属性でファイルのディレクトリを指定し、alt属性で代替えテキストを指定する必要があります。

また、width・height属性を追加して、ファイルのサイズを指定することも可能です。

また、画像にリンクを付けたい場合は、imgタグをaタグで囲い、リンクを設定することができます。

CSSでホバーエフェクトを付けることも可能なので、htmlで画像を表示したい場合には参考にしてみてください。

htmlの書き方カテゴリの最新記事