こんにちは、今日はCSSってものを理解するためにレイヤーって意味を少しだけ理解してみましょう。
レイヤーって奴は何者だ！って方に簡単に説明するために、わかってる方には？？？な説明をします。
あくまでも今日は全く分からない方に雰囲気で伝わって欲しいのでご理解下さい。
レイヤーって奴は透明な紙を重ねた物って感じです。
例えば下記に5枚の紙を用意しました。
表現上グレーは透明だと思って見てください。
上記5枚の紙にCSSでそれぞれ命令をしてあげます。
一番後ろは背景の色赤にしなさい！
他の紙はそれぞれ画像を表示しなさい！
って感じに命令された紙は順番に重なって表示されます。
重なって初めて意味が分かるようになります。
この重なる用紙がレイヤーだと思ってください。
ようは重なる事です。
なんでこれがCSSに大事なのかって言うと、CSSって奴は基本1枚の紙に表示できる事が制約だらけになってます。
例えばヘッダー画像をアメブロに設置しようとすると
①ヘッダー画像に1枚
②元々あるアメブロのヘッダーに表示されるタイトル文字に1枚
③元々あるアメブロのヘッダーに表示されるブログ説明文に1枚
④背景色に1枚
⑤ブログのサイズ調整に1枚
⑥メニューをつける場合はメニュー用に1枚
と、こんな感じの重なりでブログは表示されてます。
CSSでブログのタイトルを消す場合に「.skinTitleArea {display:none;}」とCSSに書き込んであげるとブログのタイトルは消えます。
要はどのレイヤーがどの命令をしているのかを探せるようになればカスタマイズは簡単になります。
ブログのタイトルを消すのを例文にすると
①.skinTitleArea {display:none;}
②.skinTitleArea { }
③display:none;
①が全体像で
②が場所の名前（ブログのタイトルを表示している枠）
③が命令文です（その枠を消しなさいと命令している。）
レイヤーを正しく理解して表示してあるレイヤーの名前を見つければ、あとは命令を下すのみ！！！
探し方は後日また書きますが、CSSは命令をしてる場所に命令をするだけ。
そして最後に書いた命令が一番有効になります（遺言書みたい）。
例えば下記はブログのタイトルの枠の背景を赤色にしなさいって命令文です。
.skinTitleArea {background-color: #ff0000;} 赤色
.skinTitleArea {background-color: #000000;} 黒色
.skinTitleArea {background-color: #ffffff;} 白色
こんな感じで同じ意味の場所指定を3個書いてしまった場合、一番最後に書いた白色が適応します。
良くカスタマイズ講座みたいなブログを見ると、CSSの最後に書いてねって書いてあるのは、途中にどんな事が書いてあっても最後に書いたものが優先されるから、わからなかったら最後に書けばOKって意味です。
アメブロのカスタマイズはこんなイメージでCSSを書き換えて色や枠の大きさ、背景等を駆使してカスタマイズしていきます。
次回はCSSの場所の探し方は下記です。
http://ameblo.jp/a-homupe/entry-12210786919.html
[ 屋号 ] デザイン・ラボ 『画像屋』
[ 担当 ] 竹内
[ 電話 ] 090-6054-7129
[ 時間 ] 12時～24時 年中無休
[ ホームページ ] http://a-hp.net/