<<PREV(P)   TOP(T)   NEXT(N)>>   contents (C)

CSS $B35@b(B

Contents

  1. $B2?8N%9%?%$%k!&%7!<%H$+(B
  2. CSS - Cascading StyleSheets
    1. CSS$B$N4pK\E*$JF3F~J}K!(B
    2. CSS$B$N4pK\=q<0(B
  3. CSS$B$N6qBNNc(B

2-1. $B2?8N%9%?%$%k!&%7!<%H$+(B

HTML$B$O!"O@M}9=B$$N%^!<%/%"%C%W$r$9$k8@8l$G$9!#J8=q$N3FItJ,Kh$K0UL#IU$1$7$F9T$/!"0?$OItJ,Kh$N0UL#$rL@3N$KL\0uIU$1$7$J$,$i!"A4BN$NJ8=q$r9=C[$7$F9T$/$H1>$&!VO@M}%G%6%$%s!W$H8F$P$l$k;EAH$_$G$9!#(B

$BB6$N8+1I$($O!"8fMxMQ$N%V%i%&%6$K0lG$$5$l$k$3$H$K$J$j$^$9!#(BH1$BMWAG$O!V8+$@$7$r0UL#$9$kMWAG!W$@$+$i!VJ8;z$rBg$-$/!"B@$/$9$k!W$H1>$&%V%i%&%6$b:_$l$P!"%^!<%8%s$ro$K8BDj$5$l$?=j$^$G$7$+=PMh$J$$$N$G$9!#Nc$($P!"!V%^!<%8%s!W$d!V9T4V!W!"!VJ8F,$N%$%s%G%s%H!W$J$I$O(BHTML$B$G$O;XDj$G$-$^$;$s!#(B

$B5U$K1>$($P!"$=$l$i$OO@M}9=B$$G$O$J$$$N$G!"$=$l$i$N$$$A$$$A$r(BHTML$B$,;XDj$9$k$H!"J8=q$NO@M}9=B$$,J,$j?I$/$J$C$F$7$^$$$^$9!#$^$?!"JQ99$9$k>l9g$K$O!"8D!9$N%Z!<%8$N8D!9$NMWAG$N8D!9$NB0@-$r$$$A$$$A=q$-49$($kI,MW$,$"$j!"Hs>o$KLLE]$G$"$j!";ve?7$7$/%Z!<%8$r=q$-D>$9I,MW$,$"$k$G$7$g$&!#$=$3$G!"8+1I$($N@)8f$O(BHTML$B$+$iJ,N%$9$k$3$H$K$J$j!"8=:_:NMQ$5$l$F$$$k$b$N$N0l$D$,!"%+%9%1!<%G%#%s%0!&%9%?%$%k!&%7!<%H!J(BCSS$B!K$H1>$&;EAH$_$G$9!#(B

$B8+1I$($H9=B$$rJ,$1$k$H$$$&9M$(J}$O!"%*%V%8%'%/%H;X8~%W%m%0%i%_%s%0$K$*$$$F!V%W%l%<%s%F!<%7%g%s$H%m%8%C%/!W$rJ,$1$k$3$H$K$b>H1~$7$^$9!#@8;:@-$r9b$a$k$?$a$N9)IW$H$7$F!"IaJWE*$JN.$l$G$9!#(B

2-2. CSS - Cascading StyleSheets

$B%9%?%$%k!&%7!<%H$O!"O@M}9=B$$r%^!<%/%"%C%W$7$?(BHTML$B$NMWAGKh$K!"$=$N8+1I$($rL@<(E*$K;XDj$9$k;EAH$_$G$9!#(B

$B%9%?%$%k%7!<%H(B

$B 

p { line-height: 1.5}

$B$3$N%9%?%$%k%7!<%H$,E,MQ$5$l$?(B HTML $BJ8=q$G$O!"(B p $BMWAG$N9T$N9b$5$,!"J8;z$N9b$5$N(B 1.5 $BG\$K$J$j$^$9!#(B

$B$b$&>/$7>\$7$/8+$F$_$^$7$g$&!'(B

$BMQ8l(B     $B%9%?%$%k@k8@(B  
$B%;%l%/%?(B { $B%W%m%Q%F%#(B : $BCM(B }
$B%9%?%$%k%7!<%H(B p { line-height : 1.5 }
$B0UL#(B p $BMWAG(B { $B9T$N9b$5(B : 1.5 $BG\(B }

$BG!2?$G$7$g$&$+!"46$8$,$D$+$a$^$7$?$+!)(B CSS $B$G$O$3$N$h$&$K!"(B HTML $B$G$O;XDj$G$-$J$$8+1I$($NItJ,$r@_Dj$G$-$^$9!#(B

CSS $B$NF3F~J}K!(B

1. $B0?$kJ8=qFb$NA4MWAG$X$N0l3gF3F~(B- style $BMWAG(B

$B>e=R$N%9%?%$%k%7!<%H$r!"0?$k(B HTML $BJ8=q$KE,MQ$9$kJ}K!$r>R2p$7$^$9!#L\E*$N(B HTML $BJ8=q$N(B head $BMWAG$r!" 

<head>
...$B>JN,(B...
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
 p { line-height:1.5 }
-->
</style>
</head>

HTML $B%=!<%9$N!"(Bhead $BMWAGFb$K!"(Bstyle $BMWAG$r5-=R$7$F$"$j$^$9!#$3$NJ8=qFb$N(B p $BMWAG$N9T$N9b$5$OJ8;z$NBg$-$5$N(B 1.5 $BG\$K$J$j$^$9!#(B

CSS $B$N5-=R7A<0$HMQ8l(B
CSS$B$N5-=R7A<0(B $B%;%l%/%?(B{$B%W%m%Q%F%#(B:$BCM(B}
$B6qBNNc(B p{line-height:1.5 }

$B!V(B$B%;%l%/%?(B$B!W$,!"@k8@$9$k%9%?%$%k$rE,9g$5$;$kBP>]$r;X$7!"!V(B$B%W%m%Q%F%#(B : $BCM(B$B!W$,!"%9%?%$%k$N@k8@$G$9!#(B

2. $BJ8=qFb$N0?$kMWAGKh$X$NF3F~(B - style$BB0@-(B

$BNc$($P!"(BHTML $BJ8=qFb$NA4$F$N(B p $BMWAG$G$O$J$/!"(B$B0?$kFCDj$N(B p $BMWAG$@$1!"0l9T$N9b$5$rJ8;z$N(B 1.3 $BG\$K$7$?$$!#!W(B$B$H;W$($P!" 

<p style="line-height:1.3">
$B9T$N9b$5$,0lJ8;z$N(B 1.3 $BG\$K$J$k(B p $BMWAG(B
</p>
$B!ZI=<(Nc![(B

$B0l9T$N9b$5$H$O!"9T$N2<@~$H!"2<@~$N4V$ND9$5$G$9!#0l9T$,0lJ8;z$N(B 1.3 $BG\$H$$$&$3$H$O!">e$N9T$H2<$N9T$N4V$N6uGr$,(B 0.3 $BJ8;zJ,6u$/$H$$$&$3$H$G$9!#%&%#%s%I%&$NBg$-$5$rD4@a$7$F!"$3$NCJMn$N9T9b$,(B 1.3 $BJ8;zDxEY$G$"$k$3$H$r3NG'$7$F$/$@$5$$!#(B

$B$3$N$h$&$K!"(B style $BB0@-$NB0@-CM$H$7$F@k8@$9$k%9%?%$%k$r!"(B$B%$%s%i%$%s!&%9%?%$%k(B$B$H8F$S$^$9!#(B

$B%$%s%i%$%s!&%9%?%$%k$G$O!"E,9g$5$;$kBP>]$O<+L@$G$9$N$G!"%;%l%/%?$O>JN,$7!"%9%?%$%k@k8@$@$1$rD>@\5-=R$7$^$9!#(B

4. $BE,9g=g0L(B

$B%9%?%$%k%7!<%H$NE,9gJ}K!$OB>$K$b$"$j$^$9$,!"$3$3$GJ#?t$N%9%?%$%k$,6%9g$7$?>l9g$N2r7hJ}K!$r>R2p$7$^$9!#(B STYLE $BMWAG$N@k8@$H(B style $BB0@-$N@k8@$,L7=b$7$?>l9g$O!"$I$&$J$k$G$7$g$&$+!)(B

style $BMWAG$G!"(B$B!V(Bp $BMWAG$NJ8;z?'$O9u!W(B$B$H@k8@$5$l$F$$$F$b!"0?$k(B p $BMWAG$N(B style $BB0@-$G(B$B!VJ8;z?'$O@V!W(B$B$H@k8@$5$l$F$$$l$P!"Ev3:$N(B p $BMWAG$N(B$B!VI=<($5$l$kJ8;z?'$O@V!W(B$B$K$J$j$^$9!#(B

head $BMWAGFb$N(B STYLE $BMWAG(B$B$G@k8@$5$l$?%9%?%$%k$O!"8DJL$NMWAG$KM?$($i$l$?(B style $BB0@-$N(B INLINE $B%9%?%$%k(B$B$K$h$C$F>e=q$-$5$l$^$9!#(B

style$BMWAG(B
$BEv3:$N(B HTML $BJ8=qCf$G0lHL$KE,9g$5$;$k%9%?%$%k(B
style $BB0@-!((BINLINE$B%9%?%$%k(B
$B0?$k0l$D$NMWAG$K$D$$$F!"(B STYLE $BMWAG$N@k8@$H0[$J$k%9%?%$%k(B

HTML$B$,O@M}9=B$$r@5$7$/%^!<%/%"%C%W$7$F$$$k$[$I!"%9%?%$%k%7!<%H$K$h$k8+1I$($ND4@0$b%9%`!<%9$K!"E}0lE*$K9T$($^$9!#(B

$B%9%?%$%k$rE,9g$5$;$kBP>]$,!"(B HTML $B$GMQ0U$5$l$?MWAG$G$OB-$j$J$$>l9g$O!"(B DIV $BMWAG$d(B SPAN $BMWAG$K(B class $BB0@-$rM?$($F!"$h$j$-$a$3$^$+$$%^!<%/%"%C%W$,=PMh$^$9!#(B class $BB0@-$KIU$$$F$O$3$N>O$G$O07$$$^$;$s!#(BSelector $B$N3HD%(B (N)$B$r8fMw2<$5$$!#(B

CSS $B$N(B HTML $BJ8=q$X$NF3F~J}K!$OB>$K$b$"$j$^$9$,!"$=$l$O(B$B8e$G2r@b$7$^$9(B$B!#(B

CSS$B$N4pK\E*=q<0(B

CSS$B$O4pK\E*$K

property1: value1; property2: value2

property $B$H!"$=$NCM(B value $B$G%o%s!&%;%C%H$N@k8@(B property: value $B$G$9!#J#?t$N@k8@$N4V$O%;%_%3%m%s(B";"$B$G6h@Z$j$^$9!#(B

$BNc$($P!" 

background-color: #ccc; color: blue; line-height: 1.5em
$B>e$NNc$K8+$i$l$k@k8@$H0UL#(B
$B%W%m%Q%F%#(B$BCM(B$B%W%m%Q%F%#$N0UL#(B
background-color#ccc$BGX7J?'(B
colorblue$BA07J?'!JJ8;z$N?'$J$I!K(B
line-height1.5em$B9T$N9b$5(B

'background-color'$B$O!"!VGX7J?'!W$r;XDj$9$k%W%m%Q%F%#$G!"(B'color'$B$O!VA07J?'!JJ8;z$N?'$J$I!K!W$r;XDj!"(B'line-height'$B$O!"!V9T9b!W$r;XDj$9$k%W%m%Q%F%#$G$9!#$3$NNc$G$O!"!VGX7J?'!W$r(B #ccc $B$K$7!"!VA07J?'!W$r(B blue $B$K!"!V9T9b!W$r(B 1.5em $B!J(B1.5$BJ8;zJ,!a(B1.5$B%/%o%?!K$K$9$k$h$&$K@k8@$5$l$F$$$^$9!#(B

$B?'$dD9$5$NC10L$J$I$O!"(B$B8e$G@bL@$7$^$9(B$B!#(B

2-3. CSS$B$N6qBNNc(B

CSS$B$,2?$G$"$k$+!"<head>$B$+$i(B</head>$B$^$G!K$NCf$K!"$B%3%T!<(B&$B%Z!<%9%H(B$B$7$F2<$5$$!#(B

<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
  /* StyleSheets$B$N%5%s%W%k(B */
body {
  margin: 1em;
  font-family: serif;
  line-height: 1.3em;
  background: white;
  color: #333 }
h1, h2, h3, h4 { margin: 1em 0}
h5, h6 { margin-top: 1em }
h1 { text-align: center }
h1, h2, h4, h6 { font-weight: bold }
h4, h5 { font-style: italic }
h1 { font-size: xx-large;
  margin-left:1em }
h2 { font-size: x-large;
  margin-left:3em }
h3 { font-size: large;
  margin-left:6em }
p {line-height:1.5em; text-indent:1em }
strong { font-weight: bolder }  /* relative to the parent */
cite, em, var, address, blockquote { font-style: italic }
pre, code { font-family: monospace }
pre { white-space: pre }
address { margin-left: 3em }
blockquote { margin-left: 3em; margin-right: 0 }
ul { list-style: disc }
ol { list-style: decimal }
li { margin-left: 3em }
dt { margin-bottom: 0 }
dd { margin-top: 0; margin-left: 3em }
hr { border:none; border-top: 2px groove red }
       /* 'border-bottom' could also have been used */
a:link { color: navy }       /* unvisited link */
a:visited { color: maroon }  /* visited links */
a:link,a:visited {text-decoration:underline }
a:hover {color: gold; text-decoration:none }  /* mouse-over links*/
a:active { color: green }    /* active links */
/* setting the anchor border around img elements
 requires contextual selectors */
a:link img { border: 2px solid navy }
a:visited img { border: 2px solid maroon }
a:hover img {border:none }
a:active img { border: 2px solid green }
-->
</style>

$B>e$N(B style $BMWAG$N%5%s%W%k$r!"E,Ev$J(B HTML $BJ8=q$N(B head $BMWAGFb$KA^F~$7$F2<$5$$!#(B head $BMWAG$NFbIt9=B$$O!" 

<head>
...$B>JN,(B...
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!-- $B>JN,(B -->
</style>
</head>

$BEv3:$N(BHTML file$B$r%V%i%&%6$G3+$/$H!"%9%?%$%k%7!<%H$N8z2L$,J,$k$3$H$H;W$$$^$9!#(B $B?t;z$d%Q%i%a%?$r?'!9JQ$($F$_$F$/$@$5$$!#(B

<<PREV(P)   TOP(T)   NEXT(N)>>   contents (C)

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送