●CSSのサンプル例→ > №00 > №01 > №02 > №03 > №04 > №05 > №06 > №07 > END

03css_background(背景)＋css_border(ボーダー)＋css_list(リスト)

03css_background(背景)＋css_border(ボーダー)＋css_list(リスト)

01background-color

background-colorプロパティは、背景色を指定します。 適用要素：すべての要素

値 解説
transparent 背景を透明にする（初期値）
背景色 カラーコード、キーワード
色見本はこちらを参照下さい
※CSS 

body {
	background-color: #9fb7d4;
}

※HTML
※★sample
★①01background-colorサンプル

▲Ｔｏｐ

02background-image(背景)

background-imageプロパティは、背景画像を指定します。 適用要素：すべての要素

値 解説
none 背景画像を使用しない（初期値）
uri 背景画像のuriを指定
※CSS 

body {
	background-image: url(00_image/back.png);
}

※HTML
※★sample
★①02background-imageサンプル

▲Ｔｏｐ

03background-repeat(背景)

background-repeatプロパティは、指定された背景画像のリピート表示方法を指定します。 適用要素：すべての要素

値 解説
repeat 全画面にリピート表示（初期値）
repeat-x 横方向にリピート表示
repeat-y 縦方向にリピート表示
no-repeat リピート表示なし（ひとつだけ表示）
※CSS 

body {
	background-image: url(back.png);
	background-repeat: repeat-y;
}

※HTML
※★sample
★①03background-repeatサンプル

▲ｔｏｐ

04background-position

background-positionプロパティは、背景画像の表示位置を指定します。 横方向の位置と縦方向の位置をスペースで区切って指定します。 適用要素：すべての要素

値 解説
left 横方向「0%と同様」（初期値）
center 横方向「50%と同様」
right 横方向「100%と同様」
top 縦方向「0%と同様」（初期値）
center 縦方向「50%と同様」
bottom 縦方向「100%と同様」
片方のキーワードしか指定しなかった場合は、もう片方の方向は自動的にcenterになります。
数値 数値+単位、%値（初期値 0% 0%）
数値をひとつだけしか指定しなかった場合は、横方向の指定とみなされ自動的に縦方向は50%になります。
※CSS 

body {
	background-image: url(bg.gif);
	background-repeat: repeat-y;
	background-position: top left;
}

※HTML
※★sample
★①04background-positionサンプル

▲Ｔｏｐ

05background-attachment

background-attachmentプロパティは、背景画像の固定やスクロールの指定をします。 適用要素：すべての要素

値 解説
scroll 背景画像をスクロールする（初期値）
fixed 背景画像を固定する
※CSS 

body {
	background-image: url(03test_img/logo9.png);
	background-attachment: fixed;
}

※HTML
※★sample
★①05background-attachmentサンプル

▲Ｔｏｐ

06background

backgroundプロパティは、背景に関する設定をまとめて指定します。 指定しなかった値には初期値が反映されます。 適用要素：すべての要素

値
background-colorプロパティで指定する値
background-imageプロパティで指定する値
background-repeatプロパティで指定する値
background-positionプロパティで指定する値
background-attachmentプロパティで指定する値
※CSS 

body {
	background: #9fb7d4 url(03test_img/logo9.png)
 repeat-y center top fixed;
}

※HTML
※★sample
★①06backgroundサンプル

▲Ｔｏｐ

07border-width

border-widthプロパティは、ボーダーの太さを指定します。 適用要素：すべての要素

値 解説
数値 数値+単位で設定
thin 細い線
medium 中くらいの線（初期値）
thick 太い線
※CSS 

指定方法
border-width: 10px;（上下左右）
border-width: 10px 20px;（上下）（左右）
border-width: 10px 20px 10px;（上）（左右）（下）
border-width: 10px 20px 10px 20px;（上）（右）（下）（左）
 
個別に指定
border-top-width: 10px;（上）
border-right-widt: thin;（右）
border-bottom-width: medium;（下）
border-left-width: thick;（左）
 

.sample071 {
	border-width: thin;
	border-color: #9fb7d4;
	border-style: solid;
}

<div class="sample071">thin</div>
.sample072 {
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 1px;
	border-left-width: 2px;
	border-color: #9fb7d4;
	border-style: solid;
}

※HTML
<div class="sample072">上1px、右2px、下1px、左2px</div>
※★sample
★①
thin

上1px、右2px、下1px、左2px
★②07border-widthサンプル

▲Ｔｏｐ

08border-color

border-colorプロパティは、ボーダーの色を指定します。 適用要素：すべての要素

値 解説
色 カラーコード等
transparent 透明で表示
※CSS 

border-color: #cccccc;（上下左右）
border-color: #cccccc #555555;（上下）（左右）
border-color: #cccccc #666666 #333333;（上）（左右）（下）
border-color: #cccccc #777777 #333333 #000000;（上）（右）（下）（左）
 
個別に指定
border-top-color: red;（上）
border-right-color: #555555;（右）
border-bottom-color: #cccccc;（下）
border-left-color: green;（左）
 
.sample081 {
	border-width: thick;
	border-color: gray;
	border-style: solid;
}

.sample082 {
	border-width: medium;
	border-top-color: #cccccc;
	border-right-color: #777777;
	border-bottom-color: #333333;
	border-left-color: #000000;
	border-style: solid;
}

※HTML
<div class="sample081">ボーダーカラーgray</div>
<div class="sample082">上cccccc、右777777、下333333、左000000</div>
※★sample
★①
ボーダーカラーgray

