HTML-CSS 入門講座

HTML-CSS 入門講座

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

Appendix-3
知恵袋(Tips)

目次

A3.1 はじめに

(1) 記載内容

  • 「知恵袋(Tips)」は、筆者がWeb サイト開発を行うにあたって気になった事、調べた事、知っておいてほしい事などをまとめたものです。色々なテーマの内容が順不同で掲載されていますので参考にしてください。
  • 「知恵袋(Tips)」の記載内容は、以下の通りです。
A3.2 BOX モデル
BOX モデルの content、padding、border、margin の関係を説明します。
A3.3 margin の相殺
縦方向の margin の重なりによる相殺を理解します。
A3.4 はみ出した領域の表示
ボックスからはみ出たテキストや画像の制御方法を説明します。
A3.5 文字の折り返し
ボックスより大きいテキストの折り返しの制御方法を説明します。
A3.6 フォントサイズの単位
テキストの行間の考え方とフォントサイズの単位を説明解します。
A3.7 画像の配置
画像を並べた時に発生する縦横の隙間を消す方法を説明します。
A3.8 画像のトリミング
大きさの違う画像を一定の大きさでトリミングする方法を説明します。
A3.9 テキストの回り込み
画像などの形状に従ったテキストの回り込み方法を説明します。
A3.10 幅の計算(calc関数)
幅が可変長の場合の計算方法(calc 関数での記述)を説明します。
A3.11 画面幅での画像の切り替え
画面の幅によって表示する画像ファイルを切り替える方法を説明します。
A3.12 端末やブラウザ情報の取得
使用している端末やブラウザの情報(種別)を取得する方法を説明します。
A3.13 三角形の作成
CSS で三角形を作成する方法を説明します。
A3.14 レスポンシブ対応の正方形の作成
CSS でレスポンシブ対応の正方形を作成する方法を説明します。
A3.15 写真ギャラリーの作成
写真を並べる(ギャラリー作成)方法を説明します。
A3.16 画像のマスキング
画像(写真)のマスキング方法を説明します。

A3.2 BOX モデル

(1) 説明

  • BOX モデルとして box-sizing プロパティと content、padding、border、margin の関係を説明します。
  • Webページのレイアウトを作成する場合には、BOX モデルを理解して活用することが重要です。
  • BOX モデルは、content、padding、border、margin の 4 つの領域から構成されています。
  • BOX モデルは、box-sizing プロパティの指定値によって width プロパティや height プロパティの指定値が変わります。
  • box-sizing が指定されていない場合と content-box が指定されている場合の横幅は、以下の計算式になります。
    横幅 = margin(左) + border(左) + padding(左) + width(content) + padding(右) + border(右) + margin(右)
  • box-sizing に border-box が指定されている場合の横幅は、以下の計算式になります。
    横幅 = margin(左) + width(border(左) + padding(左) + content + padding(右) + border(右)) + margin(右)
  • box-sizing プロパティは、リセット CSS で指定しておくことで意識しなくても良くなりますが昔に作成した Web ページのメンテナンスなどでは、box-sizing プロパティが指定されていない場合があるので注意が必要です。
BOXモデル

(2) サンプル表示

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(box-sizing)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box3 {
	width: 500px;
	height: 250px;
	padding: 20px;
	border: 20px #000 solid;
	margin: 20px;
}
.box1 {
	background: aqua;
}
.box2 {
	box-sizing: content-box;
	background: yellow;
}
.box3 {
	box-sizing: border-box;
	background: pink;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">
			width: 500px;<br>
			height: 250px;<br>
			padding: 20px;<br>
			border: 20px #000 solid;<br>
			margin: 20px;<br>
			box-sizing: (指定なし)
		</div>
		<div class="box2">
			width: 500px;<br>
			height: 250px;<br>
			padding: 20px;<br>
			border: 20px #000 solid;<br>
			margin: 20px;<br>
			box-sizing: content-box;
		</div>
		<div class="box3">
			width: 500px;<br>
			height: 250px;<br>
			padding: 20px;<br>
			border: 20px #000 solid;<br>
			margin: 20px;<br>
			box-sizing: border-box;
		</div>
	</div>
</body>
</html>

A3.3 margin の相殺

(1) 説明

  • 縦方向の margin が重なる場合には、margin の相殺(大きい方を採用)が発生します。
  • margin プロパティを指定しても思うように余白が確保できな場合は、margin の相殺が発生していることがあります。
  • margin の相殺は、縦方向の margin の重なりで発生します。横方向の margin の重なりでは発生しません。
marginの相殺
marginの相殺
marginの相殺

(2) サンプル表示

上下の margin が重なっている場合

親と子の margin が重なっている場合

親と子の位置に差ある場合

(3) ソースコード

ソースコード表示(上下の margin の重なり)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-1)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">.box2<br>margin-top: 30px;</div>
	</div>
