HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLページに画像を挿入する方法を解説！imgタグの基本と使い方

HTMLページでは、好きな位置に簡単に画像を挿入することができます。画像を表示させるには <img> タグを使用します。このタグは終了タグが不要な「空要素」と呼ばれるもので、属性だけで構成されているのが特徴です。

注意点として、<img> タグは必ず <body>〜</body> の中に記述してください。主な属性は以下の通りです。

  • src属性：画像のソース（画像ファイルのURLやパス）を指定します
  • alt属性：画像が表示されない場合に代わりに表示される代替テキストを指定します
  • width属性：画像の幅を指定します
  • height属性：画像の高さを指定します

HTMLページに画像を挿入する方法を解説！imgタグの基本と使い方

記述例

HTMLページに画像を挿入するには、以下のようなコードを書きます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML img Tag</title>
   </head>

   <body>
      <img src="https://www.tutorialspoint.com/html/images/test.png" alt="Simply Easy Learning" width="200" height="80">
   </body>
</html>

出力結果

上記のコードを実行すると、指定したサイズ（幅200px・高さ80px）で画像がブラウザ上に表示されます。alt属性に設定したテキストは、画像が読み込めなかった場合などに代わりに表示されます。

HTMLページに画像を挿入する方法を解説！imgタグの基本と使い方


  1. HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

    HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。CSSで円を描くサンプルコード以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。<!DOCTYPE html> <html>    <head>     

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま