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.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>
			親：テキスト１
			<div class="box1-1">
				子：font-size: 40px;<br>
				テキスト１－１
			</div>
		</div>
		<div class="box box2">
			親：font-size: 200%;<br>
			テキスト２
			<div class="box box2-1">
				子：font-size: 150%;<br>
				テキスト２－１
			</div>
		</div>
		<div class="box box3">
			親：font-size: 2.0em;<br>
			テキスト２
			<div class="box box3-1">
				子：font-size: 1.5em;<br>
				テキスト３－１
			</div>
		</div>
		<div class="box box4">
			親：font-size: 2.0rem;<br>
			テキスト４
			<div class="box box4-1">
				子：font-size: 1.5rem;<br>
				テキスト４－１
			</div>
		</div>
		<div class="box box5">
			親：font-size: 5vw;<br>
			テキスト５
			<div class="box box5-1">
				子：font-size: 5vw;<br>
				テキスト５－１
			</div>
		</div>
		<div class="box box6">
			親：font-size: 5vh;<br>
			テキスト６
			<div class="box6-1">
				子：font-size: 5vh;<br>
				テキスト６－１
			</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>

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

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