CSS3ユーザーインターフェース
CSS3 ユーザーインターフェイス
CSS3 では、要素のサイズ、ボックスのサイズ、外枠を調整するための新しいユーザー インターフェイス機能がいくつか追加されました。
この章では、次のユーザー インターフェイス プロパティについて学習します:
resize
box-sizing
outline-offset
CSS3 Resize
CSS3 内、resize 属性は、ユーザーが要素のサイズを変更する必要があるかどうかを指定します。
この div 要素はユーザーによってサイズ変更されます。 (Firefox 4 以降、Chrome、Safari の場合)
CSS コードは次のとおりです:
インスタンス
ユーザーが指定した div 要素のサイズ:
<!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>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>プログラムを実行して試してください
CSS3 ボックス サイズ設定
ボックス サイズ設定プロパティを使用すると、コンテンツが特定の領域にどのように収まるかを正確に定義できます。
例
2つの隣り合った枠線付きボックスを指定します:<!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)
概要- offset プロパティ アウトラインをオフセットし、境界線の端を越えて描画します。 アウトラインは次の 2 つの点で境界線とは異なります: アウトラインはスペースをとらない アウトラインは長方形でなくてもかまいません例
境界線の端から 15 ピクセル外側にアウトラインを指定します:<!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>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>試してみるプログラム新しいUI機能
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
- おすすめコース
- コースウェアのダウンロード
-
初級CSS3 入門チュートリアル
11787 人が視聴しています -
初級入門から習熟までの CSS3 チュートリアル
30459 人が視聴しています -
初級SOAP 入門チュートリアル
11273 人が視聴しています -
初級JavaScript 入門チュートリアル
8998 人が視聴しています -
初級jQuery 入門チュートリアル
7379 人が視聴しています -
初級AJAX 入門チュートリアル
12190 人が視聴しています -
初級Firebug 入門チュートリアル
14784 人が視聴しています -
中級Webpack 入門ビデオ チュートリアル
8566 人が視聴しています -
中級CSS3 入門ビデオチュートリアル
9119 人が視聴しています -
初級HTML5 独学入門チュートリアル
13817 人が視聴しています -
初級TP5.0 MVC 入門ビデオ チュートリアル
43217 人が視聴しています -
初級PHP ゼロベースの入門チュートリアル
176026 人が視聴しています
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
| プロパティ | 説明 | CSS |
|---|---|---|
| 外観 | を使用すると、要素を標準のUI要素のように見せることができます | 3 |
| box-sizing | を使用すると、領域に合わせて特定の要素を特定の方法で定義できます | 3 |
| icon | を使用すると、作成者は要素をアイコンに相当するものとして設定できます。 | nav-left |
| 3 | nav-right | |
| 3 | nav-up | |
| 3 | outline-offset | |
| 3 | resize | |
| ユーザー | 3 | |