画像タグ imgタグを使って画像を埋め込む方法

Posted on by

画像タグimgの概要

定義

<img> タグは、HTML文書に画像を埋め込むために使用されます。
このタグは他のタグと異なり、終了タグを持たない単一の自己終了タグです。

役割

視覚的要素として画像をウェブページに表示し、コンテンツを豊かにします。

基本的な使い方

画像を埋め込むためには、<img> タグの src 属性に画像ファイルのURLを指定します。
さらに、alt 属性を使用して、画像の代替テキストを指定することが重要です。
これにより、画像が表示されない場合や、
スクリーンリーダーを使用しているユーザーに対して適切な説明が提供されます。

基本構造

<img src="画像のURL" alt="代替テキスト">

実践例

以下は、画像を埋め込む基本的な例です。

<!DOCTYPE html>
<html>
<head>
    <title>画像タグの基本</title>
</head>
<body>
    <h1>画像を埋め込む例</h1>
    <img src="https://www.example.com/image.jpg" alt="Example Image">
</body>
</html>

画像の属性

src 属性

定義

画像ファイルのURLを指定します。

例)

<img src="https://www.example.com/image.jpg" alt="Example Image">

alt 属性

定義

画像が表示されない場合や、スクリーンリーダーが使用される場合に表示される代替テキストを指定します。

重要性

アクセシビリティを向上させ、SEOにも寄与します。

例）

<img src="https://www.example.com/image.jpg" alt="Description of the image">

width 属性と height 属性

定義

画像の表示サイズを指定します（ピクセル単位）。

注意点

アスペクト比を維持するために、通常は片方の属性のみを指定するか、両方の値を適切に設定します。

例）

<img src="https://www.example.com/image.jpg" alt="Example Image" width="600">
<img src="https://www.example.com/image.jpg" alt="Example Image" height="400">

title 属性

定義

画像にホバーしたときに表示されるツールチップを指定します。

例）

<img src="https://www.example.com/image.jpg" alt="Example Image" title="This is an example image">

画像の配置とスタイリング

画像の配置

CSSを使用して画像をページ内で配置することができます。
例えば、画像を中央に配置するには以下のようにします。

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <h1>画像の配置例</h1>
    <img src="https://www.example.com/image.jpg" alt="Example Image" class="center" width="600">
</body>
</html>

画像のスタイリング

CSSを使用して画像のスタイルを変更できます。
例えば、ボーダーを追加したり、影をつけたりすることができます。

<!DOCTYPE html>
<html>
<head>
    <style>
        .styled-image {
            border: 2px solid #000;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1>画像のスタイリング例</h1>
    <img src="https://www.example.com/image.jpg" alt="Styled Image" class="styled-image" width="600">
</body>
</html>

画像の最適化

ウェブページのパフォーマンスを向上させるために、画像を最適化することが重要です。

ファイル形式の選択

適切なファイル形式を選択することが重要です。

JPEG

写真や多くの色が含まれる画像に適しています。

PNG

透過背景や高解像度の画像に適しています。

GIF

アニメーションや少数の色で構成される画像に適しています。

WebP

高圧縮と高品質を兼ね備えた新しい形式。

画像の圧縮

画像を圧縮することで、ファイルサイズを小さくし、ページの読み込み時間を短縮できます。
オンラインツールやソフトウェアを使用して画像を圧縮します。

画像のレスポンシブデザイン

レスポンシブデザインを考慮し、異なるデバイスに対応するために画像を最適化します。

srcset 属性と sizes 属性

srcset 属性と sizes 属性を使用して、異なる画面サイズに応じて適切な画像を提供します。

<!DOCTYPE html>
<html>
<head>
    <title>レスポンシブ画像の例</title>
</head>
<body>
    <h1>レスポンシブ画像の例</h1>
    <img 
        src="https://www.example.com/image-small.jpg" 
        srcset="https://www.example.com/image-large.jpg 1024w,
                https://www.example.com/image-medium.jpg 640w,
                https://www.example.com/image-small.jpg 320w" 
        sizes="(max-width: 1024px) 100vw, 1024px" 
        alt="Responsive Image">
</body>
</html>

まとめ

<img> タグは、HTML文書に画像を埋め込むための基本的な要素です。
適切な src と alt 属性を使用し、画像の配置やスタイリングをCSSで調整することで、
視覚的に魅力的でアクセシブルなウェブページを作成できます。
画像の最適化やレスポンシブデザインを考慮することで、
ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。