css3 ユーザインタフェース

ユーザインタフェース - resize プロパティ

resize プロパティは、ユーザが要素のサイズを変更できるかどうかを指定します。

<!DOCTYPE html>
<html>
<head>
<style> 
div#resize{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}
</style>
</head>
<body>
<h3>ユーザインタフェース - resize プロパティ</h3>
<div id="resize">resize プロパティは、ユーザが要素のサイズを変更できるかどうかを指定します。
</div>
</body>
</html>

ユーザインタフェース - box-sizing プロパティ

この div は左半分を占有します。

この div は右半分を占有します。

<!DOCTYPE html>
<html>
<head>
<style> 
div.container{
	width:30em;
	border:1em solid #aaa;
}
div.box{
	box-sizing:border-box;      /* パディングとボーダーを幅と高さに含める */
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid #e58;
	float:left;
}
</style>
</head>
<body>
<h3>ユーザインタフェース - box-sizing プロパティ</h3>
<div class="container">
<div class="box">この div は左半分を占有します。</div>
<div class="box">この div は右半分を占有します。</div>
</div>
</body>
</html>

指定した方法で、要素にフィットするように領域を定義することができます。

値	内容
content-box	パディングとボーダーを幅と高さに含めない（初期値）
border-box	パディングとボーダーを幅と高さに含める
inherit	親要素の値を継承する

ユーザインタフェース - outline-offset プロパティ

この div には、ボーダーから 15px 外側にアウトラインが描かれています。

<!DOCTYPE html>
<html>
<head>
<style> 
div#outline{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
} 
</style>
</head>
<body>
<h3>段組み - 縦罫線</h3>
<div id="outline">この div には、ボーダーから 15px 外側にアウトラインが描かれています。
</div>
</body>
</html>

戻るホーム次へ