background-color、color|背景の色・要素自身の色を変更する
background-colorを使用すると背景の色、colorを使用すると要素自身の色を変更できる
#****** |
#から始まる16進数00〜FF六桁の組み合わせで指定する。 左から二桁ずつ、R(赤)、G(緑)、B(青)となり、数値が大きいほど明るくなる。 |
---|---|
red など | カラーネームで指定。 |
#*** |
#から始まる16進数0〜F三桁の組み合わせで表記する。 左から一桁ずつ、R(赤)、G(緑)、B(青)となり、数値が大きいほど明るくなる。 |
rgb(***,***,***) |
***に0〜255の10進数にて表記する。 左から、R(赤)、G(緑)、B(青)となり、数値が大きいほど明るくなる。 |
rgb(+++%,+++%,+++%) |
+++に1〜100%のパーセントで表記する。 左から、R(赤)、G(緑)、B(青)となり、数値が大きいほど明るくなる。 |
transparent | transparentを指定すると、「透明色」となる。※background-colorのみ |
背景画像に関するさまざまなプロパティ
背景画像に関するさまざまなプロパティについて、記載する。
background-image - 背景画像を指定する
url(画像のパス); |
パスで指定した画像を使用する。 指定するパスは絶対パス、相対パスどっちでもかまわない。 |
---|---|
none | 背景画像を使わない(デフォルト) |
※hr要素に適用すると「画像による水平線」が使用できる。その際は画像分の幅をheightプロパティ等で確保すること。
background-position - 背景画像の位置を指定する
- 値は1つ、ないし2つ指定する。2つ指定するときは半角スペースで区切る
- 2つ指定された場合は、”[水平位置(基準は左端)] [垂直位置(基準は上端)]”と扱われる。
- 1つ指定された場合は、”[水平位置(基準は左端)]”と扱われ、垂直方向は自動的に50%(bottom)となる。
数値(+単位)、ないし% |
数値(+単位)、または0〜100%で表記する。 指定できる単位はこちら |
|
---|---|---|
水平位置 | ||
left | 左寄せ | |
center | 中央寄せ | |
right | 右寄せ | |
垂直位置 | ||
top | 上寄せ | |
bottom | 中央寄せ | |
bottom | 下寄せ |
background-repeat - 背景画像を繰り返すか設定する
repeat | 背景画像をタイル上に敷き詰める(デフォルト) |
---|---|
repeat-x | 横方向に並べて敷き詰める |
repeat-y | 縦方向に並べて敷き詰める |
no-repeat | 繰り返さない |
background-attachment - 背景画像をスクロールするか設定する
scroll | 背景画像をスクロールする(デフォルト) |
---|---|
fixed | 背景画像をスクロールしない |
かゆい所に手が届く設定? リスト編
padding-left: |
li要素に適用させることで、リストマーカーとテキストの間隔を調整することができる。
|
---|---|
margin-left: |
dd要素に適用させることで、説明文のインデント幅を調整できる。
|
float:left |
li要素に適用させることで、
floatについてはこちら |
display:inline |
li要素に適用させることで、
displayについてはこちら |
テーブルに関するさまざまなプロパティ
テーブルに関するさまざまなプロパティについて、記載する。
border-collapse - セル間の枠線をくっつけるか離すかを設定する
collapse | くっつけて表示させる |
---|---|
separete | 離して表示させる |
empty-cells - 空セル(何も値が入力されていないセル)を非表示にするか設定する
show | 空セルを表示させる(デフォルト値) |
---|---|
hide | 空セルを表示させない |
- あらかじめ「border-collapse」を「separete」に設定する必要がある
- ブラウザによっては反映されない場合がある
border-spacing - セル間の間隔を、数値で指定する
数値(+単位) |
指定した数値分、セル間を離して表示させる 指定できる単位はこちら |
---|
- あらかじめ「border-collapse」を「separete」に設定する必要がある
- 値を2つ並べて記載すると、左右と上下にそれぞれ適用される。
フォームに関するプロパティ
今日はひとつだけ...。
scrollbar-*** - スクロールバーに関する設定を変更する
scrollbar-base-color: | 基本色を指定する |
---|---|
scrollbar-face-color: | ボタン部分を指定する |
scrollbar-track-color: | スクロールを動かすレール部分を指定する |
scrollbar-arrow-color: | 矢印部分の色を指定する |
scrollbar-highlight-color: | ハイライト部分(内側)を指定する |
scrollbar-shadow-color: | 影部分(内側)を指定する |
scrollbar-3dlight-color: | ハイライト部分(外側)を指定する |
scrollbar-darkshadow-color: | 影部分(外側)を指定する |
- ブラウザが「互換モード」の場合はbody要素に、「標準モード」の場合はhtmlに対してこれを設定すると
ページのスクロール部分にスタイルが反映される。
- 今日は特に無かった
(c) 2011 laughsketch.com / confeito7