7. $B%a%G%#%"(B

last modified: 23rd/Aug./2001

Contents

$B%a%G%#%"$N

$B%a%G%#%"%?%$%W$NFCDj(B

$B$3$3$G$$$&!V%a%G%#%"!W$H$O!"%&%'%V%Z!<%8$N=PNOG^BN$N$3$H$G$9!#Nc$($P!"%3%s%T%e!<%?%9%/%j!<%s$O!"(B screen $B$KJ,N`$5$l$^$9!#(B CSS $B$G$O!"=PNOG^BN$K1~$8$F!"J8=q$N8+1I$($rJQ99$9$k$3$H$,$G$-$^$9!#(B

$B$3$N%Z!<%8$G$O!"%3%s%T%e!<%?%9%/%j!<%s(B (media="screen") $B8~$1$N30It%9%?%$%k%7!<%H$H!"0u:~J*$H0u:~%W%l%S%e!<%b!<%I(B (media="print") $B8~$1$N30It%9%?%$%k%7!<%H$r;2>H$7$F$$$^$9!#%V%i%&%6$K!V0u:~%W%l%S%e!l9g$K$O!";n$7$F$_$F$/$@$5$$!#$b$7%V%i%&%6$,%a%G%#%"%?%$%W$r%5%]!<%H$7$F$$$l$P!"%3%s%T%e!<%?%9%/%j!<%s$G$4Mw$K$J$k8+1I$($H!"0u:~J*$d0u:~%W%l%S%e!<%b!<%I$G$4Mw$K$J$k8+1I$($H$O!"0[$J$C$F$$$k$O$:$G$9!#(B

$B%a%G%#%"$N

$BK\9F$G$OKX$I$U$l$^$;$s$G$7$?$,!"A4$F$N(B CSS Propaty $B$K$O!"0lO"$N%a%G%#%"%?%$%W$,@_Dj$5$l$F$*$j!"3:Ev$9$k%a%G%#%"$G$J$1$l$P5!G=$7$^$;$s!#%3%s%T%e!<%?!&%9%/%j!<%s(B screen $B$G5!G=$7$J$$%W%m%Q%F%#$NBeI=E*$J$b$N$G$O!"%Z!<%8G^BN(B print $B$N2~%Z!<%8!"2;@<[email protected]!4o!J%9%T!<%A!&%7%s%;%5%$%6!aural $B$NC}$kBg$-$5!"B.$5$J$I$,$"$j$^$9!#(B

CSS $B$G$O$3$N$h$&$J=PNOG^BN$N$B%a%G%#%"%?%$%W(B$B$H$7$F6hJL$7$F$$$^$9!#MxMQ$G$-$k%a%G%#%"%?%$%W$O0J2<$NDL$j$G$9!'(B

screen: $BHs%Z!<%87?$N%3%s%T%e!<%?!&%9%/%j!<%s$r<($9!#(B
tty: $B8GDjI}$NJ8;z%0%j%C%I$rMQ$$$?%a%G%#%"!"Nc$($P!"%F%l%?%$%W!"C
tv: $B%F%l%S7?%G%P%$%9!J2rA|EY!"?'?t$,Dc$/!"%9%/%m!<%kG=NO$K@)8B$,$"$k!K$r<($9!#(B
projection: $B%W%m%8%'%/%?$r<($9!#%Z!<%8G^BN8GM-$N@07A%b%G%k$,B8:_$9$k!#(B
handheld: $B7HBS%G%P%$%9!J>.2hLL!"%b%N%/%m!"%S%C%H%^%C%W2hA|!"Bg0hI}$K@)8B$,$"$k!K$r<($9!#(B
print: $B%Z!<%87A<0$NITF)L@$JJ*
braille: $BE@;z$N?(3P$r%U%#!<%I%P%C%/$9$k%G%P%$%9$r<($9!#(B
embossed: $BE@;z$N%Z!<%8$r=PNO$9$k%W%j%s%?$r<($9!#(B
speech: $B2;@<[email protected]!4o$r<($9!#(BCSS2.1 $B$G$O!">-Mh$N3HD%M=Dj$N$?$a$K(B speech $B$rM=Ls$9$k$,!"L$Dj5A$H$5$l$k!#5U$K!"(BCSS2 $B$GDj5A$5$l$?%a%G%#%"!&%?%$%W(B aural $B$O!"(BCSS2.1 $B$GGQ;_M=Dj(B (deprecated) $B$H$5$l$k$,!"(BCSS2.1 $B;EMM=q$NIUO?$GDj5A$5$l$F$$$k!#(B
all: $BA4$F$N%G%P%$%9$KE,Ev!#(B

$B%a%G%#%"%?%$%W$O!"BgJ8;z$H>.J8;z$r6hJL$7$^$;$s!#(B
$B%a%G%#%"%?%$%W$NKX$I$O(B HTML 4, XHTML 1 $B$G$NDj5A$HF1MM!#(B
$B%a%G%#%"%?%$%W$,;XDj$5$l$F$$$J$$>l9g$O!"0lHL$K(B all $B$,E,MQ$5$l$^$9!#(B

$BNc$($P!"l9g$K!"%a%G%#%"$r;XDj$7$F$*$/$3$H$OM-0U5A$G$9!'(B

$B0u:~G^BN(B "print" $B$G$O!"L@D+!"%7%'%j%U7O$N%U%)%s%H$r>.$5$/=PNO(B
PC$B$J$I$N%b%K%?(B "screen" $B$G$O!"%4%7%C%/!"%5%s!&%7%'%j%U7O$N%U%)%s%H$rBg$-$/=PNO(B
OHP $BMQ%U%)%$%k(B "projector" $B$G$O!"J8;z$r$G$-$k8B$jBg$-$/(B

$B$^$?!"

$BL54X78$J%G%P%$%9$,!"ITMW$J%9%?%$%k%7!<%H$rFI$_9~$`%m%9$,$J$$!#(B

$BNc$($P!"L\$NIT<+M3$JJ}$J$I$,MxMQ$9$kE@;z=PNO%V%i%&%6$d2;@<%V%i%&%6$KBP$7$F!"%U%)%s%H$J$I$N%S%8%e%"%k;XDj$N%9%?%$%k%7!<%H$OFI$_9~$s$G$b!"NI$$$3$H$,$"$j$^$;$s!#%7%9%F%`%j%=!<%9$rO2Hq$7!"FI$_9~$_;~4V$,L5BL$J$@$1$G$9!#(B

$B%a%G%#%"!&%0%k!<%W(B

$B%a%G%#%"!&%?%$%WKh$K!";XDj$G$-$k%W%m%Q%F%#$,0[$J$j$^$9!#(BCSS $B;EMM=q$G$O!"%a%G%#%"%?%$%W$r(B all $B$r4^$a$?(B 11 $B8D$N%0%k!<%W$KJ,$1$FDj5A$7$F$$$^$9!#(B

$B3F%0%k!<%WKh$K!"$I$N%a%G%#%"%?%$%W$,4^$^$l$k$+$r$^$H$a$?$N$,

continuous

braille, handheld, screen, speech, tty, tv

paged

embossed, handheld, print, projection, tv

visual

handheld, print, projection, screen, tty, tv

audiod

handheld, screen, tv

speech

handheld, speech

tactile

braille , embossed

grid

braille, embossed, handheld, tty

bitmap

handheld, print, projection, screen, tv

interactive

braille, handheld, projection, screen, speech, tty, tv

static

braille, embossed, handheld, print, screen, speech, tty, tv

$B%a%G%#%"%?%$%WKh$K!"$I$N%0%k!<%W$KB0$9$k$+$r$^$H$a$?$N$,

relationship between media groups and media types
media types	media groups
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	n/a	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both

$B3F!9$N%0%k!<%W$4$H$K!";XDj2DG=$J%W%m%Q%F%#$O!"

all

$B;k3P%U%)!<%^%C%F%#%s%0(B...'display'
$BFbMF@8@.(B...'content', 'counter-increment', 'counter-reset'

aural

'azimuth', 'cue-after', 'cue-before', 'cue', 'elevation', 'pause-after', 'pause-before', 'pause', 'pitch-range', 'pitch', 'play-during', 'richness', 'speak-header', 'speak-numeral', 'speak-punctuation', 'speak', 'speech-rate', 'stress', 'voice-family', 'volume'

visual

$B?'(B...'background-attachment', 'background-color', 'background-image', 'background-position', 'background-repeat', 'background', 'color'
$B%^!<%8%s(B...'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'margin'
$B%Q%C%G%#%s%0(B...'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding'
$B%\!<%@!<(B...'border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-bottom', 'border-color', 'border-left-color', 'border-left-style', 'border-left-width', 'border-left', 'border-right-color', 'border-right-style', 'border-right-width', 'border-right', 'border-spacing', 'border-style', 'border-top-color', 'border-top-style', 'border-top-width', 'border-top', 'border-width', 'border'
$B;k3P%U%)!<%^%C%F%#%s%0(B...'bottom', 'left', 'right', 'top', 'clear', 'direction', 'float', 'position', 'unicode-bidi', 'z-index'
$B;k3P%U%)!<%^%C%F%#%s%0$N>\:Y(B...'height', 'line-height', 'max-height', 'max-width', 'min-height', 'min-width', 'vertical-align', 'width'
$B;k3P8z2L(B...'clip', 'overflow', 'visibility
$B%j%9%H(B...'list-style-image', 'list-style-position', 'list-style-type', 'list-style'
$BFbMF@8@.(B...'quotes'
$B%U%)%s%H(B...'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font'
$B%F%-%9%H(B...'letter-spacing', 'text-align', 'text-decoration', 'text-indent', 'text-transform', 'white-space', 'word-spacing'
$B%F!<%V%k(B...'border-collapse', 'caption-side', 'empty-cells', 'table-layout'

visual, interactive

$B%f!<%6%$%s%?%U%'!<%9(B...'cursor', 'outline-color', 'outline-style', 'outline-width', 'outline'

visual, paged

$B%Z!<%8%a%G%#%"(B...'orphans', 'page-break-after', 'page-break-before', 'page-break-inside', 'widows'

$B%a%G%#%"%?%$%W$NFCDj(B

$B%&%'%VJ8=q$K%9%?%$%k%7!<%H$rE,MQ$5$;$k$H$-$K!">e=R$N(B$B%a%G%#%"%?%$%W(B$B$b;XDj$9$kJ}K!$O!"

link $BMWAG(B$B$G30It%9%?%$%k%7!<%H$NFI$_9~$_(B
@import $B@k8@(B$B$G%9%?%$%k%7!<%H$N9g@.(B
@media $B@k8@(B$B$G%9%?%$%kDj5A$r9=B$2=(B

`link` $BMWAG(B

$B30It%9%?%$%k%7!<%H$r(B HTML $BJ8=q$+$i;2>H$9$k$K$O!"(B link $BMWAG$rMQ$$$^$9!#$3$N$H$-!"(B HTML 4, XHTML 1.0 $B$G$O!"0MB8$9$k%a%G%#%"%?%$%W$r;XDj$9$k$3$H$,=PMh$^$9!#(B

<link rel="stylesheet" type="text/css"
      href="./atomic.css" media="screen, print">

$B$3$NNc$G$O!"%U%!%$%k(B atomic.css $B$r!"Ev3:J8=q$KE,MQ$9$k%9%?%$%k%7!<%H$H$7$F;2>H$7$F$$$^$9!#3n$D!"$3$N%j%s%/$O!"%a%G%#%"%?%$%W$,(B screen $B$+(B print $B$G$"$k%G%P%$%9$KBP$7$F$@$1M-8z$G$9!#(B

media $BB0@-$NCM$O!"C1FH$N%a%G%#%"%?%$%W$+!"$=$l$i$r%3%s%^$G6h@Z$C$?%j%9%H$K$J$j$^$9!#(B rel $BB0@-$N%j%s%/%?%$%W$O%9%Z!<%96h@Z$j$G$7$?$+$i!"4V0c$($J$$$h$&$KCm0U$,I,MW$G$9!#(B

`@import` $B5,B'(B

$BB>$N%9%?%$%k%7!<%H$+$i5,B'$r%$%s%]!<%H$9$k$?$a$K!"(B @import $B@k8@$rMQ$$$^$9!#$3$N$H$-!"%a%G%#%"%?%$%W$r;XDj$9$k$3$H$,=PMh$^$9!#(B

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

$B%a%G%#%"%?%$%W$O!"C1FH$+!"J#?t$N$b$N$r%3%s%^$G6h@Z$C$?%j%9%H$G5-=R$9$k!#(B
@import $B5,B'$O!"Ev3:%9%?%$%k%7!<%HFb$N$"$i$f$k5,B'$K@h9T$7$F!"%9%?%$%k%7!<%H$NKAF,$K5-=R$7$J$1$l$P$J$i$J$$!#(B

`@media` $B5,B'(B

@import $B$H;w$?$h$&$J$b$N$K!"(B @media $B$,$"$j$^$9!#$3$l$rMQ$$$k$H!"0l$D$N%9%?%$%k%7!<%H$K!"J#?t$N%a%G%#%"%?%$%W$KBP$9$k5,B'$r5-=R$9$k$3$H$,=PMh$^$9!#(B

@media print {
    /* $B;fG^BN8~$1%9%?%$%kDj5A(B */
    body { font: 10pt serif }
  }
@media screen {
    /* $B%3%s%T%e!<%?%9%/%j!<%s8~$1%9%?%$%kDj5A(B */
    body { font: 12pt sans-serif }
  }
@media screen, print {
    /* $B%9%/%j!<%s5Z$S;fG^BN8~$1%9%?%$%k%7!<%H(B */
    body { line-height: 1.2 }
  }

$B$G$O!"$3$N%9%?%$%k%7!<%H<+BN$N%a%G%#%"%?%$%W$O$I$&$9$l$P$h$$$G$7$g$&!)>e5-$NNc$G$O!"(B media="print, screen" $B$H$9$k$N$,E,Ev$G$7$g$&$,!"0lHL$K$O!"(B media="all" $B$G7k9=$G$9!#(B

SEO

7. $B%a%G%#%"(B

$B%a%G%#%"!&%0%k!<%W(B

$B%a%G%#%"%?%$%W$NFCDj(B

link $BMWAG(B

@import $B5,B'(B

@media $B5,B'(B