アジェンダ

Web制作において、画像の設定パターンで一般的な方法があると考えており、それぞれのパターンは、画像の役割やレイアウトに応じて使い分けることが重要だと思います。以下に、背景画像やコンテンツとしての画像など、よく使われる設定パターンを簡単にまとめます。

1. 背景画像 (Background Image) の設定

背景画像は、要素全体に装飾的に配置される画像です。CSSで設定することが一般的です。

基本的な背景画像の設定

CSS

.element {
    background-image: url('path/to/image.jpg');
}

繰り返しなしの背景画像

デフォルトでは、背景画像は繰り返されます。繰り返しを防ぐためには background-repeat プロパティを使用します。

CSS

.element {
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
}

背景画像のサイズ調整

背景画像のサイズを調整する場合は、background-size プロパティを使用します。

cover は、要素全体を覆うように画像を拡大または縮小します。
contain は、画像全体が表示されるように調整されますが、要素のどこかに余白が残る可能性があります。

CSS

.element {
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

位置の調整

背景画像の位置を調整するには background-position プロパティを使います。例えば、画像を中央に配置したい場合：

CSS

.element {
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

2. コンテンツとしての画像 (Content Image) の設定

HTML内に直接埋め込まれる画像は、主に視覚的な情報を提供するために使われます。

基本的な画像表示

HTML

<img src="path/to/image.jpg" alt="説明文">

画像の幅・高さの設定

CSSで画像のサイズを指定することができます。

CSSで指定する例：

CSS

.hoge-img {
    width: 100%;
    height: auto;
}

※実務で使用することはないですが、HTML属性でも設定はできます。

<img src="path/to/image.jpg" alt="説明文" width="300" height="200">

レスポンシブ画像

レスポンシブなデザインをサポートするために、画像がブラウザの幅に応じてサイズを変えるようにします。

CSS

img {
    max-width: 100%;
    height: auto;
}

3. 画像の装飾 (Styling Images)

画像に対してスタイルを適用することで、視覚的な効果を追加できます。

画像に枠線を追加

CSS

img {
    border: 2px solid #333;
}

画像の角を丸くする

CSS

img {
    border-radius: 10px;
}

4. レスポンシブ画像 (Responsive Images)

異なるデバイスに合わせて最適な画像を表示するために、<picture> 要素を使うことができます。

HTML

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="default.jpg" alt="レスポンシブ画像">
</picture>

詳しくは以下を参照。

5. アイコン画像 (Icon Images)

Web上で使われるアイコンは、一般的にベクター画像（SVG）として提供されることが多いです。SVGは解像度に依存しないため、どのデバイスでも鮮明に表示されます。

外部SVGファイルの読み込み

HTML

<img src="path/to/icon.svg" alt="アイコン">

※使ったことはないのですが、SVGを直接HTMLに埋め込むやり方もあります。

HTML

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

CSS

.svg-icon {
    width: 100px;
    height: 100px;
}