HTML: img タグ (2) 画像を並べる
概略
img タグは初期値が インラインブロック
の要素です。
CSS の display の初期値が display: inline-block; になっています。
CSS display: inline-block
img タグを並べると画像は左から右に順番に並びます。 行末までくると改行して次の行の先頭に折り返します。 テキストや a タグなどのインライン (display: inline;) 要素と同じような並び方になります。
テキストと img を並べたサンプル。
img タグとインライン要素のタグで異なる点は、img タグでは
大きさ (幅: width, 高さ : height) を指定できます。
a タグや b タグはそのままでは大きさを指定できません。
CSS: display: inline; インライン要素
サンプル: img タグだけ並べる
img タグを並べると画像の周囲に隙間ができる話が出てきます。
高さを揃えて img タグを単純に並べたサンプル。 画像の周囲に余白ができる。
画像の周囲に余白ができる理由と対処方法。
HTML: 改行を表す文字コード
CSS: vertical-align
サンプル: 画像の表示位置を調整する
固定サイズの img に対して画像の表示位置を調整する
固定サイズの img で画像を並べて表示する。 CSS object-fit で画像の表示方法を調整する例。
(参考:昔話) こちらは CSS object-fit, object-position がなかった時代のサンプルです。
img の横位置と縦位置を text-align, vertial-align で調整していました。
いろいろ
CSS vertical-align で縦位置を調整するサンプル。
CSS: vertical-align
img タグだけを並べるサンプル。 max-width, max-height で画像サイズを、 vertical-align で縦位置を調整する。
サンプル: img をタイル状に並べる - 画像リストなど
同じ大きさの要素 (img や figure など) をタイル状に並べるサンプルです。 figure タグは block 要素なので float: left; で並べます。
ウインド幅に合わせて横に並べる画像の枚数を変えるサンプル。
TestHTML_img_array_fit03.html
上のサンプルを CSS で装飾。
CSS var変数、calc() 関数
figure タグで画像をタイル状に並べるサンプル。 float の使い方は div を float で並べる話と同じです。
CSS: float
実際に使うときには JavaScript で img の URL リストを読んで
HTML コードを自動生成します。
- TestJS_template_img_list01.html
template タグのテンプレートを使って figure, img のリストを作成する。
template タグ
img タグ: JavaScript サンプル
画像の大きさをドラッグ操作で変更する
TestCSS_resize_figure_img01.html
CSS resize で img 要素の大きさをドラッグ操作で変更できるようにしたサンプル。 figure 要素に img 要素を格納し、figure を resize します。
CSS: resize: 要素の大きさを手動操作で変更する
CSS resize で img 要素の大きさをドラッグ操作で変更できるようにしたサンプル。 figure 要素に img 要素を格納し、figure を resize します。
CSS: resize: 要素の大きさを手動操作で変更する