文字を囲む

文字の囲み

  • borderプロパティの値を指定する
  • 文字と囲みとの空きは、paddingプロパティの値を指定する


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>実践枠で囲む</title>
<style>
<!--
body {
	font-size: 1.0em;
}
.border1, .border2, .border3, .border4, .border5, .border6 {
	margin: 12px 0;
	padding: 12px;
}	
.border1 {
	border: 1px solid #666;
}
.border2 {
	border: 4px solid #666;
}
.border3 {
	border: 1px solid #f00;
}
.border4 {
	border: 1px dotted #666;
}
.border5 {
	border-top: 4px solid #296;
	border-right: 1px dotted #296;
	border-bottom: 1px dotted #296;
	border-left: 12px solid #296;
}
.border6 {
	border-top: 2px solid #269;
	border-bottom: 4px double #269;
	border-left: 1px solid #269;
}
-->
</style>
</head>
<body>
<div id="box1">
<p class="border1">テキストの囲みを表現したい［標準］</p>
<p class="border2">テキストの囲みを表現したい［線の太さ］</p>
<p class="border3">テキストの囲みを表現したい［線のカラー］</p>
<p class="border4">テキストの囲みを表現したい［線のスタイル］</p>
<p class="border5">テキストの囲みを表現したい［複数の指定］</p>
<p class="border6">テキストの囲みを表現したい［複数の指定］</p>
</div>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>破線枠で囲む</title>
<style>
<!--
body {
	font-size: 1.0em;
}
.box1, .box2 {
	margin-bottom: 18px;
	padding:12px;
	border: 1px solid #999;
}
.box2 p {
	background-color:#acf;
}
.border1, .border2, .border3, .border4, .border5 {
	border-bottom: 1px dashed #000;
}
.border1 {
	margin:0;
	padding:12px;
}
.border2 {
	margin:0;
	padding:12px 0;
}
.border3 {
	margin:0;
	padding:12px 0 2px 0;
}
.border4 {
	margin:0;
	padding:2px 0;
}
-->
</style>
</head>
<body>
<div class="box1">
<p class="border2">テキストに破線を表示したい［padding:12px 0］</p>
</div><!-- ▲.box1-->
<div class="box1">
<p class="border3">テキストに破線を表示したい［padding:12px 0 2px 0］</p>
</div><!-- ▲.box1-->
<div class="box1">
<p class="border4">テキストに破線を表示したい［padding:2px 0］</p>
</div><!-- ▲.box1-->
<hr />
<div class="box2">
<p class="border1">テキストに破線を表示したい［padding:12px］</p>
</div><!-- ▲.box2-->
<div class="box2">
<p class="border2">テキストに破線を表示したい［padding:12px 0］</p>
</div><!-- ▲.box2-->
<div class="box2">
<p class="border3">テキストに破線を表示したい［padding:12px 0 2px 0］</p>
</div><!-- ▲.box2-->
<div class="box2">
<p class="border4">テキストに破線を表示したい［padding:2px 0］</p>
</div><!-- ▲.box2-->
</body>
</html>