HTML-CSS 入門講座

HTML-CSS 入門講座

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

calc 関数での幅の計算

説明

概要

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

幅の計算(calc 関数)1
幅の計算(calc 関数)2

(1) 固定幅と可変幅を混在

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

ソースコード

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

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>

(2) 複数ボックスを並べる

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

ソースコード

ソースコード表示(複数ボックスを並べる)

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
ロケット炎