プログラミング言語は、あらかじめ決められた単語に特定の意味を持たせ、その意味以外ではその単語を用いることができないようになっています。そうした単語を予約語といいます。例えばjavascriptでは、char、do、else、export、false、thisなどの予約語があり、変数名などにそのままでは使えません。
同様にCSSにも予約語があり、ID名やclass名を定義する際には注意が必要です。
●color
htmlの仕様になっているwebページ用のスタンダード色(Standard Colors 17)でCSSにおいても色を指定する予約語(予約色)になっています。
|
|
バックの色 ライム
|
HTML
bgcolor="lime"
|
CSS
style="background:lime"
|
予約語(予約色・色名表記)と16進表記(RGBカラー値)
|
色
|
予約語
|
16進表記
|
色
|
予約語
|
16進表記
|
色
|
予約語
|
16進表記
|
|
|
aqua
|
#00FFFF
|
|
black
|
#000000
|
|
blue
|
#0000FF
|
|
|
fuchsia
|
#FF00FF
|
|
gray
|
#808080
|
|
green
|
#008000
|
|
|
lime
|
#00FF00
|
|
maroon
|
#800000
|
|
navy
|
#000080
|
|
|
olive
|
#808000
|
|
orange
|
#FFA500
|
|
purple
|
#800080
|
|
|
red
|
#FF0000
|
|
silver
|
#C0C0C0
|
|
teal
|
#008080
|
|
|
white
|
#FFFFFF
|
|
yellow
|
#FFFF00
|
|
|
|
まめ知識:web color・webカラー
●font-family
webページに表示するフォントのタイプを指定します。
|
予約語
|
予約語の意味
|
|
serif
|
明朝系のフォントを指定します
|
|
sans-serif
|
ゴシック系のフォントを指定します
|
|
cursive
|
筆記体・草書体のフォントを指定します
|
|
fantasy
|
装飾系のフォントを指定します
|
|
monospace
|
等幅のフォントを指定します
|
|
|
予約語 serif
|
CSS: style=" font-family: serif;"
|
|
|
予約語 sans-serif
|
CSS: style=" font-family: sans-serif;"
|
|
|
予約語 monospace
|
CSS: style=" font-family: monospace;"
|
●font-size
webページに表示する文字のサイズを相対指定します。
|
予約語
|
予約語の意味
|
|
medium
|
標準サイズのフォントを指定します
|
|
large
|
やや大きいサイズのフォントを指定します
|
|
x-large
|
大きいサイズのフォントを指定します
|
|
xx-large
|
極めて大きいサイズのフォントを指定します
|
|
small
|
やや小さいサイズのフォントを指定します
|
|
x-small
|
小さいサイズのフォントを指定します
|
|
xx-small
|
極めて小さいサイズのフォントを指定します
|
|
larger
|
より大きいフォントを指定します
|
|
smaller
|
より小さいフォントを指定します
|
|
|
予約語 medium
|
CSS: style=" font-size: medium;"
|
|
|
予約語 x-small
|
CSS: style=" font-size: x-small;"
|
|
|
予約語 x-large
|
CSS: style=" font-size: x-large;"
|
ツール:cssで文字サイズ指定・サンプル
●border-style
ボックスなどを囲む枠線の形状を指定します。
|
予約語
|
形状
|
CSS
|
|
solid
|
|
style=" border: 3px solid #444444;"
|
|
dashed
|
|
style=" border: 3px dashed #444444;"
|
|
dotted
|
|
style=" border: 3px dotted #444444;"
|
|
inset
|
|
style=" border: 6px inset #777777;"
|
|
outset
|
|
style=" border: 6px outset #777777;"
|
|
ridge
|
|
style=" border: 6px ridge #777777;"
|
|
groove
|
|
style=" border: 6px groove #777777;"
|
|
medium
|
|
style=" border: medium solid #444444;"
|
|
thick
|
|
style=" border: thick solid #444444;"
|
|
thin
|
|
style=" border: thin solid #444444;"
|
ツール:htmlできれいな枠線の表組を作る