CSSで装飾

※新規ウインドウで開きます PDF印刷Eメール

背景を指定するCSS
変化例 プロパティ 値 書き方の例
背景色を指定する background-color 色コード、
又は色名、
transparent(透明)		 td{background-color: #339966;}
背景画像を指定する background-image url(背景画像のURL) td{background-image:url(images/stories/aomori_img.gif);}
背景画像の繰り返し方法を指定する

全体に
繰り返す

水平方向に
繰り返す

垂直方向
に繰り返す

繰り返さず、
１つだけ配置
background-repeat
repeat
repeat-x
repeat-y
no-repeat
td{background-repeat:repeat;}
背景画像の位置を指定する

左上に
配置

中央に
配置

右下に
配置

左から2em、
上から10px
の位置に配置
background-position 水平方向・垂直方向の順で
「数値＋単位」で指定するか、
下記のように指定
水平方向垂直方向
left top
center center
right bottom

td{background-position:left top;}

td{background-position:2em 10px;}
まとめると以下のようになります。
背景色黄色
背景画像を水平方向に繰り返し
垂直方向中央に配置

td{
background-color: #ffff00;
background-image:url(images/stories/aomori_back.gif);
background-repeat:repeat-x;
background-position: center center;
}
以下のように、全てまとめて一括指定する事も出来ます。
td{background: #ffff00 url(images/stories/aomori_back.gif) repeat-x center center;}
値の間は半角スペースで区切ります。
表記の順番に決まりは無く、背景色などを指定する必要が無い時は省略しても構いません。

枠線のデザインを指定するCSS
変化例 プロパティ 値 書き方の例
枠線のスタイルを指定
枠線のスタイルを
上下左右別々に指定

border-style

border-top-style
border-right-style
border-bottom-style
border-left-style
none
solid
double
dashed
dotted
groove
ridge
inset
outset
td{border-style: solid;}
枠線の太さを指定する
細い枠線
標準の枠線
太い枠線

border-width

border-top-width
border-right-width
border-bottom-width
border-left-width

 「数値＋単位」で指定するか、
下記のように指定
thin
medium
thick

td{border-width:thin;}
枠線の色を指定する
 border-color 色コード、又は色名で指定 div{border-color: #0000ff;}
borderもまとめて一括指定出来ます。
border:double 5px #ff6633; border-top: solid 3px #66cc00;
border-right: solid 2px #ff6633;
border-bottom: double 5px #66cc00;
border-left: solid 20px #66cc00;

枠線との間隔を指定するCSS
変化例 プロパティ 値 書き方の例
枠線と内容との
間隔を指定する

padding

padding-top
padding-right
padding-bottom
padding-left

 「数値＋単位」か「auto」で指定。
autoは規定の間隔		 td{padding:10px;}
枠線と
周囲との間隔を指定する

margin

margin-top
margin-right
margin-bottom
margin-left

 「数値＋単位」か「auto」で指定。
autoはブラウザが自動で設定する

table{
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
}
tableなどのブロック要素のmargin-rightとmargin-leftをautoにすると、
中央寄せになります。

リスト表示の記号の種類や位置を指定するCSS
変化例
  • リストの行頭記号
  1. または行頭番号

のマークの種類を指定
プロパティ 値 書き方の例
list-style-type
  • disk
  • 黒丸
  • circle
  • 白丸
  • square
  • 四角
  1. decimal
  2. アラビア数字
  1. lower-roman
  2. ローマ数字 小文字
  1. upper-roman
  2. ローマ数字 大文字
  1. lower-alpha
  2. アルファベット小文字
  1. upper-alpha
  2. アルファベット大文字
  • none
  • 記号無し
 ol{list-style-type:disk;}

変化例
  • リストの行頭記号または行頭番号を
  • 画像にする
プロパティ 値 書き方の例
list-style-image url(画像のURL)か「none」
 ul{list-style-image: url(images/stories/aomori_back.gif);}

変化例
  • リストの行頭記号
    または行頭番号の位置を
  • 外側か
    内側に指定
プロパティ 値 書き方の例
list-style-position
outside
inside
li{list-style-position:outside;}
listのスタイルも下記のようにまとめて一括指定できますが、
list-style-typeとlist-style-imageを同時に指定すると
list-style-typeは反映されません。
li{list-style:square inside;}