CSS入門 | CSS3拡張 | ユーザーインターフェース

ユーザーインターフェース(user interface, UI)

CSS3では、新しいユーザーインターフェースを利用して、ユーザーが要素のサイズやアウトラインなどを自由に変更できるようにする。

ユーザーインターフェース(user interface)のために提供されるプロパティは次のとおりである。

1. resize
2. outline-offset
3. box-sizing
4. nav-index
5. nav-left
6. nav-right
7. nav-up
8. nav-down

CSS3ユーザーインターフェース(user Interface)の対応バージョン

CSS3ユーザーインターフェース(user Interface)に対応している主要Webブラウザーのバージョンは次のとおりである。ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

resizeプロパティ

resizeプロパティは、ユーザーがその要素の高さや幅を変更できるようにする。

<style>
    #width { resize: horizontal; }
    #height { resize: vertical; }
    #both { resize: both; }
</style>

上の例のようにresizeプロパティが設定された要素には、右下にサイズ変更ハンドルが表示される。このハンドルをマウスでドラッグして、ユーザーが直接要素のサイズを調整できる。

resizeプロパティはInternet Explorerではサポートされません。

outline-offsetプロパティ

outline-offsetプロパティは、その要素の境界線(border)とアウトライン(outline)の間に空間(offset)を追加する。

アウトライン(outline)と境界線(border)の違いは次のとおりである。

1. アウトラインは境界線の外側で要素を囲む線である。
2. アウトラインはHTML要素のサイズに含まれない。
3. アウトラインは四角形ではない場合もある。

次の例は、outline-offsetプロパティを利用してアウトラインと境界線を確認する例である。

<style>
    div {
        border: 1px solid black;
        outline: 1px solid red;
        outline-offset: 20px;
    }
</style>

outline-offsetプロパティはInternet Explorerではサポートされない。

box-sizingプロパティ

box-sizingプロパティは、その要素の幅(width)と高さ(height)に、パディング(padding)と境界線(border)のサイズまで含める。

<style>
    #no_border_box { border: 10px solid green; padding: 20px; }
    #border_box { border: 10px solid red; padding: 20px; box-sizing: border-box; }
</style>

CSSボックスモデルで見たHTML要素の全体幅を求める公式は次のとおりである。 width + left padding + right padding + left border + right border + left margin + right margin

したがって、上の例で最初のdiv要素の全体幅は次のように設定される。 350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px

しかしbox-sizingプロパティの値をborder-boxに設定すると、その要素の総幅と高さにパディングと境界線のサイズまで含めて設定する。したがって、上の例で2番目のdiv要素の全体幅は次のように設定される。 350px + 10px + 10px = 370px

CSS3ユーザーインターフェース(user Interface)プロパティ