CSS

2013.10.15

枠線の形式指定 [border-style]

border-top-style:形式 上の線
border-bottom-style:形式 下の線
border-left-style:形式 左の線
border-right-style:形式 右の線
border-style:

・形式
none
solid
double
dashed
dotted
groove
ridge
inset
outset

[CSS]

.sample1{border-style:none}
.sample2{border-style:solid}
.sample3{border-style:double}
.sample4{border-style:dashed}
.sample5{border-style:dotted}
.sample6{border-style:groove}
.sample7{border-style:ridge}
.sample8{border-style:inset}
.sample9{border-style:outset}

none

solid

double

dashed

dotted

groove

ridge

inset

outset

2013.10.10

枠線の色を指定 [border-color]

border-top-color: 色指定(上の枠線の色)
border-bottom-color: 色指定(下の枠線の色)
border-left-color: 色指定(左の枠線の色)
border-right-color: 色指定(右の枠線の色)
border-color: 色指定(上・下・左・右の枠線の色)

[CSS]

.sample1{border-top-color:#ff0000;}
.sample2{border-bottom-color:#0000ff;}
.sample3{border-left-color:#ffcc00;}
.sample4{border-right-color:#339933;}
.sample5{border-color:#ff3300;}

上に色指定

船員だった若い頃にアフリカで見たライオンの夢を見ていた。

下に色指定

船員だった若い頃にアフリカで見たライオンの夢を見ていた。

船員だった若い頃にアフリカで見たライオンの夢を見ていた。

船員だった若い頃にアフリカで見たライオンの夢を見ていた。

船員だった若い頃にアフリカで見たライオンの夢を見ていた。

2013.10.10

枠線の太さを指定 [border-width]

border-top-width: 太さ (上の枠線の太さ)
border-bottom-width: 太さ (下の枠線の太さ)
border-left-width: 太さ (左の枠線の太さ)
border-right-width: 太さ (右の枠線の太さ)
border-width: 太さ (上・下・左・右の枠線の太さ)

[CSS]

.sample1{border-top-width:5px}
.sample2{border-bottom-width:thin}
.sample3{border-left-width:medium}
.sample4{border-right-width:thick}
.sample5{border-width:1em}

「thin」は「細い枠線」、「medium」は「中くらいの枠線」、「thick」は「太い枠線」

・topが5pxの場合

国境のトンネルを抜けると、窓の外の夜の底が白くなった

・bottomがthinの場合

国境のトンネルを抜けると、窓の外の夜の底が白くなった

・leftがmediumの場合

国境のトンネルを抜けると、窓の外の夜の底が白くなった

・rightがthickの場合

国境のトンネルを抜けると、窓の外の夜の底が白くなった

・全体が1emの場合

国境のトンネルを抜けると、窓の外の夜の底が白くなった

2013.10.10

マージン設定 [margin]

margin-top:上マージン
margin-bottom:下マージン
margin-left:左マージン
margin-right:右マージン
margin:上・右・下・左マージン

[CSS]

body{margin:0;}
.sample1{margin-top:10px;}
.sample2{margin-bottom:10px;}
.sample3{margin-left:10px;}
.sample4{margin-right:10px;}
2013.10.10

背景画像を固定する [background-attachment]

background-attachment:固定するかどうか

[固定]
fixed 背景画像の位置を固定する
scroll 背景画像を他の内容と共にスクロールさせる

[CSS]

body{
 background-attachment:fixed;
}
2013.10.10

背景画像の表示位置を指定 [background-position]

background-position:表示位置

[CSS]

body{
 background-position:center center;
}
2013.10.10

背景画像の並び方指定 [background-repeat]

background-repeat:並び方

[並び方]
repeat 繰り返し表示
repeat-x 横方向に繰り返し
repeat-y 縦方向に繰り返し
no-repeat 繰り返さない

body{
 background-repeat:repeat;
}
h1{
 background-repeat:repeat-x;
}
h2{
 background-repeat:repeat-y;
}
h3{
 background-repeat:no-repeat;
}
2013.10.10

背景画像を指定 [background-image:url(URL)]

background-image:url(画像のURL)
[CSS]

body{
 background-image:url(red.jpg)
}

div{
 background-image:url(yellow.jpg)
}
2013.10.10

背景色を指定 [background-color]

background-color:色指定
[CSS]

.sample{background-color:#ff0000;}

背景が赤に変化

2013.10.10

全体を小文字、大文字で表示させる [text-transform]

text-transform:

[大文字・小文字の指定]
uppercase すべての文字を大文字表示
lowercase すべての文字を小文字表示
capitalize 各単語の先頭の文字だけ大文字表示

[CSS]

.sanple1{text-transform:uppercase}
.sanple2{text-transform:lowercase}
.sanple3{text-transform:capitalize}

uppercaseの場合

part of the Japanese do not change

lowercaseの場合

part of the Japanese do not change

capitalizeの場合

part of the Japanese do not change

※日本語は変化しません。

3 / 512345

トップ