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