backgroundプロパティの扱い

前回の更新からまだ４日程度だろうと思ってたら既に６日経過していました、ガバガバ日付間隔な私です。こんばんは。

今回は、コーディング中に少しつまづいてしまったbackgroundプロパティについて、少し書いてみようと思います。
・・・本当は少し前の記事（レイアウトの技法メモ①という記事です）の様に、他の１，２つの記事材料と合わせて一つの記事にしようと思ったのですが、そもそもそのやり方だと復習したい時にその情報を探しづらいという事に気づいたので、短めの記事になるかもしれませんが、一つ一つ別個の記事として書いていこうと思います・・・

前のあのメモの内容に関しても、一つの内容を少し膨らませて、また記事にしようと思います。・・・ナンバリングした意味が何一つなかったですね・・・ｗ

backgroundプロパティでつまづいた点について

そもそもの発端は、ある日コーディングの練習をしている時の事。

横並びのナビゲーションメニューに、普段はグラデーションで色を付け、ポインタ時には単色に変えるという至ってシンプルなコードを書こうとしていた時の事です。

#header ul li a {
display: block;
text-decoration: none;
padding: 15px 0;
background-image: -webkit-linear-gradient(
top, #F5F6F7 0%, #36EBD7 100%);
background-image: linear-gradient(
to bottom, #F5F6F7 0%, #36EBD7 100%);
}

#header ul li a:hover {
color: white;
background-color: blue;
}

 上記の様にコードを書いて、「これでオッケー」と思い、ライブビューでナビゲーションメニューにポインタを合わせたのですが、何故か文字色はちゃんと白になるのに背景色が変わらず、元のグラデーションがかかっているままでした。

「なんでぇ！？」と声を上げながらも、原因を探りましたが一向に分からず。
その時、ふとダメ元で、a:hoverのセレクタに行っているbackground-colorの宣言を、backgroundに変えてみたのです。

#header ul li a:hover {
color: white;
background: blue;
} 

すると、その時不思議な事が起こった！不思議なことに、上手い事hoverへの指定が動いて、ちゃんと背景色が青色に変わるようになったんですね。

動作はちゃんとしましたが、ここで新たな疑問。

「なんでbackground-colorではダメだったのにbackgroundでは良いのだ！？　全く訳が分からんぞ！！」

動作自体がうまくいっても分からない事が出てくるとどうしても手を止めてしまうのは私の悪い癖（良い事でもあるのかもしれませんが・・・）。というわけで、コーディングそっちのけでこの動作について調べ始めました。

backgroundプロパティの扱い方

 そもそも、background-colorなどはよく使いますが、backgroundというプロパティはどの様に扱うのか。以前見た覚えのある本を引っ張り出して復習しました。

これは、背景の色、画像、繰り返し、表示位置などのbackgroundに関わるプロパティを一緒くたにしたようなプロパティであり、それらについての宣言を半角スペースで区切って書く事により、一つのプロパティで背景に関する設定を全て書く事が可能になります。

具体的には、下記のようになります。

background: black url(photo.png) no-repeat 200px 100px;

左から順に、背景色(background-color)、背景画像(background-image)、繰り返し(background-repeat)、表示位置(background-position)の設定を行っています。順不同なので、それぞれの場所を入れ替える事も可能です。

そんなわけで、背景に関するプロパティを一つにして記述できるbackgroundプロパティですが、何故このプロパティにした途端上手くいったのか。
これについては調べても出てこなかったのですが、私なりに仮説を立ててみました。（あくまで仮説なので間違ってる可能性大ですが・・・

backgroundプロパティ無記入部分はデフォルト設定になる？

上述の通り、backgroundプロパティでは背景色、背景画像などの背景に関する設定を一括で書けるのですが、なにもbackgroundを使う時は全部書かなくちゃいけないというわけではありません。先ほど私がしていたように、色の指定だけでもいいわけです（それならbackground-colorでいいのですが）。

それでは、空白にした部分、設定せずにしておいた部分はどうなるのか。これについて、私は「設定しなかった部分はデフォルトの設定に上書きされるのではないか」と予想しました。

そうすると、先ほどの現象の理由もつきます。backgroundプロパティで背景色をblueに変え、背景画像については未記載だから、グラデーションの設定がデフォルトのなにもない状態に上書きされて、ポインタ時には背景色だけが出てくるようになったのでは、と考えました。

あくまで仮説ですから合ってるのかどうかも分かりませんが、とりあえず私はこれで納得しました。いつかどこかで正誤を知れればいいのですけどねー・・・

というわけで、今回は私がコーディング中に直面した問題についての話でした。意外と長くなったかも・・・？

まぁこれについては、「グラデーションの設定をul li aではなく親のulにすればbackground-colorのままで問題ない（ulの背景画像の上にaの背景色が来るため）」という事も発覚したので、結局そのようにコードを書いたのですがｗ
色しか指定しないなら、background-colorを使った方がいいでしょうしね・・・まぁ、新しい事を知るきっかけになったのは良かったと思います。

そんなわけで、今回はこんな感じで。