【HTML初心者向け基礎講座】<img>:画像の表示方法を学ぼう!

HTML

<img>:画像の表示方法を学ぼう

ウェブページを魅力的にするために、画像の使用は非常に重要です。

HTMLでは、<img>タグを使用して画像を表示します。

<img>タグは、以下のようにして使用します:

<img src="画像のファイルパス" alt="代替テキスト">

ここで、src属性は画像ファイルのパスを指定し、alt属性は画像が読み込まれなかった場合に代替テキストを提供します。代替テキストは、画像の内容を説明する簡潔なテキストです。

例えば、”google_logo.jpg”というファイル名の画像を表示する場合、次のように記述します:

<img src="google_logo.jpg" alt="google logo">

上記のコードは、”google_logo.jpg”というファイルの画像を表示し、読み込まれない場合には「google logo」と表示されます。

画像のサイズ調整

また、width属性(横)とheight属性(縦)を使用して画像の幅と高さを調整することもできます。

例えば、画像の幅を300ピクセルに設定する場合:

<img src="example.jpg" alt="画像名称" width="300px">

または、高さを200ピクセルに設定する場合:

<img src="example.jpg" alt="画像名称" height="200px">

高さを200px,幅を300pxにする場合は:

<img src="example.jpg" alt="画像名称" height="200px" width="300px">

数字+単位(px,em,%)で大きさを設定します(他にも色んな単位があります)

画像へのリンク

さらに、先ほど学んだ<a>タグと組み合わせて、画像にリンクを設定することもできます。

以下の例では、画像をクリックするとGoogleのウェブページに移動します:

<a href="https://www.google.com">
    <img src="google_logo.jpg" alt="Googleのロゴ">
</a>
Googleのロゴ

これらの方法を使って、ウェブページに魅力的な画像を追加し、ユーザーエクスペリエンスを向上させましょう!

タイトルとURLをコピーしました