HTML講習

文字色と背景（PDF 素材）

文字色（color）

要素内の文字色を指定するためのプロパティ。

色（RGB値。）

キーワード（blackなど。名称。）

リンクの文字色の区別

アクセシビリティでは、通常テキストとリンクの文字色を明確に区別しないといけない。

通常の未訪問リンク色は、多くのブラウザでデフォルトで【blue、#0000ff】が指定されている

その他基本色としてのデフォルトスタイルシート設定。以下の順に記述する。

a:link { color: blue; } 未訪問リンク 【blue、#0000ff】

a:visited { color: purple; } 既訪問リンク 【purple、#800080】

a:hover { color: red; } カーソルオーバー時 【red、#ff0000】

a:active { color: red; } 選択時リンク 【red、#ff0000】

img要素で、画像が表示できない環境では代替テキストが表示される。そのテキストにcolorで適切な値を指定しておく事は、アクセシビリティで良いとされている。

背景色（background-color）

背景には、色と画像が指定できる。




背景は、内容領域・パディング領域・ボーダー領域に適用される。




マージン領域は、常に透過。親ボックスの背景が表示される。




ブラウザの表示領域全体に適用するには、body要素に指定する。




html要素にも出来るが、推奨されていない。

色（RGB値 [ rgb(255, 255, 255) ] または、キーワード [ red ] で指定。）

transparent（透過。デフォルト。）

背景画像（background-image）

要素の背景を画像で指定するプロパティ。

URI（rl("")で指定。）

none（画像を指定しない。デフォルト。）

CSSから見た画像の指定は、CSSファイルからのディレクトリの場所である事に注意

背景画像の繰り返し（background-repeat）

背景画像の繰り返しを指定するためのプロパティ。

repeat（背景画像を水平にも垂直にも繰り返し、要素全体に敷き詰めて表示。デフォルト。）

repeat-x（背景画像を水平方向のみに繰り返す。）

repeat-y（背景画像を垂直方向のみに繰り返す。）

no-repeat（背景画像をひとつだけ表示し、繰り返さない。）

背景画像の移動・固定（background-attachment）

背景画像の移動・固定を指定するプロパティ。通常、BODYでしか使用しない。

scroll（背景画像は文書のスクロールとともに移動する。デフォルト。）

fixed（背景画像はブラウザの表示領域に対して固定され、移動しない。）

背景画像の初期位置（background-position）

背景画像の初期位置を指定するプロパティ。

%（「水平 垂直」で指定。「0% 0%」で画像の左上端と要素の左上端を揃える。
「100% 100%」で画像の右下端と要素の右下端を揃える。）

長さ（「水平 垂直」で指定。「50px 100px」で画像の左上端を要素の左上から50px、上から100pxの位置で揃える。マイナス値も指定可能。）

top bottom center left right（「水平(top center bottom) 垂直(left center right)」で指定）

• 「top left」=「0% 0%」


• 「top center」「top」=「50% 0%」


• 「bottom right」=「100% 100%」


• 「center center」「center」=「50% 50%」


• 「center right」「right」=「100% 50%」


• 「center left」「left」=「0% 50%」


• 「bottom center」「bottom」=「50% 100%」

背景関連の一括指定（background）

背景関連を一括指定するプロパティ。並び順不同で構わない。

{

 background-color: white;

 background-image: url("./image.gif");

 background-repeat: no-repeat;

 background-attachment: fixed;

 background-position: center center;

 }

background: white url("./image.gif") no-repeat center center fixed;

 指定しなかった場合は、全てデフォルトの値になる。

 background: black none repeat 0% 0% scroll;

backgroundを使った画像の切り替え。

#globalnavi { 
	position: absolute;
	width: 900px;
	height: 42px;
	background: url("images/global_navi.png") no-repeat;
	list-style: none;
}

#globalnavi li {
	float: left;
	width: 225px;
	height: 42px;
}

#today a, #next a, #past a, #test a {
	display: block;
	width: 225px;
	height: 42px;
	text-indent: -10000px;
}

#today a { background: url("images/global_navi.png") 0px 0px; }
#today a:hover { background: url("images/global_navi.png") 0px -42px; }