CSS3 その他

このチュートリアルでは、より興味深いCSS3機能

を使用して3ユーザーインターフェースを拡張

この章では、ユーザーインターフェースに関連する興味深いCSS3属性と同じresize、outline-offsetなど、それを使ってあなたのウェブページを向上させることができます。

要素のサイズを調整

CSSを使って3 resize属性は、要素を水平、垂直、または両方向に調整サイズを変更します。しかし、この属性は通常、<textarea>フォームコントロールからデフォルトの可変サイズの動作を削除します。

p,　div,　textarea　{
　　　　width:　300px;
　　　　min-height:　100px;
　　　　overflow:　auto;
　　　　border:　1px　solid　black;
}
p　{
　　　resize:　horizontal;　
}
div　{
　　　　resize:　both;
}
textarea　{
　　　　resize:　none;
}

輪郭のオフセットを設定

前のセクションでは、輪郭に異なる属性（例えば、幅、色、スタイル）を設定する方法について学びました。しかし、CSS3別の属性、outline-offsetは、輪郭と要素の枠線間のスペースを設定するために使用されます。この属性は負の値を受け入れ、これは要素内に輪郭を配置することも可能です。

p,　div　{
　　　　margin:　50px;
　　　　height:　100px;
　　　　background:　#000;
　　　　outline:　2px　solid　red;
}
p　{
　　　　outline-offset:　10px;
}
div　{
　　　　outline-offset:　-15px;
}