CSS3ユーザーインターフェース
CSS3 では、要素のサイズ、ボックスのサイズ、外枠を調整するための新しいユーザー インターフェイス機能がいくつか追加されました。
この章では、次のユーザー インターフェイス プロパティについて学習します:
resize
box-sizing
outline-offset
Browser support
表内の数字はサポートを示しますこのプロパティの最初のブラウザのバージョン番号。
-webkit-、-ms-、または -moz- の直前の数字は、このプレフィックス属性をサポートする最初のブラウザーのバージョン番号です。
CSS3 サイズ変更
CSS3 では、resize 属性は、ユーザーが要素のサイズを変更する必要があるかどうかを指定します。
この div 要素はユーザーによってサイズ変更されます。 (Firefox 4 以降、Chrome、Safari の場合)
CSS コードは次のとおりです:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンラインの例を表示します
CSS3 ボックス サイズ ボックス サイズ
box-sizing プロパティを使用すると、コンテンツが特定の領域にどのように収まるかを正確に定義できます。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>例の実行»
「例の実行」ボタンをクリックしてオンライン例を表示します
CSS3のアウトライン変更(outline-offset)
outline-offset属性はアウトラインと描画をオフセットします境界線の端を越えた輪郭。
アウトラインは次の 2 つの点で境界線と異なります:
アウトラインはスペースを取りません
アウトラインは長方形でなくても構いません
この div には境界線の 15 ピクセル外側にアウトラインがあります。 CCSS コードは次のとおりです:
インスタンス <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>
»
| 説明 | CSS | |
|---|---|---|
| を使用すると、要素を標準のUI要素のように見せることができます | 3 | |
| を使用すると、領域に合わせて特定の方法で何かを定義できます 要素 | 3 | |
| は、クリエイターに要素をアイコンに相当するものに設定する機能を提供します。 | 3 | nav-left左矢印ナビゲーションキーを使用して移動する場所を指定します |
| nav-right | 右矢印ナビゲーションキーを使用して移動する場所を指定します | |
| nav-up | 上矢印ナビゲーションキーを使用するときに移動する場所を指定します | |
| outline-offset | アウトラインを変更し、境界線を越えてエッジを描画します | |
| resize | 要素のサイズを変更するかどうかを指定します | |
| 3 | ||
