様々な罫線・枠線の指定:背景色、ボーダー、マージン、パディングの設定
ほとんどの要素に対して、一様に枠線の表示がスタイルシートで可能になります。枠線の形や位置、色などを指定することによって、工夫次第では枠線らしくない面白い効果を表現できます。複数指定する際は半角スペースで区切ります。
指定の数と適用対象は以下のとおりです。
値 1つ → 「上下左右」
値 2つ → 「上下」と「左右」
値 3つ → 「上」と「左右」と「下」
値 4つ → 「上」と「右」と「下」と「左」
まずは、文字の大きさ、文字色、背景色、ボーダー、マージン、パディングを設定してみましょう。
次のようにすると、IEでもNNでもほぼ同じような見栄えとなるはずです。
h2 {
font-size : 16px;
text-align : left;
font-weight : bold;
background-color: #d3d3d3; /* LightGray */
padding : 4px 0 3px 10px;
margin : 4px 0 4px 0;
border-color : #000080; /* RoyalBlue */
border-style : solid none solid none;
border-width : 2px 0 2px 0;
}| Property | 意味 |
|---|---|
| border-top : width style color border-left : width style color border-bottom: width style color border-right : width style color |
各枠線に対して、上、右、下、左と分けて指定することができます。 |
| blockquote { border-color: #ffff00; border-style: solid; border-width: 3px; } |
一括指定 |
| blockquote { border-color: red blue green pink; border-style: solid ridge solid inset; border-width: 2px 3px 4px 5px; } |
時計回りでの指定 |
| Property | value:値 | 意味 |
|---|---|---|
| border-top-width | 上部枠線の幅 | |
| thin | 細い線 | |
| medium | 標準 | |
| thick | 太い線 | |
| nn | 数値で指定 | |
| border-right-width | 右部枠線の幅 | |
| thin | 細い線 | |
| medium | 標準 | |
| thick | 太い線 | |
| nn | 数値で指定 | |
| border-left-width | 左部枠線の幅 | |
| thin | 細い線 | |
| medium | 標準 | |
| thick | 太い線 | |
| nn | 数値で指定 | |
| border-bottom-width | 下部枠線の幅 | |
| thin | 細い線 | |
| medium | 標準 | |
| thick | 太い線 | |
| nn | 数値で指定 | |
| border-color | 枠線の色 | |
| #FFFFFF | ||
| border-style | 枠線の種類 | |
| none | ||
| dotted | 点線 | |
| dashed | 破線 | |
| solid | 実線 | |
| double | 二重線 | |
| groove | くぼみ | |
| ridge | 浮き上がり | |
| inset | 全体がくぼむ | |
| outset | 全体が浮き上がる | |
| border-top | 上部枠線をまとめて指定 | |
| border-right | 右部枠線をまとめて指定 | |
| border-left | 左部枠線をまとめて指定 | |
| border-bottom | 下部枠線をまとめて指定 |
上へ
CSS入門
広告