</body>
</html>
ソースコード表示(親と子の margin の重なり)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-2)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box2-1 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
.box2-1 {
	margin-top: 60px;
	background: pink;
	width: 300px;
	height: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">
			<div class="box2-1">子要素 .box2-1<br>margin-top: 60px;</div>
			親要素 .box2<br>margin-top: 30px;
		</div>
	</div>
</body>
</html>
ソースコード表示(親と子の位置に差あり)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-3)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box2-1 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
.box2-1 {
	margin-top: 60px;
	background: pink;
	width: 300px;
	height: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">
			テキスト
			<div class="box2-1">子要素 .box2-1<br>margin-top: 60px;</div>
			親要素 .box2<br>margin-top: 30px;
		</div>
	</div>
</body>
</html>

A3.4 はみ出した領域の表示

(1) 説明

  • ボックス(div タグなど)内に記述してあるテキストや画像がボックスからはみ出して表示される場合があります。
  • ボックスからはみ出したテキストや画像の表示を制御するには、overflow プロパティを使用します。
  • overflow プロパティに scroll を指定するとはみ出しが発生していない時もスクロールバーが表示されてしまいます。はみ出しが発生していない時にスクロールバーを表示したくない時は、auto を指定します。
はみ出した領域の表示

(2) サンプル表示

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(overflow)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	width: 400px;
	height: 280px;
	border: 1px #444 solid;
	padding: 20px;
	margin: 20px 20px 150px 20px;
}
.box1-1 {
}
.box2-1 {
	overflow: visible;
}
.box3-1 {
	overflow: hidden;
}
.box4-1 {
	overflow: scroll;
}
.box4-2 {
	overflow: scroll;
}
.box5-1 {
	overflow: auto;
}
.box5-2 {
	overflow: auto;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box box1-1">
			overflow: (指定なし)<br>
			123456789012345678901234567890123456789012345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			04 テキスト<br>
			05 テキスト<br>
			06 テキスト<br>
			07 テキスト<br>
			08 テキスト<br>
			<img src="images/tips-512x128-red.jpg" alt="赤">
		</div>
		<div class="box box2-1">
			overflow: visible;<br>
			123456789012345678901234567890123456789012345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			04 テキスト<br>
			05 テキスト<br>
			06 テキスト<br>
			07 テキスト<br>
			08 テキスト<br>
			<img src="images/tips-512x128-red.jpg" alt="赤">
		</div>
		<div class="box box3-1">
			overflow: hidden;<br>
			123456789012345678901234567890123456789012345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			04 テキスト<br>
			05 テキスト<br>
			06 テキスト<br>
			07 テキスト<br>
			08 テキスト<br>
			<img src="images/tips-512x128-red.jpg" alt="赤">
		</div>
		<div class="box box4-1">
			overflow: scroll;<br>
			123456789012345678901234567890123456789012345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			04 テキスト<br>
			05 テキスト<br>
			06 テキスト<br>
			07 テキスト<br>
			08 テキスト<br>
			<img src="images/tips-512x128-red.jpg" alt="赤">
		</div>
		<div class="box box4-2">
			overflow: scroll;<br>
			12345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			<img src="images/tips-256x128-blue.jpg" alt="青">
		</div>
		<div class="box box5-1">
			overflow: auto;<br>
			123456789012345678901234567890123456789012345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			04 テキスト<br>
			05 テキスト<br>
			06 テキスト<br>
			07 テキスト<br>
			08 テキスト<br>
			<img src="images/tips-512x128-red.jpg" alt="赤">
		</div>
		<div class="box box5-2">
			overflow: auto;<br>
			12345678901234567890<br>
			01 テキスト<br>
			02 テキスト<br>
			03 テキスト<br>
			<img src="images/tips-256x128-blue.jpg" alt="青">
		</div>
	</div>
</body>
</html>

A3.5 文字の折り返し

(1) 説明

  • ボックス(div タグなど)内に記述してあるテキストがはみ出している場合の折り返しを制御するには、word-break プロパティ、word-wrap プロパティ、white-space プロパティなどを使用します。
  • 折り返しは、英語と日本語で動作が異なります。
  • white-space プロパティに pre を指定すると改行コードも、そのまま表示されます。(改行されます)
文字の折り返し

(2) サンプル表示

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(文字の折り返し)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	width: 440px;
	border: 1px #444 solid;
	padding: 20px;
	margin: 20px 20px 20px 20px;
}
.box1-1 {
}
.box2-1 {
	word-break: normal;
}
.box2-2 {
	word-break: break-all;
}
.box2-3 {
	word-break: keep-all;;
}
.box3-1 {
	word-wrap: normal;
}
.box3-2 {
	word-wrap: break-word;
}
.box4-1 {
	white-space: normal;
}
.box4-2 {
	white-space: pre;
}
.box4-3 {
	white-space: nowrap;
}
</style>
</head>
<body>
	<div class="container">
		<pre><code>
123456789012345678901234567890123456789012345678901234567890&lt;br&gt;
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000&lt;br&gt;
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.&lt;br&gt;
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。&lt;br&gt;
</code></pre>
		<div class="box box1-1">
(指定なし)<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box2-1">
word-break: normal;<br>
英語は単語の途中で改行しないで日本語は表示範囲に合わせて改行(初期値)<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box2-2">
word-break: break-all;<br>
表示範囲に合わせて改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box2-3">
word-break: keep-all;<br>
単語の切れ目で改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box3-1">
word-wrap: normal;<br>
単語の途中で改行しない(初期値)<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box3-2">
word-wrap: break-word;<br>
単語の途中でも改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box4-1">
white-space: normal;<br>
1つの半角スペースとして表示して表示範囲に合わせて改行(初期値)<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box4-2">
white-space: pre;<br>
そのまま表示<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<div class="box box4-3">
white-space: nowrap;<br>
1つの半角スペースとして表示して表示範囲に合わせて改行しない<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
	</div>
</body>
</html>

A3.6 フォントサイズの単位

(1) 説明

  • フォントの大きさと行間は、font-size プロパティと line-height プロパティで制御します。。
  • font-size プロパティと line-height プロパティの差分は、半分づつ上下に割り当てられます。
  • フォントサイズを指定する単位は、複数ありますので、それぞれの特徴を理解して有効活用してください。
  • 各単位は、フォントサイズだけでなく width プロパティなどの領域を示すプロパティでも使用可能です。
フォントサイズの単位1
フォントサイズの単位2

(2) サンプル表示

