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機能


3 左矢印ナビゲーションキーを使用して移動する場所を指定します右矢印ナビゲーションキーを使用して移動する場所を指定します上矢印ナビゲーションキーを使用するときに移動する場所を指定しますアウトラインを変更し、境界線を越えてエッジを描画します要素のサイズを変更するかどうかを指定します学び続ける
||
<!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
box-sizing を使用すると、領域に合わせて特定の要素を特定の方法で定義できます3
icon を使用すると、作成者は要素をアイコンに相当するものとして設定できます。 nav-left
3nav-right
3 nav-up
3outline-offset
3resize
ユーザー3