HTML-CSS 入門講座

HTML-CSS 入門講座

Appendix-3
知恵袋(Tips)

目次

A3.1 はじめに

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

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