どのように作成するか：水平にスクロールできる画像ライブラリ

CSSを使って水平スクロールバー付きの画像ライブラリを作成する方法を学びます。

水平スクロールバー付きの画像ライブラリを作成

第1ステップ - HTMLの追加：

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

第2ステップ - CSSの追加：

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

自分で試してみる

関連ページ

チュートリアル：HTML画像

チュートリアル：CSS画像のスタイル設定