(3-8) サイドバー メニューのカスタマイズ・背景色のカスタマイズ（解説編その１）
このコラムは連載コラムです。
今回は前回のコードの解説です
では早速はじめましょう。今回は前回に設定したスタイルシートのコードの解説編です。ではCSS編集用画面を開いてください。
前回のコードの確認から
前回のコードは以下の通りでした。赤字が変更箇所でしたね♪
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* ①skinMenu と②skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:none;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
/* ③skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:0px 0px;
background:#ccccff;/* ←サイドメニューのタイトルに背景を敷きたいとき */
border:3px solid #ccccff;
}
/* ④skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:0px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
border-top:none;
border-right:5px solid #ccccff;
border-left:5px solid #ccccff;
border-bottom:5px solid #ccccff;
}
解説 その１
では解説です。解説は今回と次回の2回構成です。まずは下のイメージを見てみてください。サイドメニューの一部を拡大したものです。
上記のスタイルシートのコードと上のイメージの番号は対応しているので確認してみてください。
これら①～④は、実は下から順番に重なっているんです。言葉では表しにくいので、さらに立体イメージを作りましたのでこちらも見てください。
上のイメージを見てもらうと①～④はこのような順番で下から重なりあっていることがご理解いただけるかと思います。
実は①～④は全て同じ幅と言うことがポイントになります。それが分かると以下のクイズに答えられるはずです♪一度確認してみましょう☆
ではクイズです♪
①に黒色の背景を指定する
②に黄色の背景を指定する
これでプレビューするとあなたにはどう見えると思いますか？
「答え」
あなたには、黄色に見えるのです。
ではもう一問です。
上の条件でさらに
③に青色の背景を指定する
④に茶色の背景をしてする
とどうなるでしょう？
「答え」
あなたには青色のタイトル背景とその下部分は茶色の背景にしかプレビュー上は分からないはずです。このような重なりの順番を理解することで、どの部分に背景色をつけるとどの部分の背景が変わるかがより理解できるのではないでしょうか？
もう一度スタイルシートのコードを確認します。
かなりの解説量で申し訳ありません。ひるまずついてこれますでしょうか・・・？（って挑戦的ですみません・・・）。初めに掲載したスタイルシートのコードを再度確認します。このうち今回は①のブロックと②のブロックを見て行きます。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* ①skinMenu と②skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:none;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
赤字で「none」と記されている部分があります。これは①の背景色をなしにする設定をしています。
そして②の部分である.skinMenu2には｛｝（中括弧）の中が空白となっておりこちらも背景色の設定がありません。
上の立体図に照らし合わせるとお分かりだと思いますが、今回の背景色の設定は③のブロックと④のブロックを修正することで全て成立する設定にしているということになります。
まずはここまでを抑えてください。
長くなりますので次回③と④の解説をし、あなたのもやもやを晴らしますね♪いつもしつこい解説におつきあいいただきありがとうございました。
しつこく分かるまで解説するのがこのサイトの趣旨であります・・・
おすすめ
