CSSの基礎：ページをデザインする方法

＊背景画像を設定する

#header{

background-image:url(img/header.png);

}

・background-image

背景画像を指定する為のプロパティ。url();の間に画像へのパスを記述する。

・background-repeat プロパティ

繰り返しの有無、繰り返す方向を指定する為のプロパティ。この指定が無い場合、背景画像は縦横に繰り返される

:no-repeat

繰り返さない

:repeat-x

横方向に繰り返す

:repeat-y

縦方向に繰り返す

＊箇条書きの見た目を変更する

多くのブラウザでは、li要素の先頭には・(ブレット)が自動的に表示される。不要な場合、list-style-typeプロパティで非表示にする。

#menu ul{

list-style-type:none;

}

・list-style-type プロパティ

ブレットのスタイルを指定する為のプロパティ。

:none

ブレットなし

:disc

黒丸

:circle

白丸

:square

黒四角

:lower-roman

ローマ数字(小文字)

:upper-roman

ローマ数字(大文字)

:decimal

数字

:lower-alpha

小文字のアルファベット

:upper-alpha

大文字のアルファベット

・background-position プロパティ

背景画像の表示開始位置を指定する為のプロパティ。この指定が無い場合、左上から表示開始となる。

:100px 100px;

左から100px、上から100pxの位置から

:left bottom;

左寄せ、下寄せ

:right center

右寄せ、中央寄せ

＊テキストや画像の周りに余白を付ける

#header{

padding-top:28px;

padding-left:32px;

}

・padding プロパティ

余白を付ける為のプロパティ。paddingプロパティで指定した余白には、backgroundプロパティで設定した背景が表示される。

・margin プロパティ

余白を付ける為のプロパティ。paddingプロパティはborderより内側の余白なのに対し、marginプロパティはborderの外側の余白を表す。

両プロパティ共に、

-top、-right、-bottom、-left

上記左から、内容の上、左、下、右方向に付く余白を指定出来る。また、

10px 10px 10px 10px ;

のように上から時計回りで記述することも出来る。

＊リンク画像に付いた枠線の変更

img{

border‐style:none;

}

・border

-style

枠線の種類を指定する為のプロパティ

-color

枠線の色を指定する為のプロパティ

-width

枠線の太さを指定する為のプロパティ

・border-style プロパティの値

:none

枠線を表示しない

:solid

実線

:double

二本線

:groove

立体的に窪んだ線

:ridge

立体的に隆起した線

:inset

全体が窪んだように表示され、上と左の枠線が明るく、下と右の枠線が明るい色になる

:outset

全体が隆起したように表示され、上と左の枠線が明るく、下と右の枠線が明るい色になる

:dashed

破線

:dotted

点線