よく使うCSSのプロパティ

プロパティとは、
cssでセレクタに具体的な指定をするための内容をあらわしています。
プロパティの後には必ず適切な値を指定する必要があります。

セレクタ { プロパティ : 値 ; }

頭文字

A/B/C/D/E/F/G/H/I/J/K/L/M
N/O/P/Q/R/S/T/U/V/W/X/Y/Z

A

B

border

border(ボーダー)は枠線に関するプロパティです。
枠線のある(付けれる)ものには大体指定できます。

文字や画像、背景などはborderの内側に配置されます。

基本ボックス

borderは「margin」と「padding」の境界線に位置します。

値にはスタイル(線種)・太さ・線色をまとめて指定できます。
スタイルには、
none・hidden・solid・double・groove・ridge・inset・outset・dashed・dotted
があります。
太さには単位(px・em・exのどれか)を付けます。
線色は#から始まる3桁か6桁のカラーネームで指定します。

線種、太さ、線色は半角スペースを挟んで指定しますが、
並べる順番は特に決まっていません。

css記述

p {
border : solid 2px #555555;
/*solidは1本線 2pxの太さ 線色は##555555を指定 */
}

HTML記述

<p>
ボーダー
</p>

表示結果

ボーダー

C

D

E

F

G

H

I

J

K

L

M

margin

「margin」は上下左右-にそれぞれ空間を指定してを空けることが出来ます。

よく似たものに「padding」がありますが、
「margin」は「border」の外側に、
「padding」は「border」の内側に空間を指定します。

基本ボックス

px単位で指定するのが基本ですが、
0を指定するときに限っては単位をつけません。

指定数値は、1つの指定は上下左右に対して、
4つの指定は上右下左を指定することになります。

marginは-(マイナス)指定も出来ます。

css記述例1

p {
margin : 10px ;
/*上下左右に10px*/

margin : 10px 20px ;
/*上下10px 左右20px*/

margin : 10px 20px 30px ;
/*上10px 左右20px 下30px*/

margin : 10px 20px -30px 0 ;
/*上10px 右20px 下-30px 左隙間無し*/
}

/*ばらばらに指定する場合*/

p {
margin-top : 10px ; /*上*/
margin-bottom : 10px ; /*下*/
margin-left : 10px ; /*左*/
margin-right : 10px ; /*右*/

N

O

P

padding

「padding」は上下左右-にそれぞれ空間を指定してを空けることが出来ます。

よく似たものに「margin」がありますが、
「padding」は「border」の内側に、
「margin」は「border」の外側に空間を指定します。

基本ボックス

px単位で指定するのが基本ですが、
0を指定するときに限っては単位をつけません。

指定数値は、1つの指定は上下左右に対して、
4つの指定は上右下左を指定することになります。

paddingは-(マイナス)指定も出来ます。

css記述

p {
padding : 10px ;
/*上下左右に10px*/

padding : 10px 20px ;
/*上下10px 左右20px*/

padding : 10px 20px 30px ;
/*上10px 左右20px 下30px*/

padding : 10px 20px -30px 0 ;
/*上10px 右20px 下-30px 左隙間無し*/
}

/*ばらばらに指定する場合*/

p {
padding-top : 10px ; /*上*/
padding-bottom : 10px ; /*下*/
padding-left : 10px ; /*左*/
padding-right : 10px ; /*右*/

css記述例1

.p0 {
padding : 0 ; /*隙間無し*/
border : 1px solid #000000 ;
}

.p20px {
padding : 20px ; /*上下左右に隙間20px*/
border : 1px solid #000000 ;
}

HTML記述

<div class=”p0″>
padding 0
</div>

<div class=”p20px”>
padding 20px
</div>

表示結果

padding 0
padding 20px

Q

R

S

T

U

V

W

X

Y

Z

記号

コメントを残す

メールアドレスが公開されることはありません。

AlphaOmega Captcha Classica  –  Enter Security Code