横スライドショー８■横へ■　横移動スライド・コメ付　　　　最終修正日 : 2014/12/19

横から次々に画像が移動してくるスライドショーです。全部同じサイズの画像を使用して下さい。
横スクロールですが、動きがとても面白いです。見本として１番目と２番目がリンク付きです。
「自動」の途中でも、「次へ」「戻る」をクリックすると、手動になります。
手動の途中から「自動」をクリックすると、途中から自動になります。
「逆自」は自動とは逆の向きで動作します。

原本はブラウザIE専用で、tableタグを使用していて、クリックで動作します。
「6.クリックで表示するテーブルをスクロールさせて切り替える」というタイトルの原本は、OpenSpaceから。
IE専用をOKWaveを見て、他ブラウザ対応に変更。
さらにクリックではなく自動で動作の植木屋さかちゃんのブログを参考にして、クリックと自動と逆自動に改造しました。
でもループはできません。ほんとうはループをしたかったのですが、私の力では無理でした(泣)

最新のCSSでは display:table という機能があって、table タグを使用しなくても、画像とコメントを一緒に移動させることが可能です。
コメントを載せない場合は、img 指定の後ろの＜p＞〜〜〜＜/p＞の部分を削除して、CSSの説明書き通りにCSSを修正して下さい。
display:table についての詳しい説明は、delaymaniaとCodeGridからどうぞ。

---

見本では、上下に並んだ img と p が１セットで、そのセットが JavaScript の display:table 指定によって、横並びになります。
でも p にも display:table-cell が記述してあるのは、これは単独のモノで、全体の display:table 指定とは無関係です。
p のコメントの位置指定や p タグが独自に持つ隙間( p は段落のタグなので自動的に改行が付く)などを無くすために display:table-cell 指定がいれてあります。
ためしに p の display:table-cell 指定を削除してみると、位置がズレてしまうのがわかります。
display:table-cell は単独で使用可能です。いろいろな使用法はWEBLOGから。

---

最後に画像（img）について。
HTML5では、画像の下側に隙間が空きます。原因はHTML4とは仕様が変わったからです。詳しい説明はkishin Designから。
今回、画像とコメントの間には、細い隙間が発生しました。HTML4では発生しません。その防止のため、CSSの img に vertical-align:bottom の記述がしてあります。この記述はHTML4で記述しても問題ありません。