Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>outline-widthプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

outline-width プロパティ …アウトライン(輪郭線)の太さを指定する

使用プロパティ

CSSプロパティ

outline-width: 値;

対象となる
要素

すべて

継承

しない

thin(細め)、medium(標準)、thick(太め)、単位付きの長さ
これらのいずれかの値を指定します。

対応ブラウザ FireFox WinFireFox MacIE5 macOpera

解説

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 ガイド
ID: パスワード: 上出来
ふつう
よくないと思う

コメント:

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system