画像を表示する方法 (img / background) [HTML/CSS]

img タグ

参考：

img – 画像埋め込み要素 | MDN

使い方

参考：

HTML の画像の使い方 | コードキッチン

img タグ | コーディングのプロが作る HTML タグ辞典

img | HTML クイックリファレンス

IMG | HTML クイックリファレンス

HTML の画像 | MDN

表示サイズを調節する

参考：

画像のサイズ／縦横比／トリミング指定方法 | DISITOR

object-fit

参考：

1行追加で OK！CSS だけで画像をトリミングできる object-fit プロパティー | Web クリエイターボックス

object-fit – CSS だけで画像をトリミングできる | FASTCODING BLOG

object-fit の使い方／img 要素の縦横比固定方法 | nyanblog

object-fit | HTML クイックリファレンス

要素の背景に画像を表示する

• background
• background-image
• background-size
• background-repeat

参考：

background | HTML クイックリファレンス

background-image | HTML クイックリファレンス

background-size | HTML クイックリファレンス

background-repeat | HTML クイックリファレンス

background-image | MDN

background-image に filter をかける

参考：

background-image のみに filter を掛ける – Qiita

背景画像だけにガウスぼかしをかける方法 | Black Everyday Company

CSS で背景画像だけにブラーエフェクトを加える方法 | Design Color

How to apply a CSS filter to a background image – Stack Overflow

backdrop-filter

参考：

backdrop-filter – 次世代 Web スタイリングを追う – Qiita

たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filter プロパティの使い方を解説 | コリス

backdrop-filter で効果をつける | Design memo

backdrop-filter を使ったデザイン集 | ONE NOTES

backdrop-filter | MDN

backdrop-filter | CSS-Tricks

CSS Backdrop Filter | Can I Use Support Tables

alt 属性

スクリーンリーダーを使用している際に読み上げられる画像の説明文。SEO にも影響するため、img タグで画像を挿入する際は付与することが望ましい。

参考：

alt 属性とは？効果から適切な記述方法まで詳しく解説 | 株式会社デジタルアイデンティティ

alt 属性とは？代替テキストの書き方と考え方 | 株式会社オレンジ社

alt 属性とは？ SEO における役割と効果的な使い方 | デジ研

alt 属性とは？ SEO に効果的な記述方法を解説 | AI アナリスト

title 属性

img タグで表示した画像にカーソルを合わせた際に、補足的な情報をツールチップとして表示するためのテキストを記入する。

参考：

title 属性 – 要素に補足情報を付ける | TAG index

image 関数

参考：

image() | MDN

レスポンシブに表示する

最大幅を親要素の幅最大までとし、画像のアスペクト比を保つために高さを自動的に調節する。

.responsive-image {
    max-width: 100%;
    height: auto;
}
Code language: CSS (css)

参考：

aspect-ratio でアスペクト比を固定したレスポンシブ対応方法を解説 | みやっちブログ

レスポンシブ画像 | MDN

アスペクト比を維持する

.half-width {
    max-width: 50%;
    height: auto;
}
Code language: CSS (css)

参考：

CSS だけでアスペクト比を固定するテク – Qiita

画像の縦横比を維持したままリサイズする CSS | スタイルシート Tips ふぁくとりー

サムネイル表示する

参考：

CSS だけで画像縦横比を維持したレスポンシブ対応サムネイルを作る方法 | Tanweb.net

ファイル形式

参考：

画像ファイルの種類と形式ガイド | MDN

データ URL

参考：

url() | MDN

データ URL | MDN

互換性

参考：

img | Can I Use Support Tables

src | Can I Use Support Tables

SVG in HTML img Element | Can I Use Support Tables

background-image | Can I Use Support Tables

background-image Options | Can I Use Support Tables

background-image: SVG Images | Can I Use Support Tables

まとめ

参考：

HTML の画像 (img タグ) の使い方 コンプリートガイド | コードキッチン

CSS で画像をトリミングする方法を解説！ | Qumeru マガジン