HTML imgタグの使い方画像の表示&オプション指定

こんなあなたにおすすめ

HTMLで画像を表示することは、かなりの頻度であると思います。
今回は、HTMLで画像を表示するimgタグの使い方について解説します。

HTMLで画像を表示 & <img>タグの使い方

「img」は「image」の略で、PNG形式(*.png)、JEPG(*jpg)、GIF形式(*gif)の画像を表示することができます。

属性	説明	値
src	表示する画像ファイルを指定する（必須）	URI
alt	画像を表示できないブラウザの場合に、画像の代替テキストを指定します。	テキスト
name	画像の名前を指定します。	文字列
width	画像の横幅をピクセル、パーセンテージで指定します。	数値、%
height	画像の高さをピクセル、パーセンテージで指定します。	数値、%
align	表示位置と、テキストが画像を回りこむかどうかを指定します。	top, middle, bottom, left, right
border	画像の周りにおけるボーダーラインの太さを指定します。	数値

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" align="top">Sample img</p>
</body>

Sample img

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" align="middle">Sample img</p>
</body>

Sample img

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" align="bottom">Sample img</p>
</body>

Sample img

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" align="right">Sample img</p>
</body>

Sample img

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" border="10">Sample img</p>
</body>

Sample img

<body>
  <p><img src="img/Sample.jpg" height="200" width="200" alt="画像が表示できないときのテキスト・・・">Sample img</p>
</body>

Sample img

ここまで、HTMLのimgタグの使い方について解説しました。

ウェブサイトで画像は必ずと言っていいほど使いますので、imgタグをぜひ使ってみてください。

画像にリンクをつけることも可能です。
リンクを新規タブで開く方法を知りたい方は、以下の記事をご参照ください。
>>HTML リンクを新規タブで開く方法 target=”_blank”

HTMLの基本的な書き方について知りたい方は、以下の記事をご参照ください。
>>【初心者向け】HTMLの基本的な書き方

本で学習したい方には、以下の参考書がおすすめです。
>>スラスラわかるHTML＆CSSのきほん

エンジニアを目指すなら、TechAcademy！
オンラインスクール受講者数No.1！

・自宅にいながらオンライン完結で勉強できる
➡スクールへの移動時間を削減するため、効率的に学習可能！

・受講生に1人ずつ現役のプロのパーソナルメンターがつく
➡分からないことがわかるまで徹底的にメンターに質問可能！

・チャットで質問すればすぐに回答が返ってくる
➡レスポンスが速いから、わからないことをその場で解決！

・オリジナルサービスやオリジナルアプリなどの開発までサポート
➡就職、転職のときに役立つポートフォリオを開発可能！

無料で体験できるので、まずはお試し
>>TechAcademyの無料体験はこちら