ウィンドウサイズの変化によるフォントサイズ変化を確認するために別ウィンドウで表示してください。

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(フォントのサイズ)</title>
<style>
html {
	font-size: 20px;
}
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	margin: 20px;
	padding: 20px;
	border: 1px #ccc solid;
}
.box1 {
	font-size: 30px;
}
.box1-1 {
	font-size: 40px;
}
.box2 {
	font-size: 200%;
}
.box2-1 {
	font-size: 150%;
}
.box3 {
	font-size: 2.0em;
}
.box3-1 {
	font-size: 1.5em;
}
.box4 {
	font-size: 2.0rem;
}
.box4-1 {
	font-size: 1.5rem;
}
.box5 {
	font-size: 5vw;
}
.box5-1 {
	font-size: 5vw;
}
.box6 {
	font-size: 5vh;
}
.box6-1 {
	font-size: 5vh;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box">
			html {<br>
			&nbsp;&nbsp;font-size: 20px;<br>
			}<br>
			テキスト
		</div>
		<div class="box box1">
			font-size: 30px;<br>
			親:テキスト1
			<div class="box1-1">
				子:font-size: 40px;<br>
				テキスト1-1
			</div>
		</div>
		<div class="box box2">
			親:font-size: 200%;<br>
			テキスト2
			<div class="box box2-1">
				子:font-size: 150%;<br>
				テキスト2-1
			</div>
		</div>
		<div class="box box3">
			親:font-size: 2.0em;<br>
			テキスト2
			<div class="box box3-1">
				子:font-size: 1.5em;<br>
				テキスト3-1
			</div>
		</div>
		<div class="box box4">
			親:font-size: 2.0rem;<br>
			テキスト4
			<div class="box box4-1">
				子:font-size: 1.5rem;<br>
				テキスト4-1
			</div>
		</div>
		<div class="box box5">
			親:font-size: 5vw;<br>
			テキスト5
			<div class="box box5-1">
				子:font-size: 5vw;<br>
				テキスト5-1
			</div>
		</div>
		<div class="box box6">
			親:font-size: 5vh;<br>
			テキスト6
			<div class="box6-1">
				子:font-size: 5vh;<br>
				テキスト6-1
			</div>
		</div>
	</div>
</body>
</html>

A3.7 画像の配置

(1) 説明

  • 画像を並べて表示する場合に縦方向や横方向の隙間が発生することがあります。
  • 縦方向の隙間と横方向の隙間では原因が異なりますので、それぞれの対応方法を説明します。
  • vertical-align プロパティを使用する時は、img タグに対してスタイルを指定します。
画像の配置1
画像の配置2

(2) サンプル表示

画像を縦方向に並べた時のすきまを消す

画像を横方向に並べた時のすきまを消す

(3) ソースコード

ソースコード表示(画像を縦方向に並べた時)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(画像の配置-縦方向の隙間を消す)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	margin: 20px;
}
.box1 {
}
.box2 {
	background: #ccc;
	font-size: 200%;
}
.box3 {
	background: #ccc;
	font-size: 200%;
	line-height: 1.0;
}
.box4 {
	background: #ccc;
	font-size: 200%;
}
.box4 img {
	vertical-align: top;
}
.box5 {
	background: #ccc;
	font-size: 200%;
}
.box5 img {
	vertical-align: middle;
}
.box6 {
	background: #ccc;
	font-size: 200%;
}
.box6 img {
	vertical-align: bottom;
}
.box7 img {
	vertical-align: top;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box box1">
			&lt;img src="images/tips-256x256-red.jpg" alt="カメ"&gt;&lt;br&gt;<br>
			&lt;img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ"&gt;<br>
			<img src="images/tips-256x256-red.jpg" alt="カメ"><br>
			<img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ">
		</div>
		<div class="box box2">
			ABCxyz<img src="images/tips-256x256-red.jpg" alt="カメ"> font-size: 200%;
		</div>
		<div class="box box3">
			ABCxyz<img src="images/tips-256x256-red.jpg" alt="カメ"> 上記に加えて line-height: 1.0;
		</div>
		<div class="box box4">
			ABCxyz<img src="images/tips-256x256-red.jpg" alt="カメ"> img { vertical-align: top; }
		</div>
		<div class="box box5">
			ABCxyz<img src="images/tips-256x256-red.jpg" alt="カメ"> img { vertical-align: middle; }
		</div>
		<div class="box box6">
			ABCxyz<img src="images/tips-256x256-red.jpg" alt="カメ"> img { vertical-align: bottom; }
		</div>
		<div class="box box7">
			&lt;img src="images/tips-256x256-red.jpg" alt="カメ"&gt;&lt;br&gt;<br>
			&lt;img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ"&gt;<br>
			img { vertical-align: top; }<br>
			<img src="images/tips-256x256-red.jpg" alt="カメ"><br>
			<img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ">
		</div>
	</div>
</body>
</html>
ソースコード表示(画像を横方向に並べた時)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(画像の配置-横方向の隙間を消す)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	margin: 20px;
}
.box3 {
	overflow: hidden;
}
.box3 img {
	display: block;
	float: left;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box box1">
			&lt;img src="images/tips-256x256-red.jpg" alt="カメ"&gt;<br>
			&lt;img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ"&gt;<br>
			<img src="images/tips-256x256-red.jpg" alt="カメ">
			<img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ">
		</div>
		<div class="box box2">
			&lt;img src="images/tips-256x256-red.jpg" alt="カメ"&gt;&lt;img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ"&gt;<br>
			<img src="images/tips-256x256-red.jpg" alt="カメ"><img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ">
		</div>
		<div class="box box3">
			&lt;img src="images/tips-256x256-red.jpg" alt="カメ"&gt;<br>
			&lt;img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ"&gt;<br>
			img { display: block; float: left; }<br>
			<img src="images/tips-256x256-red.jpg" alt="カメ">
			<img src="images/tips-256x256-blue.jpg" alt="レッサーパンダ">
		</div>
	</div>
</body>
</html>

A3.8 画像のトリミング

(1) 説明

  • 大きさの違う画像を一定の大きさにトリミングする時は、object-fit プロパティを使用します。
  • 縦置きや横置きの写真が混在する場合のギャラリー作成などが容易に行えます。
画像のトリミング

(2) サンプル表示

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(画像トリミング)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	margin: 20px;
}
.box2 img {
	width: 200px;
	height: 200px;
	object-fit: cover;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box box1">256px×256px(元画像)<br><img src="images/tips-256x256-red.jpg" alt="カメ"></div>
		<div class="box box2">200px×200px(トリミング画像)<br><img src="images/tips-256x256-red.jpg" alt="カメ"></div>
		<div class="box box1">256px×128px(元画像)<br><img src="images/tips-256x128-red.jpg" alt="カメ"></div>
		<div class="box box2">200px×200px(トリミング画像)<br><img src="images/tips-256x128-red.jpg" alt="カメ"></div>
		<div class="box box1">128px×512px(元画像)<br><img src="images/tips-128x512-red.jpg" alt="カメ"></div>
		<div class="box box2">200px×200px(トリミング画像)<br><img src="images/tips-128x512-red.jpg" alt="カメ"></div>
	</div>
</body>
</html>

A3.9 テキストの回り込み

(1) 説明

  • 画像の形状に従ってテキストの回り込みを行うこと時は、shape-outside プロパティを使用します。
  • shape-outside プロパティは、回り込みを行う画像のスタイルに指定します。
  • 画像の形状は、円、楕円、多角形などを指定することができます。
BOXモデル

(2) サンプル表示

(3) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(文字の回り込み)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
p {
	width: 500px;
	padding: 0px;
	margin: 20px 20px 0px 30px;
}
.box {
	width: 500px;
	padding: 20px;
	margin: 0px 0px 20px 20px;
	border: 1px #ccc solid;
	overflow: hidden;
}
.image1 {
	margin: 5px 10px 10px 5px;
	float: left;
}
.image2 {
	margin: 5px 5px 10px 10px;
	float: right;
}
.image3 {
	margin: 5px 10px 10px 5px;
	float: right;
	border-radius: 100%;
}
.image4 {
	margin: 5px 5px 10px 10px;
	float: right;
	border-radius: 100%;
	shape-outside: circle();
}
</style>
</head>
<body>
	<div class="container">
		<p>
			img {<br>
			&nbsp;&nbsp;margin: 5px 10px 10px 5px;<br>
			&nbsp;&nbsp;float: left;<br>
			}
		</p>
		<div class="box">
			<img src="images/tips-256x256-red.jpg" alt="赤" class="image1">
	現生の最大種はアルダブラゾウガメ(A. g. hololissaを亜種とした場合)で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質(嘴)は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い(趾骨が2個以上ない)。頭部や四肢は大型鱗で覆われる。
		</div>
		<p>
			img {<br>
			&nbsp;&nbsp;margin: 5px 5px 10px 10px;<br>
			&nbsp;&nbsp;float: right;<br>
			}
		</p>
		<div class="box">
			<img src="images/tips-256x256-red.jpg" alt="赤" class="image2">
	現生の最大種はアルダブラゾウガメ(A. g. hololissaを亜種とした場合)で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質(嘴)は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い(趾骨が2個以上ない)。頭部や四肢は大型鱗で覆われる。
		</div>
		<p>
			img {<br>
			&nbsp;&nbsp;margin: 5px 10px 10px 5px;<br>
			&nbsp;&nbsp;float: right;<br>
			&nbsp;&nbsp;border-radius: 100%;<br>
			}
		</p>
		<div class="box">
			<img src="images/tips-256x256-red.jpg" alt="赤" class="image3">
	現生の最大種はアルダブラゾウガメ(A. g. hololissaを亜種とした場合)で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質(嘴)は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い(趾骨が2個以上ない)。頭部や四肢は大型鱗で覆われる。
		</div>
		<p>
			img {<br>
			&nbsp;&nbsp;margin: 5px 5px 10px 10px;<br>
			&nbsp;&nbsp;float: right;<br>
			&nbsp;&nbsp;border-radius: 100%;<br>
			&nbsp;&nbsp;shape-outside: circle();<br>
			}
		</p>
		<div class="box">
			<img src="images/tips-256x256-red.jpg" alt="赤" class="image4">
	現生の最大種はアルダブラゾウガメ(A. g. hololissaを亜種とした場合)で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質(嘴)は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い(趾骨が2個以上ない)。頭部や四肢は大型鱗で覆われる。
		</div>
	</div>
</body>
</html>

A3.10 幅の計算(calc関数)

(1) 説明

  • ボックスの横幅などを定数で記述できない時は、calc 関数を使用して計算式で記述します。
幅の計算(calc 関数)1
幅の計算(calc 関数)2

(2) サンプル表示

固定幅と可変幅を混在

固定幅と可変幅を混在:ウィンドウサイズの変化を確認するために別ウィンドウで表示してください。

複数ボックスを並べる

複数ボックスを並べる:ウィンドウサイズの変化を確認するために別ウィンドウで表示してください。

(3) ソースコード

ソースコード表示(固定幅と可変幅を混在)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(calc-1)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
.image {
	width: 256px;
	height: 256px;
	float: left;
}
img {
	width: 100%;
}
.text {
	width: calc(100% - 512px);
	height: 256px;
	background: #ccc;
	text-align: center;
	float: left;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<div class="image"><img src="images/tips-256x256-red.jpg" alt="赤"></div>
			<div class="text"><br>テキスト領域<br>両端に256pxのイメージ領域で残りがテキスト領域</div>
			<div class="image"><img src="images/tips-256x256-blue.jpg" alt="青"></div>
		</div>
	</div>
</body>
</html>
ソースコード表示(複数ボックスを並べる)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(calc-2)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
.image {
	width: 256px;
	height: 256px;
	float: left;
}
img {
	width: 100%;
}
.text {
	width: calc((100% - 256px) / 3);
	height: 256px;
	text-align: center;
	float: left;
}
.green {
	background: green;
}
.red {
	background: red;
}
.yellow {
	background: yellow;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<div class="image"><img src="images/tips-256x256-red.jpg" alt="赤"></div>
			<div class="text green"><br>テキスト領域1<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
			<div class="text red"><br>テキスト領域2<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
			<div class="text yellow"><br>テキスト領域3<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
		</div>
	</div>
</body>
</html>

A3.11 画面幅での画像の切り替え

(1) 概要

  • 画面幅の変化(レスポンシブ対応)による画像ファイルの切り替え方法は、複数ありますので、それぞれの特徴を理解して適切な方法で画像切り替えを実施しましょう。
    • メディアクエリ(@media)を使用した切り替え
    • srcset 属性を使用した切り替え-1
    • srcset 属性を使用した切り替え-2
    • picture/source タグを使用した切り替え
    • Retina ディスプレイ用の切り替え

(2) メディアクエリ(@media)を使用した切り替え

画面幅に合わせて複数の img タグを用意しておいて CSS のメディアクエリ(@media)を用いて切り替える方法です。本方法は、画面幅の変更に確実に追従できるというメリットがありますが、CSS の記述が多くなったしまうと同時にネットワーク負荷が大くなってしまうというデメリットがあります。

HTML


<div class="resize">
	<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
	<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
</div>

CSS


div.resize img.min {
	display: none;						/* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
	display: block;						/* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
	div.resize img.min {
		display: block;					/* 800pxより小さい時は、小さな画像を表示に設定 */
	}
	div.resize img.big {
		display: none;					/* 800pxより小さい時は、大きな画像を非表示に設定 */
	}
}

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(メディアクエリ(@media)を使用した切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(メディアクエリ(@media)を使用した切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
}
div.resize img.min {
	display: none;						/* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
	display: block;						/* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
	div.resize img.min {
		display: block;					/* 800pxより小さい時は、小さな画像を表示に設定 */
	}
	div.resize img.big {
		display: none;					/* 800pxより小さい時は、大きな画像を非表示に設定 */
	}
}
</style>
</head>
<body>
	<div class="container">
		<div class="resize">
			<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
			<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
		</div>
	</div>
</body>
</html>

(3) srcset 属性を使用した切り替え-1

img タグの srcset 属性を用いて複数の画像を用意しておきブラウザに適切な画像を選択してもらう方法です。本方法は、記述が簡単というメリットがありますが、環境に応じた最適な画像選択はブラウザによって異なると同時に画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。

HTML


<img src="images/img-1600x1200.jpg" 
	srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(srcset 属性を使用した切り替え-1)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-1)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-1600x1200.jpg" 
			srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
			alt="画像">
	</div>
</body>
</html>

(4) srcset 属性を使用した切り替え-2

img タグの srcset 属性を用いて複数の画像を用意しておき、さらに sizes 属性を用いて画像を選択する条件を指定する方法です。本方法は、記述が簡単というメリットがありますが、画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。

HTML


<img src="images/img-1600x1200.jpg"
	srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
	sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(srcset 属性を使用した切り替え-2)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-2)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-1600x1200.jpg"
			srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
			sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px" 
			alt="画像">
	</div>
