マメ知識：CSS予約語

予約語とは

プログラミング言語は、あらかじめ決められた単語に特定の意味を持たせ、その意味以外ではその単語を用いることができないようになっています。そのような単語を予約語といいます。例えばjavascriptでは、char、do、else、export、false、thisなどの予約語があり、変数名などにそのままでは使えません。

同様にCSSにも予約語があり、IDやclassを定義する際にはその名称に注意が必要です。

● color

htmlの仕様になっているwebページ用のスタンダード色（Standard Colors 17）は、CSSにおいて
も色を指定する予約語（予約色）になっています。

予約語（予約色・色名表記）と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	等幅のフォントを指定します

 

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できれいな枠線の表組を作る