ホーム>HTMLリファレンス(アルファベット検索)>outline-widthプロパティ
outline-width プロパティ …アウトライン(輪郭線)の太さを指定する
使用プロパティ
|
outline-width: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
thin(細め)、medium(標準)、thick(太め)、単位付きの長さ
これらのいずれかの値を指定します。 |
|
|
解説
outline-width プロパティを使えば、アウトライン(輪郭線)の太さを指定することができます。値にはthin(細め)、medium(標準)、thick(太め)、単位付きの長さを指定でき、
値にキーワードを指定する場合、実際に表示される枠線の太さはブラウザに依存します。
アウトラインの太さやスタイル、色をまとめて指定するには outline プロパティを使用します。
※アウトラインは枠線同様にスタイルを指定しなければ枠線は表示されません。理由は、アウトラインのスタイルを指定しない場合、「none」(アウトラインなし)と見なされるからです。アウトラインを表示するには必ずアウトラインのスタイルを指定しましょう。
※アウトラインのプロパティはすべての要素に指定できますが、フォームを飾るために用意されたプロパティなので、フォーム以外に枠線を表示したい場合は枠線関連のプロパティ(CSS一覧プロパティ辞典 - ボーダー -)を使用しましょう。
その他のアウトラインのプロパティは「CSS一覧プロパティ辞典-アウトライン-」を参照してください。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
input {
outline-width: 2px;
outline-style: solid;
outline-color: red;
}
textarea {
outline: 5px double yellow;
}
</style>
</head>
<!--ページの本文-->
<body>
<form action="sample.cgi" method="post">
ID:<input type="text" name="id" size="10">
パスワード:<input type="text" name="password" size="20">
<input type="radio" name="hyouka" checked>上出来<br>
<input type="radio" name="hyouka">ふつう<br>
<input type="radio" name="hyouka">よくないと思う<br><br>
<p>コメント:<br>
<textarea name="comment" cols="50" rows="10">ご意見、ご感想をを入力してください。
</textarea>
</p>
<input type="submit" value="送信">
</form>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他