07 文字・背景の書式設定
HTML構文では実現できなかった文字への縄掛け、また、背景画像に対しての細かい設定がスタイルシートで設定することができるようになりました。
<POINT-1> | 背景色{background-color:色情報;} ※文字の背景色に対して色を設定します。 |
---|---|
<実習> | <background-color_1.htm> |
<解説> | <background-color_1_1.htm> |
<実習> | <background-color_2.htm> |
<解説> | <background-color_2_1.htm> |
<POINT-2> | 背景画像{background-image:url(ファイル名);} ※文字の背景に対して画像を設定します。 |
<実習> | <background-image_1.htm> |
<解説> | <background-image_1_1.htm> |
<POINT-3> | 背景画像の方向指定{background-repeat:方向指定;} ※背景画像に対して表示する方向を設定します。 「scroll」を設定すると背景画像がスクロールするようになります。(初期値) |
<実習> | <background-repeat01.htm> |
<解説> | <background-repeat01_1.htm> |
<実習> | <background-repeat02.htm> |
<解説> | <background-repeat02_1.htm> |
<実習> | <background-repeat03.htm> |
<解説> | <background-repeat03_1.htm> |
<POINT-4> | 背景画像の固定{background-attachment:fixed;} ※背景画像を固定させます。 |
<実習> | <background-attachment_1.htm> |
<解説> | <background-attachment_1_1.htm> |
<実習> | <background-attachment_2.htm> |
<解説> | <background-attachment_2_1.htm> |
<POINT-5> | 背景画像の位置設定{background-position:横位置 縦位置;} ※背景画像の位置を設定します。 ☆縦横位置(基準はウインドウの左上) 単位(mm,cm,in,pc,em,px)付きの数値 パーセント(%) ☆横位置 left(左)・center(中央)・right(右) top(上)・ center(中央)・ bottom(下)☆縦位置 |
<実習> | <background-position_1.htm> |
<解説> | <background-position_1_1.htm> |
<実習> | <background-position_2.htm> |
<解説> | <background-position_2_1.htm> |
<実習> | <background-position_3.htm> |
<解説> | <background-position_3_1.htm> |
<One point> |