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 - 背景画像の位置を指定する

数値（＋単位）、ないし% 数値（＋単位）、または0〜100%で表記する。
指定できる単位はこちら
水平位置
left 左寄せ
center 中央寄せ
right 右寄せ
垂直位置
top 上寄せ
bottom 中央寄せ
bottom 下寄せ

background-repeat - 背景画像を繰り返すか設定する

repeat 背景画像をタイル上に敷き詰める（デフォルト）
repeat-x 横方向に並べて敷き詰める
repeat-y 縦方向に並べて敷き詰める
no-repeat 繰り返さない

background-attachment - 背景画像をスクロールするか設定する

scroll 背景画像をスクロールする（デフォルト）
fixed 背景画像をスクロールしない

かゆい所に手が届く設定？　リスト編

padding-left: li要素に適用させることで、リストマーカーとテキストの間隔を調整することができる。
  • 通常時
  • 「padding-left：20」を適用
margin-left: dd要素に適用させることで、説明文のインデント幅を調整できる。
通常時
通常時は説明文がこの位置になる
margin-left:1;
margin-left適用時には、この位置になる
float:left li要素に適用させることで、
  • テスト1
  • テスト2
  • テスト3
このように横並びで項目を表示できる。
floatについてはこちら
display:inline li要素に適用させることで、
  • テスト1
  • テスト2
  • テスト3
このように横並びで項目を表示できる。
displayについてはこちら

テーブルに関するさまざまなプロパティ

テーブルに関するさまざまなプロパティについて、記載する。

border-collapse - セル間の枠線をくっつけるか離すかを設定する

collapse くっつけて表示させる
separete 離して表示させる

empty-cells - 空セル（何も値が入力されていないセル）を非表示にするか設定する

show 空セルを表示させる（デフォルト値）
hide 空セルを表示させない

border-spacing - セル間の間隔を、数値で指定する

数値（＋単位） 指定した数値分、セル間を離して表示させる
指定できる単位はこちら

フォームに関するプロパティ

今日はひとつだけ...。

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: 影部分（外側）を指定する