|
 |
|
枠の色を指定する
サンプルと機能
→ Sample：H1タグやTABLEタグなどの枠の色を変更する
枠の色を、H1タグやTABLEタグなどに指定します。
もちろん、先に枠の形や色を設定しておく必要があります。
ほぼ全てのタグに適用することが可能です。
NN4.x以下では枠の表示がおかしくなります。
スタイルシート・サンプル
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。
→ ページ全体に適用する場合
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
P { /* 段落の枠の色 */
border-style: solid; /* 枠の形
*/
border-width: 8px; /* ４方向の枠 */
border-top-color: #ff0000; /* 上の色 */
border-bottom-color: #00ff00; /* 下の色 */
border-left-color: #0000ff; /* 左の色 */
border-right-color: #00ffff; /* 右の色 */
background-color: #cc0000
}
H1 { /* 見出しの枠の色 */
border-style: solid; /* 枠の形 */
border-width: 2px 2px 2px 8px; /* 上、右、下、左の枠 */
border-color: #0000ff; /* ４方向の色 */
background-color: #00cc00
}
TABLE { /*
表の枠の色 */
border-style: solid; /* 枠の形 */
border-width: 8px; /* ４方向の枠 */
border-color: #999900 #009999 #990099 #009900; /* 上、右、下、左の色 */
background-color: #0000cc
}
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
解説・注意点など
使用スタイル：border-colorまたは(border-top-color, border-bottom-color, border-left-color, border-color)
指定可能な値：#ff0000やRedなどの色を表す値
border-colorで指定する場合、スペースで区切って４方向の色を指定します。
その際、指定する値の数によって以下のように設定されます。
| 値が１つの場合 |
： |
上下左右 |
| 値が２つの場合 |
： |
上下 / 左右 |
| 値が３つの場合 |
： |
上 / 左右 / 下 |
| 値が４つの場合 |
： |
上 / 右 / 下 / 左 |
← スタイルシートに戻る
|
|
|
