横に並んだ＜img＞の数を柔軟にする

　某サイトで「横に並んだ＜img＞（イメージ）の数を、閲覧者の画面のサイズに応じて柔軟にする」必要が生じました。
　例えば、こんな感じになってしまうことへの対応です。

http://qp.jpn.org/header_wide01.html

　最大５枚のイメージを横に並べたいが画面に収まらないために、言わば「次の行」が作られて５枚目のイメージが表示されてしまいます。
　レイアウトは「１行」であって、これらのイメージがどうしても必要ではなく、言わば「飾り」として並んでいればいい、というのが今回の意図です。

　現在の記述はこうです。

<div>

<img border="0" alt="あん01.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829301.jpg" width="400" height="282">

<img border="0" alt="あん02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829302.jpg" width="400" height="282">

<img border="0" alt="あん03.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829303.jpg" width="400" height="282">

<img border="0" alt="あん04.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829304.jpg" width="400" height="282">

<img border="0" alt="あん05.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829305.jpg" width="400" height="282">

</div>

（widthは、必要に応じて変えます。絶対値でも％でも設定できます。）


　そこで、こんなふうにしてみました。

<div style="text-align:left; width:100%; height:282; overflow:hidden;">

<img border="0" alt="あん01.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829301.jpg" width="400" height="282">
（以下略）

http://qp.jpn.org/header_wide02.html

　イメージが「１行」だけになります。

　ブラウザの幅を狭くしてみます。

　「１行」が保たれたままです。


　次に、画像が中央にレイアウトされるようにします。

<div align="center" style="text-align:center; width:100%; height:282; overflow:hidden;">

<img border="0" alt="あん02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/E38182E3829302.jpg" width="400" height="282">
（以下略）

http://qp.jpn.org/header_wide03.html

　今回の要のタグは、overflow:hidden;です。
　ただ、これはhtml5で初めて採用されたものではないと思います。（カテゴリーは「HTML5ですが。」）