1. HOME
  2. ホームページ作成の小技
  3. スライド風 複数の写真を横スクロール表示してみよう---東京でホームページ制作

TECHNIQUES

ホームページ作成の小技

東京のさくっとホームページのHP制作の小技

スライド風 複数の写真を横スクロール表示してみよう—東京でホームページ制作

プラグインを使わず スライド風に、複数の写真を横スクロール表示してみましょう!

こちらのスライド風タイプは、簡単なスタイルシートでどうにかなります。

写真を連結して横長のイメージを作ってしまうのがミソです。

ではでは、レッツチャレンジ!!!

 

1.まずは横長のイメージを作成し、メディアを追加からアップロードします。

↓こんな感じ! サイズは1666×133

 

2.スタイルシートに下記をコード追加します。

 

3.最後にhtmlコードを記述します。

 

こんな感じになります!

 

 
 

※追記
★スマートフォンスの時、タイルシートで画像イメージの高さを調整すると、ループ時にカクっと戻されるような表示になる場合がある。
→解決方法 写真をスマートフォン時用にリサイズしたものを利用する。

★横幅4000px以上の画像を利用すると、アンドロイドスマートフォン時に、ループ表示何回目かに真っ白くなってしまう場合がある。
→解決方法 写真の横幅は2000px以下にリサイズしたものを利用する。