HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

写真ギャラリーの作成

説明

概要

写真を並べる(ギャラリー作成)方法を説明します。

写真を並べたデザイン(写真ギャラリー)を作成するには、事前に画像加工を行って同じ大きさの画像ファイルを作成しておくと簡単に写真ギャラリーを作成することができます。ただ、場合によっては大きさや方向が違う画像ファイルを使って写真ギャラリーを作成しなければいけないことがあります。本章では、大きさや方向が違う画像ファイルを使った写真ギャラリーの作成方法について説明します。

本章の中で使用するレスポンシブ対応の正方形の作成方法については、「レスポンシブ対応の正方形の作成」を参照してください。

(1) 写真ギャラリー用の画像ファイルの確認

まず、本章の使用するサンプル画像ファイルについて確認してください。この画像ファイルを並べて表示する写真ギャラリーを作成します。

サンプルの画像ファイルは、次の 3 種類の大きさになっています。

  • c1:正方形サンプル(768px×768px)
  • c2:横長長方形サンプル(1024px×768px)
  • c3:縦長長方形サンプル(768px×1024px)

表示領域は、max-width: 800px; の領域(ピンクの部分)を使用しています。

ちなみに、下記の並べ方は、個々の画像ファイルの横幅(width)を指定して、写真枠をインラインブロック属性(display: inline-block;)にすることで横並びを実現しています。

写真ギャラリーで使用する画像ファイルの確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-01)

ソースコード


<!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>

(2) レスポンシブな正方形にトリミング表示(見出し無し)

レスポンシブな正方形に写真をトリミングして並べます。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 親領域の横方向に対して 4 個の写真を配置
  • 画像は、正方形になるようにトリミングを実施

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠は、width: calc(100% / 4); を使用して横幅を設定
  • 写真に対して object-fit: cover; を使用してトリミング実施

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-02)

ソースコード


<!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>

(3) レスポンシブな正方形にトリミング表示(写真下部に見出し表示)

レスポンシブな正方形に写真をトリミングして並べます。写真の下にファイル名を見出しとして表示します。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 親領域の横方向に対して 4 個の写真を配置
  • 写真枠の中には、写真と見出しを配置
  • 写真は、正方形になるようにトリミングを実施

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠は、width: calc(100% / 4); を使用して横幅を設定
  • 写真に対して object-fit: cover; を使用してトリミング実施

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-03)

ソースコード


<!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>

(4) レスポンシブな正方形にトリミング表示(写真に重ねて見出しを表示)

レスポンシブな正方形に写真をトリミングして並べます。写真に重ねて見出しを表示します。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 親領域の横方向に対して 4 個の写真を配置
  • 写真枠の中には、写真と見出しを配置
  • 写真は、正方形になるようにトリミングを実施

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠は、width: calc(100% / 4); を使用して横幅を設定
  • 写真に対して object-fit: cover; を使用してトリミング実施
  • 見出しは、position を使用して写真に重ねて表示(text-shadow を使用して文字の輪郭を明確化)

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-04)

ソースコード


<!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>

(5) レスポンシブな正方形に写真を全体表示(見出し無し)

レスポンシブな正方形に写真を全体表示して並べます。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 親領域の横方向に対して 4 個の写真を配置
  • 写真は、全体が表示できるように拡大・縮小を実施

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠は、width: calc(100% / 4); を使用して横幅を設定
  • 写真に対して object-fit: contain; を使用して拡大・縮小を実施
  • 写真の表示位置を変更する場合は、img タグに object-position を指定

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-05)

ソースコード


<!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>

(6) レスポンシブな正方形に写真を全体表示(写真の下部に見出し表示)

レスポンシブな正方形に写真を全体表示して並べます。写真の下にファイル名を見出しとして表示します。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 親領域の横方向に対して 4 個の写真を配置
  • 写真枠の中には、写真と見出しを配置
  • 写真は、全体が表示できるように拡大・縮小を実施

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠は、width: calc(100% / 4); を使用して横幅を設定
  • 写真に対して object-fit: contain; を使用して拡大・縮小を実施
  • 写真の表示位置を変更する場合は、img タグの object-position の値を変更

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-06)

ソースコード


<!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>

(7) 写真の高さを一定にして親要素の全体にトリミング表示(見出し重ね表示)

写真の高さを一定にして親要素の全体を使用するようにトリミングして並べます。写真に重ねて見出しを表示します。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 写真の高さは、200px に設定
  • 写真枠の中には、写真と見出しを配置
  • 親領域のすきまは、写真をトリミングしてすきまを除去

写真ギャラリー作成手法は、以下の通りです。

  • 親領域に対して display: flex; および flex-wrap: wrap; を使用して横並びを実現
  • 写真枠には、flex-grow: 1; を指定してすきまを調整
  • 写真は、height: 200px; を指定して高さを設定
  • 写真に対して object-fit: cover; を使用してトリミングを実施
  • 見出しは、position を使用して写真に重ねて表示(text-shadow を使用して文字の輪郭を明確化)

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-07)

ソースコード


<!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>

(8) 写真の幅を一定にして縦方向に並べて表示(見出し重ね表示)

写真の幅を一定にして縦方向に並べます。写真に重ねて見出しを表示します。

以下の条件で写真ギャラリーを作成しています。

  • 親領域は、max-width: 800px; の領域を使用
  • 写真は、4 列に縦方向に均等に配置
  • 写真枠の中には、写真と見出しを配置

写真ギャラリー作成手法は、以下の通りです。

  • 写真を配置する列は、column-count: 4; と column-gap: 0; を使用して 4 列を作成
  • 見出しは、position を使用して写真に重ねて表示(text-shadow を使用して文字の輪郭を明確化)

レスポンシブ状態を確認をするために別ウィンドウで表示してください。

ソースコード表示(写真ギャラリーの作成-08)

ソースコード


<!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>

ロケット本体
PAGE
TOP
ロケット炎