画像を横に並べるウェブページ

細かいレイアウトの調整やサーバ/クライアントサイドでの自動調節は別にして、
複数の画像を横に並べる場合、

<img src="<画像1>" />
<img src="<画像2>" />
<img src="<画像3>" />
<br />
<img src="<画像4>" />
<img src="<画像5>" />
<img src="<画像6>" />
<br />

のようにするのが楽です。
しかし各画像に個別に見出しをつけたいとかいうことになると、
途端に面倒になります。
しかし最近簡単かついい方法を知りました。

が、その方法を紹介する前に、
HTML5で見出しをつける機能が加わっているので、
まずはそれについて。
と言っても

<figure>
<img src="<画像1>" />
<figcaption>画像1の見出し</figcaption>
</figure>

のようにするだけですけど。
figureタグでブロック化しています。

で、話を戻すと、このfigureブロックを横に並べるには
スタイルシートで設定するだけで済みます。
html文書に埋め込むなら以下のようにできます。

<head>
<style type="text/css">
	figure {
		float: left;
	}
</style>
</head>

これによりどこまでも横に並び、
ブラウザの右端で勝手に折り返されます。
幅の広いPC用と、幅の狭いスマートフォン用で、
スクリプトなしにページを兼用できるのは楽ちんです。

私もプログラマーの端くれということもあり、
何かあればとりあえずコードを書いて解決する
ある意味悪い癖があるのですが、
調べてみるとコードを書かずに済むことなんてよくあります。
時には立ち止まるってまわりを見渡すのも必要なことですね。

広告