写真を並べる(ギャラリー作成)方法を説明します。
写真を並べたデザイン(写真ギャラリー)を作成するには、事前に画像加工を行って同じ大きさの画像ファイルを作成しておくと簡単に写真ギャラリーを作成することができます。ただ、場合によっては大きさや方向が違う画像ファイルを使って写真ギャラリーを作成しなければいけないことがあります。本章では、大きさや方向が違う画像ファイルを使った写真ギャラリーの作成方法について説明します。
本章の中で使用するレスポンシブ対応の正方形の作成方法については、「レスポンシブ対応の正方形の作成」を参照してください。
まず、本章の使用するサンプル画像ファイルについて確認してください。この画像ファイルを並べて表示する写真ギャラリーを作成します。
サンプルの画像ファイルは、次の 3 種類の大きさになっています。
表示領域は、max-width: 800px; の領域(ピンクの部分)を使用しています。
ちなみに、下記の並べ方は、個々の画像ファイルの横幅(width)を指定して、写真枠をインラインブロック属性(display: inline-block;)にすることで横並びを実現しています。
写真ギャラリーで使用する画像ファイルの確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
padding: 10px;
background: pink;
}
.gallery > div {
display: inline-block;
text-align: center;
vertical-align: top;
}
.gallery > div.c1 img {
width: 150px;
}
.gallery > div.c2 img {
width: 200px;
}
.gallery > div.c3 img {
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div class="c2">
img01.jpg(c2)<br>
<img src="images/img01.jpg" alt="画像サンプル01">
</div>
<div class="c3">
img02.jpg(c3)<br>
<img src="images/img02.jpg" alt="画像サンプル02">
</div>
<div class="c1">
img03.jpg(c1)<br>
<img src="images/img03.jpg" alt="画像サンプル03">
</div>
<div class="c2">
img04.jpg(c2)<br>
<img src="images/img04.jpg" alt="画像サンプル04">
</div>
<div class="c3">
img05.jpg(c3)<br>
<img src="images/img05.jpg" alt="画像サンプル05">
</div>
<div class="c2">
img06.jpg(c2)<br>
<img src="images/img06.jpg" alt="画像サンプル06">
</div>
<div class="c2">
img07.jpg(c2)<br>
<img src="images/img07.jpg" alt="画像サンプル07">
</div>
<div class="c3">
img08.jpg(c3)<br>
<img src="images/img08.jpg" alt="画像サンプル08">
</div>
<div class="c3">
img09.jpg(c3)<br>
<img src="images/img09.jpg" alt="画像サンプル09">
</div>
<div class="c3">
img10.jpg(c3)<br>
<img src="images/img10.jpg" alt="画像サンプル10">
</div>
<div class="c2">
img11.jpg(c2)<br>
<img src="images/img11.jpg" alt="画像サンプル11">
</div>
<div class="c1">
img12.jpg(c1)<br>
<img src="images/img12.jpg" alt="画像サンプル12">
</div>
<div class="c1">
img13.jpg(c1)<br>
<img src="images/img13.jpg" alt="画像サンプル13">
</div>
<div class="c2">
img14.jpg(c2)<br>
<img src="images/img14.jpg" alt="画像サンプル14">
</div>
<div class="c2">
img15.jpg(c2)<br>
<img src="images/img15.jpg" alt="画像サンプル15">
</div>
<div class="c2">
img16.jpg(c2)<br>
<img src="images/img16.jpg" alt="画像サンプル16">
</div>
<div class="c2">
img17.jpg(c2)<br>
<img src="images/img17.jpg" alt="画像サンプル17">
</div>
<div class="c1">
img18.jpg(c1)<br>
<img src="images/img18.jpg" alt="画像サンプル18">
</div>
<div class="c1">
img19.jpg(c1)<br>
<img src="images/img19.jpg" alt="画像サンプル19">
</div>
<div class="c2">
img20.jpg(c2)<br>
<img src="images/img20.jpg" alt="画像サンプル20">
</div>
</div>
</div>
</body>
</html>
レスポンシブな正方形に写真をトリミングして並べます。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.gallery > div {
width: calc(100% / 4);
padding-top: calc(100% / 4);
position: relative;
}
.gallery > div > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
border: #fff 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
</div>
</div>
</body>
</html>
レスポンシブな正方形に写真をトリミングして並べます。写真の下にファイル名を見出しとして表示します。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: #ccc 1px solid;
}
.gallery > div {
width: calc(100% / 4);
border: #ccc 1px solid;
}
.gallery > div > div {
width: 100%;
padding-top: 100%;
position: relative;
}
.gallery > div > div > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.gallery > div > p {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div>
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<p>img01.jpg</p>
</div>
<div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<p>img02.jpg</p>
</div>
<div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<p>img03.jpg</p>
</div>
<div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<p>img04.jpg</p>
</div>
<div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<p>img05.jpg</p>
</div>
<div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<p>img06.jpg</p>
</div>
<div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<p>img07.jpg</p>
</div>
<div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<p>img08.jpg</p>
</div>
<div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<p>img09.jpg</p>
</div>
<div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<p>img10.jpg</p>
</div>
<div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<p>img11.jpg</p>
</div>
<div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<p>img12.jpg</p>
</div>
<div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<p>img13.jpg</p>
</div>
<div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<p>img14.jpg</p>
</div>
<div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<p>img15.jpg</p>
</div>
<div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<p>img16.jpg</p>
</div>
<div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<p>img17.jpg</p>
</div>
<div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<p>img18.jpg</p>
</div>
<div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<p>img19.jpg</p>
</div>
<div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
<p>img20.jpg</p>
</div>
</div>
</div>
</body>
</html>
レスポンシブな正方形に写真をトリミングして並べます。写真に重ねて見出しを表示します。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: #ccc 1px solid;
}
.gallery > div {
width: calc(100% / 4);
border: #ccc 1px solid;
position: relative;
}
.gallery > div > div {
width: 100%;
padding-top: 100%;
position: relative;
}
.gallery > div > div > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.gallery > div > p {
width: 100%;
text-align: center;
color: #fff;
text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div>
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<p>img01.jpg</p>
</div>
<div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<p>img02.jpg</p>
</div>
<div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<p>img03.jpg</p>
</div>
<div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<p>img04.jpg</p>
</div>
<div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<p>img05.jpg</p>
</div>
<div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<p>img06.jpg</p>
</div>
<div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<p>img07.jpg</p>
</div>
<div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<p>img08.jpg</p>
</div>
<div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<p>img09.jpg</p>
</div>
<div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<p>img10.jpg</p>
</div>
<div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<p>img11.jpg</p>
</div>
<div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<p>img12.jpg</p>
</div>
<div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<p>img13.jpg</p>
</div>
<div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<p>img14.jpg</p>
</div>
<div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<p>img15.jpg</p>
</div>
<div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<p>img16.jpg</p>
</div>
<div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<p>img17.jpg</p>
</div>
<div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<p>img18.jpg</p>
</div>
<div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<p>img19.jpg</p>
</div>
<div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
<p>img20.jpg</p>
</div>
</div>
</div>
</body>
</html>
レスポンシブな正方形に写真を全体表示して並べます。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: 1px #ccc solid;
}
.gallery > div {
width: calc(100% / 4);
padding-top: calc(100% / 4);
position: relative;
}
.gallery > div > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: #ccc 1px solid;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
</div>
</div>
</body>
</html>
レスポンシブな正方形に写真を全体表示して並べます。写真の下にファイル名を見出しとして表示します。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border: 1px #ccc solid;
}
.gallery > div {
width: calc(100% / 4);
border: #ccc 1px solid;
}
.gallery > div > div {
width: 100%;
padding-top: 100%;
position: relative;
}
.gallery > div > div > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
position: absolute;
top: 0;
left: 0;
}
.gallery > div > p {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div>
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<p>img01.jpg</p>
</div>
<div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<p>img02.jpg</p>
</div>
<div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<p>img03.jpg</p>
</div>
<div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<p>img04.jpg</p>
</div>
<div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<p>img05.jpg</p>
</div>
<div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<p>img06.jpg</p>
</div>
<div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<p>img07.jpg</p>
</div>
<div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<p>img08.jpg</p>
</div>
<div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<p>img09.jpg</p>
</div>
<div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<p>img10.jpg</p>
</div>
<div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<p>img11.jpg</p>
</div>
<div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<p>img12.jpg</p>
</div>
<div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<p>img13.jpg</p>
</div>
<div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<p>img14.jpg</p>
</div>
<div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<p>img15.jpg</p>
</div>
<div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<p>img16.jpg</p>
</div>
<div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<p>img17.jpg</p>
</div>
<div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<p>img18.jpg</p>
</div>
<div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<p>img19.jpg</p>
</div>
<div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
<p>img20.jpg</p>
</div>
</div>
</div>
</body>
</html>
写真の高さを一定にして親要素の全体を使用するようにトリミングして並べます。写真に重ねて見出しを表示します。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.gallery > div {
position: relative;
flex-grow: 1;
}
.gallery > div > div {
width: 100%;
}
.gallery > div > div > img {
width: 100%;
height: 200px;
object-fit: cover;
border: #fff 1px solid;
vertical-align: top;
}
.gallery > div > p {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
text-align: center;
text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div>
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<p>img01.jpg</p>
</div>
<div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<p>img02.jpg</p>
</div>
<div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<p>img03.jpg</p>
</div>
<div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<p>img04.jpg</p>
</div>
<div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<p>img05.jpg</p>
</div>
<div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<p>img06.jpg</p>
</div>
<div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<p>img07.jpg</p>
</div>
<div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<p>img08.jpg</p>
</div>
<div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<p>img09.jpg</p>
</div>
<div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<p>img10.jpg</p>
</div>
<div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<p>img11.jpg</p>
</div>
<div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<p>img12.jpg</p>
</div>
<div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<p>img13.jpg</p>
</div>
<div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<p>img14.jpg</p>
</div>
<div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<p>img15.jpg</p>
</div>
<div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<p>img16.jpg</p>
</div>
<div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<p>img17.jpg</p>
</div>
<div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<p>img18.jpg</p>
</div>
<div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<p>img19.jpg</p>
</div>
<div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
<p>img20.jpg</p>
</div>
</div>
</div>
</body>
</html>
写真の幅を一定にして縦方向に並べます。写真に重ねて見出しを表示します。
以下の条件で写真ギャラリーを作成しています。
写真ギャラリー作成手法は、以下の通りです。
レスポンシブ状態を確認をするために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真を並べる(ギャラリー)の作成</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
ul {
max-width: 800px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
}
.gallery {
max-width: 800px;
margin: 0 auto;
column-count: 4;
column-gap: 0;
}
.gallery > div {
position: relative;
}
.gallery > div > div > img {
width: 100%;
border: #fff 1px solid;
vertical-align: top;
}
.gallery > div > p {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
text-align: center;
text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<div>
<div><img src="images/img01.jpg" alt="画像サンプル01"></div>
<p>img01.jpg</p>
</div>
<div>
<div><img src="images/img02.jpg" alt="画像サンプル02"></div>
<p>img02.jpg</p>
</div>
<div>
<div><img src="images/img03.jpg" alt="画像サンプル03"></div>
<p>img03.jpg</p>
</div>
<div>
<div><img src="images/img04.jpg" alt="画像サンプル04"></div>
<p>img04.jpg</p>
</div>
<div>
<div><img src="images/img05.jpg" alt="画像サンプル05"></div>
<p>img05.jpg</p>
</div>
<div>
<div><img src="images/img06.jpg" alt="画像サンプル06"></div>
<p>img06.jpg</p>
</div>
<div>
<div><img src="images/img07.jpg" alt="画像サンプル07"></div>
<p>img07.jpg</p>
</div>
<div>
<div><img src="images/img08.jpg" alt="画像サンプル08"></div>
<p>img08.jpg</p>
</div>
<div>
<div><img src="images/img09.jpg" alt="画像サンプル09"></div>
<p>img09.jpg</p>
</div>
<div>
<div><img src="images/img10.jpg" alt="画像サンプル10"></div>
<p>img10.jpg</p>
</div>
<div>
<div><img src="images/img11.jpg" alt="画像サンプル11"></div>
<p>img11.jpg</p>
</div>
<div>
<div><img src="images/img12.jpg" alt="画像サンプル12"></div>
<p>img12.jpg</p>
</div>
<div>
<div><img src="images/img13.jpg" alt="画像サンプル13"></div>
<p>img13.jpg</p>
</div>
<div>
<div><img src="images/img14.jpg" alt="画像サンプル14"></div>
<p>img14.jpg</p>
</div>
<div>
<div><img src="images/img15.jpg" alt="画像サンプル15"></div>
<p>img15.jpg</p>
</div>
<div>
<div><img src="images/img16.jpg" alt="画像サンプル16"></div>
<p>img16.jpg</p>
</div>
<div>
<div><img src="images/img17.jpg" alt="画像サンプル17"></div>
<p>img17.jpg</p>
</div>
<div>
<div><img src="images/img18.jpg" alt="画像サンプル18"></div>
<p>img18.jpg</p>
</div>
<div>
<div><img src="images/img19.jpg" alt="画像サンプル19"></div>
<p>img19.jpg</p>
</div>
<div>
<div><img src="images/img20.jpg" alt="画像サンプル20"></div>
<p>img20.jpg</p>
</div>
</div>
</div>
</body>
</html>