Homepage Zero ガイド
logo

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

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

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

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

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

outline プロパティ …アウトライン(輪郭線)の太さ、スタイル、色を指定する

使用プロパティ

CSSプロパティ

outline: 値;

対象となる
要素

すべて

継承

しない

太さ、スタイル、色を並べる

対応ブラウザ FireFox WinFireFox MacIE5 macOpera

解説

outline プロパティを使えば、アウトライン(輪郭線)の太さ、スタイル、色をまとめて指定することができます。
太さ、スタイル、色のそれぞれの値を半角スペースで区切って指定しましょう。また、並べる順序に決まりはありません。

アウトラインは枠線同様にスタイルを指定しなければ枠線は表示されません。理由は、アウトラインのスタイルを指定しない場合、「none」(アウトラインなし)と見なされるからです。アウトラインを表示するには必ずアウトラインのスタイルを指定しましょう。
アウトラインのプロパティはすべての要素に指定できますが、フォームを飾るために用意されたプロパティなので、フォーム以外に枠線を表示したい場合は枠線関連のプロパティ(CSS一覧プロパティ辞典 - ボーダー -)を使用しましょう。

その他のアウトラインのプロパティは「CSS一覧プロパティ辞典-アウトライン-」を参照してください。
また、太さ、スタイル、色に指定できる値は outline-width プロパティ(太さ)、 outline-style プロパティ(スタイル)、 outline-color プロパティ(色)を参照してください。

使用例

記述例
<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