上cccccc、右777777、下333333、左000000
★②08border-colorサンプル

▲Ｔｏｐ

09border-style

border-styleプロパティは、ボーダーのスタイルを指定します。 適用要素：すべての要素

値 解説
none 表示しない（初期値）「太さ0」
表などのボーダーと重なった場合は、他の値が優先されます
hidden 表示しない「太さ0」
表などのボーダーと重なった場合は、この値が優先されます
solid 実線
double 二重線
groove 谷型の線
ridge 山型の線
inset 凹型の線
outset 凸型の線
dotted 点線
dashed 破線
※CSS 

指定方法
border-style: solid;（上下左右）
border-style: dashed double;（上下）（左右）
border-style: dashed double dotted;（上）（左右）（下）
border-style: solid dashed double dotted;（上）（右）（下）（左）
 
個別に指定
border-top-style: solid;（上）
border-right-style: double;（右）
border-bottom-style: solid;（下）
border-left-style: double;（左）
 
.sample091 {
	border-width: medium;
	border-color: #9fb7d4;
	border-style: solid;
}

.sample092 {
	border-width: thick;
	border-color: #9fb7d4;
	border-top-style: solid;
	border-right-style: dotted;
	border-bottom-style: dashed;
	border-left-style: double;
}

※HTML
<div class="sample091">ボーダースタイルsolid</div>
<div class="sample092">上solid、右dotted、下dashed、左double</div>
※★sample
★①
ボーダースタイルsolid

上solid、右dotted、下dashed、左double
★②09border-styleサンプル

▲ｔｏｐ

10border

borderプロパティは、ボーダーに関する設定をまとめて指定します。 適用要素：すべての要素

値
border-colorプロパティで指定する値
border-widthプロパティで指定する値
border-styleプロパティで指定する値
※CSS 

個別に指定
border-top: solid 1px #9fb7d4;（上）
border-right: solid 1px #9fb7d4;（右）
border-bottom: solid 1px #9fb7d4;（下）
border-left: solid 1px #9fb7d4;（左）

.sample101 {
	border: solid 1px #9fb7d4;
}

.sample102 {
	border-top: solid 1px #85b9e9;
	border-right: dotted 2px #bde9ba;
	border-bottom: dashed 3px #ffd37d;
	border-left: double 4px #d1d1d1;
}

※HTML
<div class="sample101">ボーダーsolid 1px #9fb7d4</div>
<div class="sample102">上solid、右dotted、下dashed、左double</div>
※★sample
★①
ボーダーsolid 1px #9fb7d4

上solid、右dotted、下dashed、左double
★②10borderサンプル

▲Ｔｏｐ

11list-style-type

list-style-typeプロパティは、マーカー文字の種類を指定します。 適用要素：li要素、ul要素、ol要素、displayプロパティ（値がlist-itemの場合）

値 解説
none 非表示
disc 黒丸（初期値）
circle 白丸
square （四角）
decimal 数字
decimal-leading-zero 頭に0付の数字
upper-alpha 大文字アルファベット
lower-alpha 小文字アルファベット
upper-roman 大文字ローマ数字
lower-romanr 小文字ローマ数字
lower-greek 小文字ギリシャ文字
armenian アルメニア数字
georgian グルジア数字
以下の値はcss2.1では、削除されています
cjk-ideographic 漢数字
hiragana あいうえお（ひらがな）
katakana アイウエオ（カタカナ）
hiragana-iroha いろは（ひらがな）
katakana-iroha イロハ（カタカナ）
hebrew ヘブライ数字
※CSS 

ul {
	list-style-type: square;
}
ol {
	list-style-type: circle;
}

※HTML
<ul>
<li>リストUL</li>
<li>リストUL</li>
</ul>
<ol>
<li>リストOL</li>
<li>リストOL</li>
</ol>
※★sample
★①11list-style-typeサンプル

▲ｔｏｐ

12list-style-position

list-style-positionプロパティは、ボックスに対するマーカーの表示位置を指定します。 適用要素：li要素、ul要素、ol要素、displayプロパティ（値がlist-itemの場合）

値 解説
outside マーカーをボックスの外側に表示（初期値）
inside マーカーをボックスの内側に表示
※CSS 

ul {
	list-style-position: outside;
}
ol {
	list-style-position: inside;
}

※HTML
<ul>
<li>リストUL</li>
<li>リストUL</li>
</ul>
<ol>
<li>リストOL</li>
<li>リストOL</li>
</ol>
※★sample
★①12list-style-positionサンプル

▲ｔｏｐ

13list-style-image

list-style-imageプロパティは、マーカーの画像を指定します。 適用要素：li要素、ul要素、ol要素、displayプロパティ（値がlist-itemの場合）

値 解説
none 非表示（初期値）
uri 画像のuriを指定
※CSS 

ul {
	list-style-image: url(list.gif);
}

※HTML
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
※★sample
★①13list-style-imageサンプル

▲ｔｏｐ

14list-style

list-styleプロパティは、マーカーに関する設定をまとめて指定します。 適用要素：li要素、ul要素、ol要素、displayプロパティ（値がlist-itemの場合）

値
list-style-typeプロパティで指定する値
list-style-imageプロパティで指定する値
list-style-positionプロパティで指定する値
※CSS 

ul {
	list-style: disc outside url(list.gif);
}

※HTML
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
※★sample
★①14list-styleサンプル

▲Ｔｏｐ