More than 5 years have passed since last update.

divについて

Last updated at 2015-06-26Posted at 2015-06-16

#divの枠線と背景をマスターする
##枠線と背景
・枠線の線種、カラー、サイズの指定をする
・上下左右の枠線をそれぞれ指定をする
・背景色と画像、背景画像の繰り返し方、位置を定義する
・背景画像を固定する（〜補講）
〜確認問題～　枠線と背景

html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="レベルアップ問題です。">
		<link rel="stylesheet" type="text/css" href="css/level3.css">
		<title>レベルアップ練習問題</title>
	</head>
	<body>
		<div class="box1">
		<p>見出しとかでつかえます♪</p>
		</div>
    </body>
</html>

css

.box1 p {
	border:	#FF99CC 1px solid;
	width: 393px;
	height: 18px;
	padding: 2px 0px 0px 5px;
	font-size: 13px;
	font-weight: bold;
	color: #FF6699;
	background: url(haikei3.gif);
	background-position: bottom;
	background-repeat: repeat-x;
}

##divのネスト
・divを１つだけネストする
・ネストしたdivの位置を定義する
・ネストしたdiv同士のタテの間隔を定義する
〜確認問題～　divのネスト

html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="レベルアップ問題です。">
		<link rel="stylesheet" type="text/css" href="css/level4.css">
		<title>レベルアップ練習問題</title>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
			</div>
			<div class="box3">
			</div>
		</div>
	</body>
</html>

css

.box1 {
	width: 180px;
	height: 100px;
	background: url(ichimatsu.gif)
}
.box2 {
	width: 20px;
	height: 20px;
	margin: 0px 0px 0px 120px;
	background-color: #FF9999;
}
.box3 {
	width: 20px;
	height: 20px;
	margin: 40px 0px 0px 60px;
	background-color: #FF9999;
}

##divボックスの段組
・divボックスをヨコに２つ段組する
・枠線を定義したdivをつくる
・divボックスをヨコとタテに段組する
・スタイルシートで市松模様をつくる
〜確認問題〜　段組の中に段組していく

html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="レベルアップ問題です。">
		<link rel="stylesheet" type="text/css" href="css/level5.css">
		<title>レベルアップ練習問題</title>
	</head>
	<body>
		<div class="box1">
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="kaijyo">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="kaijyo">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="kaijyo">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="box1-1">
			</div>
			<div class="kaijyo">
			</div>
		</div>
		<div class="box2">
			<div class="box2-1">
			</div>
			<div class="box2-2">
			</div>
			<div class="kaijyo">
			</div>
			<div class="box2-2">
			</div>
			<div class="box2-1">
			</div>
		</div>
    </body>
</html

css

.box1 {
	width: 200px;
	height: 200px;
	background-color:#FFCCCC;
	float: left;
}
.box2 {
	width: 300px;
	height: 200px;
	background-color: #66CCFF;
	float: left;
}
.box1-1 {
	width: 50px;
	height: 50px;
	background-color: #CC0000;
	float: left;
}
.box2-1 {
	width: 200px;
	height: 100px;
	background-color: #3399FF;
	float: left;
}
.box2-2 {
	width: 100px;
	height: 100px;
	background-color: #666699;
	float: left;
}
.kaijyo {
	clear: left;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up