HTML: img タグ (1)
概略
基本的なサンプル (2023/07)
- TestHTML_img01.html
画像の大きさの指定 (width,height)。 - TestHTML_img_svg01.html
img タグで svg 画像ファイルを表示する。
HTML: svg タグ
画像にポップアップ表示の説明を付ける。title 属性。
img にリンクを付ける
- TestHTML_img_link01.html
画像にリンクを付ける。a タグ。
TestHTML_img_a_hover01.html
a リンクの :hover で効果をかけると img の下側まで効果がかかる話と対処方法。
img タグを並べたときも画像の周囲に余白ができるなど似た話が 出てきます。CSS vertical-align が関係しています。
TestHTML_img_gap01.html
img タグ (2) - img タグを並べる
CSS: vertical-align
a リンクの :hover で効果をかけると img の下側まで効果がかかる話と対処方法。
img タグを並べたときも画像の周囲に余白ができるなど似た話が 出てきます。CSS vertical-align が関係しています。
TestHTML_img_gap01.html
img タグ (2) - img タグを並べる
CSS: vertical-align
関連: CSS background
CSS background でも画像を表示することができます。
ページや要素の背景画像を指定するときに使います。
用途によっては img タグを使わず CSS background や
::before 擬似要素, ::after 擬似要素を使った方が便利な話もあります。
- 例: テキストのリンクや li の箇条書きに定型の画像アイコンをつける場合。
CSS background や ::before, ::after で画像を表示した方が簡単です。 毎回 img タグを書かなくて済みます。
img のセンタリングなど (2023/07)
img タグ内の画像の位置調整では CSS の object-fit や object-potion が使えます。 画像の縦横比を保ちながら img の枠内に収まるように自動調整して表示できます。
object-fit や object-position は Edge79 (Chromium Edge, 2020年) 以降で使用可能な比較的新しいプロパティです。
object-fit や object-position を使えるタグは img タグ, video
タグなどです。div や figure などには使用できない点に注意。
MDN: 置換要素
img タグを並べる
HTML: img タグ (2) - img タグを並べるimg とテキストを並べる
HTML: テキストと画像を並べるCSS transform で img 画像を変形する
TestCSS_transform_img1.htmlimg 要素の画像を CSS transform で回転させるサンプル。
CSS transform - 変形・回転など
HTML をドローソフト代わりに使う (1)
関連: SVG 要素内の transform
SVG では CSS とは別に SVG の属性でも transform の指定ができます。TestSVG_arrow01.html
svg タグ: transform で図形を操作する
いろいろ (2023/06)
- TestHTML_img_base64_01.html
画像ファイルをBASE64テキストにして HTML内に格納する。
関連
- img タグ (2) - img タグを並べる
- HTML: テキストと画像を並べる
- imgタグ: JavaScriptサンプル
- HTML: svg タグ
- HTML: canvas タグ
- CSS background - 背景
- CSS gradation - グラデーション
- 画像ファイルのフォーマット - png, JPEG など
番外
- old_html_img_centering01.html
HTML 考古学、さまざまな img センタリング。