複数の画像を横に並べる場合、
<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用と、幅の狭いスマートフォン用で、
スクリプトなしにページを兼用できるのは楽ちんです。
私もプログラマーの端くれということもあり、
何かあればとりあえずコードを書いて解決する
ある意味悪い癖があるのですが、
調べてみるとコードを書かずに済むことなんてよくあります。
時には立ち止まるってまわりを見渡すのも必要なことですね。
0 件のコメント:
コメントを投稿