ホームページで複数画像を表示したいが、スペースが限られている場合の方法として、1枚の大き目の画像を置き、その下に選択用のサムネイル画像を5枚表示させるものを作った。参考にさせて戴いたのは、次のURLです。
KLUTCHE web design techniques ( http://klutche.org/archives/460/ )

ここで、自分用のカスタマイズとして、次のような内容を加えた。
メイン画像のサイズは、横320px 縦214px である。サムネイル画像の一つの横幅は 64pxにしたい。
それで、下記のようにした。
①cssで用意する画枠は、サムネイル間の隙間を1pxとることにすると、
( 64 + 1 ) * 5 – 1  = 324px
②background 色は background:#000;
③メイン画像とサムネイル画像の上下隙間は margin-top:10px;  にした。
④サムネイル画像が、メイン画像と同じに左側で揃えて表示するために margin-left:-40px; とした。
⑤サムネイル画像が、横並び一列になるようにするため float:left; とした。
⑥サムネイル画像の左右間隙間の色は、白色としたいので background:#fff; とした。

cssは、フォルダ「css」を別に作り そこに wrap.css と言う名前で格納した。

メインプログラム index.html は、

画像は、「img」フォルダをつくり、その中に格納した。