TECH I.S.

CSS 画像ギャラリー


CSS を使用して画像ギャラリーを作成できます。

Cinque Terre
ここに画像の説明を追加します
Forest
ここに画像の説明を追加します
Northern Lights
ここに画像の説明を追加します
Mountains
ここに画像の説明を追加します

イメージギャラリー

次の画像ギャラリーは CSS で作成されます。

<html> <head> <style> div.gallery {   margin: 5px; border: 1px solid #ccc; float: left;   width: 180px; } div.gallery:hover {   border: 1px solid #777; } div.gallery img {   width: 100%;   height: auto; } div.desc {   padding: 15px;   text-align: center; } </style> </head> <body> <div class="gallery">   <a target="_blank" href="img_5terre.jpg">     <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">   </a>   <div class="desc">Add a description of the image here</div> </div> <div class="gallery">   <a target="_blank" href="img_forest.jpg">     <img src="img_forest.jpg" alt="Forest" width="600" height="400">   </a>   <div class="desc">Add a description of the image here</div> </div> <div class="gallery">   <a target="_blank" href="img_lights.jpg">     <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">   </a>   <div class="desc">Add a description of the image here</div> </div> <div class="gallery">   <a target="_blank" href="img_mountains.jpg">     <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">   </a>   <div class="desc">Add a description of the image here</div> </div> </body> </html>

自分で試してみる »


その他の例

レスポンシブ イメージ ギャラリー

CSS メディア クエリを使用して、デスクトップ、タブレット、スマートフォンで見栄えのするレスポンシブ イメージ ギャラリーを作成する方法。

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細