CSS

2013.10.18

要素の前後にテキストや画像を入れる [要素名:before 要素名:after]

要素名:before{content:”テキスト”}
要素名:before{content:url(URL)}
要素名:after{content:”テキスト”}
要素名:after{content:url(URL)}

[CSS]

.note:before{content:"[重要]"}
.wrait:after{content:"[お知らせ]"}
2013.10.18

空セルの枠線を表示するかしないか [empty-cells]

empty-cells: 表示するかしないか

[CSS]

td.hide{empty-cells:hide;}//表示しない
td.show{empty-cells:show;}//表示する
hide→
←show
2013.10.18

表のタイトルを下に表示 [caption-side]

caption-side: 配置位置

[CSS]

caption{
 caption-side:bottom;
}
タイトルは下にきてます。
セル セル セル
2013.10.18

リストマークをまとめて指定 [list-style]

list-style:

[CSS]

ul{
 list-style:url(blue.jpg) disc inside;
}
2013.10.18

セルとセルの間隔を指定 [border-spacing]

border-spacing: 間隔

[CSS]

table{border-spacing:10px;}
セル セル
セル セル
2013.10.18

表の枠線を単独の線にする [border-collapse]

border-collapse: 表の枠線表示

collapse 表の外枠や各セルの枠を重ねて表示
separate 表の外枠や各セルの枠を別に表示

[CSS]

table.sample1{border-collapse:collapse;}
table.sample2{border-collapse:separate;}

collapse(表の外枠や各セルの枠を重ねて表示した場合)

セル セル
セル セル

separate(表の外枠や各セルの枠を別に表示した場合)

セル セル
セル セル
2013.10.18

リストマークを内側表示 [list-style-position]

list-style-position:

[CSS]

.list-in{
 list-style-position:inside;
}

  1. insideの場合は
    こんな感じ
  2. insideの場合は
    こんな感じ
  1. outside(初期値)の場合は
    こんな感じ
  2. outside(初期値)の場合は
    こんな感じ
2013.10.18

リストマークを画像に設定 [list-style-image]

list-style-image:url(URL)

[CSS]

ul{
 list-style-image:url(red.jpg)
}
2013.10.18

リストマークの形式 [list-style-type]

list-style-type: 種類

[CSS]

  • 1235
  • 4569
  • 3265
  1. none
  1. disc
  1. circle
  1. square
  1. lower-roman
  2. lower-roman
  3. lower-roman
  1. upper-roman
  2. upper-roman
  3. upper-roman
  1. lower-greek
  2. lower-greek
  3. lower-greek
  1. decimal
  2. decimal
  3. decimal
  1. decimal-leading-zero
  2. decimal-leading-zero
  3. decimal-leading-zero
  1. lower-latin
  2. lower-latin
  3. lower-latin
  1. lower-alpha
  2. lower-alpha
  3. lower-alpha
  1. upper-latin
  2. upper-latin
  3. upper-latin
  1. upper-alpha
  2. upper-alpha
  3. upper-alpha
  1. cjk-ideographic
  2. cjk-ideographic
  3. cjk-ideographic
  1. hiragana
  2. hiragana
  3. hiragana
  1. katakana
  2. katakana
  3. katakana
  1. hiragana-iroha
  2. hiragana-iroha
  3. hiragana-iroha
  1. katakana-iroha
  2. katakana-iroha
  3. katakana-iroha
  1. hebrew
  2. hebrew
  3. hebrew
  1. armenian
  2. armenian
  3. armenian
2013.10.17

背景画像をまとめて指定 [background]

background:背景画像関連のプロパティ値

[背景画像関連のプロパティ値]
background-color
background-image
background-repeat
background-position
background-attachment

[CSS]

body{
 background: #ff000 url(red.jpg) left repeat-y;
}
1 / 512345

トップ