CSS簡易リファレンス − 背景・罫線関連
background − 背景関係の指定を一括して行う
backgroundは、背景に関する指定を一括して行うためのコマンドです。背景の色、画像、繰り返し表示の有無、背景画像のポジションなどがこれひとつで指定できます。各値は半角スペースで区切ることで追加でき、不要な値は省略できます。
backgroundの値
- #******
#000000から#ffffffまでのカラーコードにより背景色を指定できます。 - url('*****.***')
画像ファイルのURLを記入することで、背景画像を指定できます。 - no-repeat
背景画像を繰り返さずに表示できます。（通常は指定範囲内で繰り返し表示されます。） - top・bottom、left・right
画像を繰り返さずに表示する場合の縦位置と横位置を指定します。
HTMLの記述例
<div style="background:#fff url('img/bg.gif');">背景を白にし背景画像を使用</div>
<div style="background:url('img/bg.gif') no-repeat right top;">背景画像を繰り返さずに右上に配置</div>
<div style="background:#fff url('img/bg.gif');">背景を白にし背景画像を使用</div>
<div style="background:url('img/bg.gif') no-repeat right top;">背景画像を繰り返さずに右上に配置</div>
ブラウザでの表示例
背景を白にし背景画像を使用
背景画像を繰り返さずに右上に配置
border − 罫線関係の指定を一括して行う
backgroundは、背景に関する指定を一括して行うためのコマンドです。罫線の種類、幅、色をこれひとつで指定できます。各値は半角スペースで区切ることで追加できますが、値の省略できません。
borderの値
- 罫線の種類
- solid − 実線。
- double − 二重線。太さ3px以上の指定で2重になります。
- dotted − 点線。
- dashed − 破線。
- groove − 窪んだ線。
- ridge − 飛び出た線。
- inset − 上・左が暗く、下・右が明るい実線。
- outset − 上・左が明るく、下・右が暗い実線。
- **px
罫線の太さをピクセル数で指定します。 - #******
#000000から#ffffffまでのカラーコードにより罫線の色を指定できます。
HTMLの記述例
<div style="border:solid 1px #ff0000;">赤・太さ1px・実線</div>
<div style="border:outset 2px #0000ff;">青・太さ2px・上・左が明るく、下・右が暗い実線</div>
<div style="border:solid 1px #ff0000;">赤・太さ1px・実線</div>
<div style="border:outset 2px #0000ff;">青・太さ2px・上・左が明るく、下・右が暗い実線</div>
ブラウザでの表示例
赤・太さ1px・実線
青・太さ2px・上・左が明るく、下・右が暗い実線
関連の指定
上のみ、下のみ、左のみ、右のみの罫線の指定が可能です。
上のみ、下のみ、左のみ、右のみの罫線の指定が可能です。
- border-top − 上のみに罫線を指定。
- border-bottom − 下のみに罫線を指定。
- border-left − 左のみに罫線を指定。
- border-right − 右のみに罫線を指定。