</body>
</html>

(5) picture/source タグを使用した切り替え

picture タグ、source タグを用いて複数の画像を用意しておき、指定された条件によって表示する画像を選択する方法です。本方法は、記述が簡単であり画面の横幅の変化に対して思い通りの表示ができます。

HTML


<picture>
	<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
	<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
	<img src="images/img-1600x1200.jpg" alt="画像">
</picture>

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(picture/source タグを使用した切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(picture/source タグを使用した切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<picture>
			<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
			<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
			<img src="images/img-1600x1200.jpg" alt="画像">
		</picture>
	</div>
</body>
</html>

(6) Retina ディスプレイ用の切り替え

論理解像度と物理解像度が異なる Retina ディスプレイで表示する時に高解像度の画像に切り替える方法です。本方法を使用することで Retina ディスプレイの性能を最大限に引き出すことが可能になります。
【注意事項】
通常は、同じ画像で解像度が違う画像を用いて切り替えを行いますが、本サンプルでは、表示している画像の違いをわかりやすくするための別の画像を使用しています。

HTML


<img src="images/img-800x600.jpg" 
	srcset="images/img-800x600.jpg 1x, images/img-800x800@2x.jpg 2x" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(Retina ディスプレイ用の切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(Retina ディスプレイ用の切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-800x600.jpg" 
			srcset="images/img-800x600.jpg 1x, images/img-800x600@2x.jpg 2x" 
			alt="画像">
	</div>
</body>
</html>

A3.12 端末やブラウザ情報の取得

(1) 概要

使用している端末やブラウザの情報(種別)を取得する方法を説明します。

【注意】
ここでの説明は、ブラウザが提供する navigator.userAgent という情報を用いて判断しています。この方法は、ブラウザの将来のバージョンでも同様の情報を提供すると保障されているものではありません。また、ユーザーがこの値を変更することができる(UA なりすまし)ことも覚えておいてください。

取得できる情報は、以下の通りです。

■ブラウザ種別

  • IE
  • Edge
  • Chrome
  • Safari
  • Firefox

■端末 & OS 情報

  • iOS(OS が iOS)
  • iOS_SP(iOS のスマホ)
  • iOS_TB(iOS のタブレット)
  • Android(OS が Android)
  • Android_SP(Android のスマホ)
  • Android_TB(Android のタブレット)
  • SP(スマホ)
  • TB(タブレット)
  • iOS_Android(OS が iOS か Android)

以下の例では、OS が iOS か Android の場合に、body タグに sp クラス、それ以外の場合は、body ラグに pc クラスを付与しています。このクラス名を使用した CSS を記述することで端末によったデザインを変更することができます。例の中では、このクラスを使用して見出しの背景色を変更しています。

サンプル表示

色々な端末で表示結果を確認してください。(別ウィンドウで表示します)

ソースコード

ソースコード表示(装置やブラウザ情報の取得)

ソースコード


<!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 {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6em;
	background: steelblue;
	color: #fff;
	text-align: center;
}
body.pc h1 {
	background: blue;
}
body.sp h1 {
	background: red;
}
dl {
	display: flex;
	flex-wrap: wrap;
}
dl dt {
	width: 220px;
	padding: 0 0 0 45px;
	font-size: 1.4rem;
	position: relative;
}
dl dt::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 10px transparent solid;
	border-right: 16px transparent solid;
	border-bottom: 10px transparent solid;
	border-left: 16px #333 solid;
	display: block;
	position: absolute;
	top: 6px;
	left: 20px;
}
dl dd {
	width: calc(100% - 220px);
	font-size: 1.4rem;
}
.true {
	color: blue;
}
.false {
	color: red;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<h1>端末情報</h1>
		<dl id="devInfoDisp">
		</dl>
	</div>
</div>

<script src="js/jquery-3.6.0.min.js"></script>
<script>

{
	// 端末情報の取得
	let devInfo_UA = navigator.userAgent.toLowerCase();
	// ブラウザ情報
	let devInfo_Ie = !!devInfo_UA.match(/(msie|trident)/i);
	let devInfo_Edge = !!devInfo_UA.match(/edge/i);
	let devInfo_Chrome = devInfo_Edge ? false : !!devInfo_UA.match(/(chrome|crios)/i);
	let devInfo_Safari = (devInfo_Edge || devInfo_Chrome) ? false : !!devInfo_UA.match(/safari/i);
	let devInfo_Firefox = !!devInfo_UA.match(/firefox/i);
	// 装置 & OS 情報
	let devInfo_iPhone = devInfo_UA.indexOf('iphone') >= 0;
	let devInfo_iPod = devInfo_UA.indexOf('ipod') >= 0;
	let devInfo_iPad = devInfo_UA.indexOf('ipad') >= 0;
	let devInfo_iOS = (devInfo_iPhone || devInfo_iPod || devInfo_iPad);
	let devInfo_Android = devInfo_UA.indexOf('android') >= 0;
	let devInfo_TB = (devInfo_iPad || (devInfo_Android && devInfo_UA.indexOf('mobile') < 0));
	let devInfo_SP = (!devInfo_TB && (devInfo_iOS || devInfo_Android));
	let devInfo = {
		// ブラウザ情報
		IE: devInfo_Ie,
		Edge: devInfo_Edge,
		Chrome: devInfo_Chrome,
		Safari: devInfo_Safari,
		Firefox: devInfo_Firefox,
		// 端末 & OS 情報
		iOS: devInfo_iOS,
		iOS_SP: (devInfo_iOS && devInfo_SP),
		iOS_TB: (devInfo_iOS && devInfo_TB),
		Android: devInfo_Android,
		Android_SP: (devInfo_Android && devInfo_SP),
		Android_TB: (devInfo_Android && devInfo_TB),
		SP: devInfo_SP,
		TB: devInfo_TB,
		iOS_Android: (devInfo_iOS || devInfo_Android)
	};
	// bodyタグにスマホやタブレットとパソコンの識別用クラスを付与する例
	if (devInfo.iOS_Android) {
		$('body').addClass('sp')
	}
	else {
		$('body').addClass('pc')
	}
	// 端末情報の表示
	let devInfoDisp = "";
	for (const devInfoKey in devInfo) {
		devInfoDisp += "<dt>" + devInfoKey + "</dt><dd class='" + devInfo[devInfoKey] + "'>" + devInfo[devInfoKey] + "</dd>\n";
	}
	$("#devInfoDisp").html(devInfoDisp);
}

</script>

</body>
</html>

A3.13 三角形の作成

概要

CSS で三角形を作成する方法を説明します。

CSS で四角形や円形を作成するのに比べて三角形を作成するためには工夫が必要です。CSS で三角形を作成するには、border(ボーダー)の描画特性を使用します。以下に順を追って説明します。

(1) border の描画特性の確認

border の線幅が細い場合は目立ちませんが線幅を太くすると縦線と横線が交わる部分は斜めに描画されることがわかります。下記の例では、描画特性をわかりやすくするために上下左右の border の色を変更しています。また、描画領域をわかりやすくするために描画領域の背景色をグレーを設定しています。

ソースコード表示(三角形の作成-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;
}
.triangle1 {
	width: 100px;
	height: 100px;
	border-top: blue 25px solid;
	border-right: green 25px solid;
	border-bottom: yellow 25px solid;
	border-left: red 25px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle1"></div>
</div>

</body>
</html>

(2) コンテンツ領域をなしに設定

中心部のコンテンツ領域をなしに設定し、すべての領域を border に設定することで上下左右の border が三角形になります。

ソースコード表示(三角形の作成-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;
}
.triangle2 {
	width: 100px;
	height: 100px;
	border-top: blue 50px solid;
	border-right: green 50px solid;
	border-bottom: yellow 50px solid;
	border-left: red 50px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle2"></div>
</div>

</body>
</html>
	

(3) 不要なボーダーの描画色を透明に設定

不要な border の描画色を transparent(透明)に設定します。下記の例では、上下と右の border を transparent に設定しています。

ソースコード表示(三角形の作成-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;
}
.triangle3 {
	width: 100px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 50px solid;
	border-bottom: transparent 50px solid;
	border-left: red 50px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle3"></div>
</div>

</body>
</html>
	

(4) 三角形を領域全体に設定

三角形を領域全体にするには、左の border 幅を領域全体に設定し、右の border 幅を 0(ゼロ)に設定します。

ソースコード表示(三角形の作成-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;
}
.triangle4 {
	width: 100px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 100px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle4"></div>
</div>

</body>
</html>
	

(5) 正三角形の作成

三角形を正三角形にするためには、領域の縦横比を 200 対 173 に設定します。

ソースコード表示(三角形の作成-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;
}
.triangle5 {
	width: 86.5px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle5"></div>
</div>

</body>
</html>
	

(6) 三角形の角度を変更

三角形の角度を変更する場合は、transform: rotate(角度); を使用して三角を回転させます。下記の例では、時計方向に 45 度回転させています。回転によって三角形の辺が領域の外にはみ出してしまうことがあるので適時、位置調整を行います。

ソースコード表示(三角形の作成-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 {
	padding: 25px 0 0 25px;
	border: #fff 1px solid;
}
.triangle6 {
	width: 86.5px;
	height: 100px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	transform: rotate(45deg);
	background: #ccc;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle6"></div>
</div>

</body>
</html>
	

(7) 文字列の前に三角形を作成

文字列の前に三角形を作成する場合は、before 擬似要素を使用して三角形を作成します。

ソースコード表示(三角形の作成-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;
}
.triangle7 {
	width: 400px;
	padding: 0 0 0 100px;
	font-size: 4rem;
	position: relative;
}
.triangle7::before {
	content: "";
	display: block;
	width: 86.5px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle7">サンプル</div>
</div>

</body>
</html>
	

(8) 三角形を重ねて矢印を作成

応用編ですが、矢印を作成するには、before 疑似要素と after 疑似要素で、それぞれ三角形を作成して重ねます。

ソースコード表示(三角形の作成-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;
}
.triangle8 {
	width: 486.5px;
	padding: 0 0 0 186.5px;
	font-size: 4rem;
	position: relative;
}
.triangle8::before {
	content: "";
	display: block;
	width: 86.5px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 86.5px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 86.5px solid;
	box-sizing: border-box;
}
.triangle8::after {
	content: "";
	display: block;
	width: 173px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: transparent 50px solid;
	border-right: transparent 0px solid;
	border-bottom: transparent 50px solid;
	border-left: red 173px solid;
	box-sizing: border-box;
}
</style>
</head>

<body>

<div class="container">
	<div class="triangle8">サンプル</div>
</div>

</body>
</html>
	

A3.14 レスポンシブ対応の正方形の作成

概要

CSS でレポンシブ対応の正方形を作成する方法を説明します。

正方形の画像ファイルを使用する場合であればレスポンシブ対応の正方形を作成を作成することは容易ですが文字列などを記載するための領域をレスポンシブ対応の正方形として作成するには工夫が必要です。CSS でレスポンシブ対応の正方形を作成するには、上下の padding(パディング)をパーセンテージ(%)で指定すと親要素の幅が基準になる特性を使用します。以下に順を追って説明します。

(1) 上下のパディング特性の確認

padding-top(パディングトップ)や padding-bottom(パディングボトム)の値をパーセンテージ(%)で指定する場合は、親要素の横幅に対する比率の指定になります。下記の例では、領域(水色)の width(幅)を 30% に設定し。padding-top も 30% に設定しています。この指定を行うことで親要素(ピンク)の幅に対して 30% の正方形を作成することができます。親要素の幅比率で作成されますのでレスポンシブ対応ができていることになります。ただし、この領域は、padding 領域なので文字を記載することは出来ません。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示(レスポンシブ対応の正方形の作成-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;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square1 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
	</ul>
	<div class="wrapper">
		<div class="square1">
		</div>
	</div>
</div>

</body>
</html>

(2) 正方形内に文字を記載

正方形内に文字を記載する場合は、子要素を作成して子要素内に文字を記載します。その子要素は、width(幅)と height(高さ)の両方を 100% にすることで親要素と同じ大きさにした後に position(ポジション)を使用して親要素と重ねます。このようにすることで正方形の中に文字を記載することができます。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示(レスポンシブ対応の正方形の作成-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;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square2 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
	position: relative;
}
.square2 p {
	width: 100%;
	height: 100%;
	padding: 10px;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
		<li>水色領域内に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square2">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(3) 正方形の中央に文字を配置

正方形の中央に文字を配置する場合は、子要素の width(幅)は 100% のままで、height(高さ)の指定はなしにします。このように指定することで高さは記載した文字の高さに設定されます。横中央の指定は、 text-align: center; を指定することで中央配置を行います。縦中央は、ポジションの位置を top: 50%; にして、さらに transform: translateY(-50%); を指定することで縦中央に配置されます。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示(レスポンシブ対応の正方形の作成-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;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
}
.square3 {
	width: 30%;
	padding-top: 30%;
	background: skyblue;
	position: relative;
}
.square3 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>水色領域は、親要素に対して横幅30%の正方形</li>
		<li>水色領域内の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square3">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(4) 親要素の対して 3 個の正方形を配置

応用編ですが、親要素に対して 3 個の正方形を並べる場合は、親要素に対して display: flex; を指定して、子要素の幅と高さに calc(100% / 3) を指定します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示(レスポンシブ対応の正方形の作成-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;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square4 {
	width: calc(100% / 3);
	padding-top: calc(100% / 3);
	position: relative;
}
.square4:nth-child(1) {
	background: skyblue;
}
.square4:nth-child(2) {
	background: yellow;
}
.square4:nth-child(3) {
	background: orange;
}
.square4 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の正方形を並べる</li>
		<li>正方形内の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square4">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

(5) 親要素の対して 3 個の正円を配置

応用編のその 2 ですが、親要素に対して 3 個の正円を並べる場合は、上記の指定に追加して、子要素に border-radius: 50%; を追加します。

横幅変化時の正方形の動きを確認するために別ウィンドウで表示してください。

ソースコード表示(レスポンシブ対応の正方形の作成-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;
}
.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 50px;
	background: pink;
	display: flex;
}
.square5 {
	width: calc(100% / 3);
	padding-top: calc(100% / 3);
	position: relative;
	border-radius: 50%;
}
.square5:nth-child(1) {
	background: skyblue;
}
.square5:nth-child(2) {
	background: yellow;
}
.square5:nth-child(3) {
	background: orange;
}
.square5 p {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
</style>
</head>

<body>

<div class="container">
	<ul>
		<li>ピンク領域は、max-width: 800px; の親要素</li>
		<li>親要素に対して3個の円を並べる</li>
		<li>円の中央に文字を配置</li>
	</ul>
	<div class="wrapper">
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
		<div class="square5">
			<p>サンプル1<br>サンプル2</p>
		</div>
	</div>
</div>

</body>
</html>

A3.15 写真ギャラリーの作成

概要

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

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

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

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

A3.16 画像のマスキング

概要

画像(写真)のマスキング方法を説明します。

次の各要素を使用してでのマスキングを行います。

  • グラデーションを使用してマスキング
  • 画像ファイルを使用してマスキング
  • 画像ファイルとグラデーションを併用してマスキング
  • パスデータを使用してマスキング
  • 文字データを使用してマスキング

(1) グラデーションを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用のグラデーションデータを用意
  • mask-image プロパティを使用してマスキングを実施

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-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;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	background: radial-gradient(red, transparent 100%);
}
.mask3 {
	mask-image: radial-gradient(red, transparent 100%);
	-webkit-mask-image: radial-gradient(red, transparent 100%);
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用グラデーション】</p>
		<div class="mask2">
			<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(2) 画像ファイルを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の画像ファイルを用意
  • mask-image プロパティを使用してマスキングを実施
  • mask 関連プロパティを使用してマスキング内容を調整

【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-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;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
	-webkit-mask-image: url('images/mask-heart.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
    -webkit-mask-position: center;
	mask-image: url('images/mask-heart.png');
	mask-repeat: no-repeat;
	mask-size: contain;
    mask-position: center;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用画像ファイル】</p>
		<div class="mask2">
			<img src="images/mask-heart.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(3) 画像ファイルとグラデーションを併用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の画像ファイルを用意
  • マスク用のグラデーションデータを用意
  • mask-image プロパティを使用してマスキングを実施
  • mask 関連プロパティを使用してマスキング内容を調整

【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-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;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
	background: radial-gradient(red, transparent 100%);
}
.mask4 {
	-webkit-mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
    -webkit-mask-position: center;
	mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
	mask-repeat: no-repeat;
	mask-size: contain;
    mask-position: center;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用画像ファイル】</p>
		<div class="mask2">
			<img src="images/mask-heart.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用グラデーション】</p>
		<div class="mask3">
			<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
		</div>
		<p>【マスク結果】</p>
		<div class="mask4">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(4) パスデータを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用のパスデータを用意
  • clip-path プロパティを使用してマスキングを実施

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-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;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	clip-path: circle(111px at center);
}
.mask3 {
	clip-path: ellipse(50% 50% at center);
}
.mask4 {
	clip-path: inset(20px 20px 20px 20px round 15px);
}
.mask5 {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【正円でのマスク結果】</p>
		<div class="mask2">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【楕円でのマスク結果】</p>
		<div class="mask3">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【長方形でのマスク結果】</p>
		<div class="mask4">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【多角形でのマスク結果】</p>
		<div class="mask5">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
	</div>
</div>

</body>
</html>

(5) 文字データを使用してマスキング

グラデーションデータを使用してマスキングを行います。

マスキングは、次の手順で実施します。

  • マスク前の画像ファイルを用意
  • マスク用の文字データを用意
  • background-clip プロパティを使用してマスキングを実施
  • background 関連プロパティを使用してマスキング内容を調整

マスキング生成を確認するために別ウィンドウで表示してください。

ソースコード表示(画像のマスキング-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;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: top;
}
p {
	font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
	font-size: 5rem;
	font-weight: bold;
	text-align: center;
}
.mask3 {
	font-size: 5rem;
	font-weight: bold;
	text-align: center;
	background-image: url("images/mask-sample.jpg");
	background-position: center;
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<p>【マスク前画像】</p>
		<div class="mask1">
			<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
		</div>
		<p>【マスク用文字】</p>
		<div class="mask2">
			MOMIJI
		</div>
		<p>【マスク結果】</p>
		<div class="mask3">
			MOMIJI
		</div>
	</div>
</div>

</body>
</html>

Copyright© 2021-2023 情報デザイン工房 濱屋 All Rights Reserved.