CSS - 画像ギャラリー

ウェブデザイナー志望者の皆さん、こんにちは！今日は、CSS画像ギャラリーの楽しい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅をガイドするのを嬉しく思っています。それでは、退屈な静的な画像を目を引くインタラクティブなギャラリーに変換しましょう！

シンプルな画像ギャラリー

まずは基本から。シンプルな画像ギャラリーは、壁に写真を並べるのと同じです。プレゼンテーションがすべてです。以下に、CSSを使って作成する方法を示します：

<div class="gallery">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<img src="image3.jpg" alt="画像3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

この例では、flexboxを使用してレスポンシブルなレイアウトを作成しています。flex-wrap: wrapプロパティは、スペースが不足すると画像が次の行に折り返されるようにします。justify-content: centerプロパティは、画像を水平方向に中央に配置します。

ホバー効果付き画像ギャラリー

次に、インタラクティブ性を追加しましょう！ホバー効果は、ギャラリーをより魅力的にします。近く見ると現れる秘密のメッセージのように感じられます。

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="画像1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- 他の画像も同様に繰り返します -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

このCSSは、ホバー時に表示されるオーバーレイを作成します。transitionプロパティは、スムーズなフェードイン効果を提供します。

メディアクエリを使用したレスポンシブル画像ギャラリー

今日の多様なデバイスの世界では、レスポンシブルなデザインが鍵です。ギャラリーを異なる画面サイズに対応させましょう：

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

このCSSは、CSS Gridを使用してレスポンシブルなレイアウトを作成します。minmax関数は、画像が少なくとも200px幅であることを確保し、スペースが許す限り拡大可能です。メディアクエリは、小さな画面に対応するためのレイアウトを調整します。

シntax

今まで使用してきたシntaxを理解するために、ちょっと停下来ましょう。CSSのプロパティは以下の構造に従います：

selector {
property: value;
}

以下は、画像ギャラリーで使用される一般的なCSSプロパティの表です：

プロパティ	説明	例
display	表示動作を指定	display: flex;
width	要素の幅を設定	width: 200px;
height	要素の高さを設定	height: 200px;
margin	要素のマージンを設定	margin: 10px;
object-fit	画像のサイズ調整方法を指定	object-fit: cover;
position	配置方法を指定	position: relative;
opacity	要素の不透明度を設定	opacity: 0;
transition	トランジション効果を指定	transition: .5s ease;

水平スクロール付き画像ギャラリー

時々、水平方向にスクロールするギャラリーが必要です。写真リールのようにスワイプできます：

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<!-- 必要に応じて他の画像を追加 -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

このCSSは、水平方向にスクロールするギャラリーを作成します。overflow-x: autoプロパティは、必要に応じて水平スクロールバーを追加します。

垂直スクロール付き画像ギャラリー

垂直スクロール付きギャラリーは、限られたスペースで多くの画像を展示するのに適しています：

<div class="gallery-vertical">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<!-- 必要に応じて他の画像を追加 -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

このCSSは、垂直方向にスクロールするギャラリーを作成します。overflow-y: scrollプロパティは、垂直スクロールバーを追加します。

CSS Grid画像ギャラリー

CSS Gridは強力なツールで、複雑なレイアウトを作成するのに適しています。それを用来、動的な画像ギャラリーを作成しましょう：

<div class="grid-gallery">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<img src="image3.jpg" alt="画像3">
<img src="image4.jpg" alt="画像4">
<img src="image5.jpg" alt="画像5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

このCSSは、グリッドレイアウトを作成し、一部の画像が複数の列や行を跨ぐようにします。

タブ付き画像ギャラリー

タブ付きギャラリーは、異なるセットの画像を整理するのに適しています：

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">自然</button>
<button class="tablinks" onclick="openTab(event, 'City')">都市</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="自然1">
<img src="nature2.jpg" alt="自然2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="都市1">
<img src="city2.jpg" alt="都市2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

このCSSは、タブインターフェースを作成します。JavaScriptを使用して機能させる必要があります：

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS スライドショー

簡単なスライドショーを作成しましょう：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

JavaScriptを使用してスライドショーを制御する必要があります：

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // 2秒ごとに画像を変更
}

CSS スライドショーギャラリー

最後に、スライドショーとサムネイルを組み合わせて、よりインタラクティブな体験を提供するギャラリーを作成しましょう：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

サムネイルクリックを処理するためにJavaScriptを修正する必要があります：

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

そして、ここまででCSS画像ギャラリーの技術を幅広くカバーしました。実践を通じて完璧にするまで練習しましょう。自分だけのユニークなギャラリーを作成してみてください。幸運を祈っています！

Credits: Image by storyset