コンテンツ作りのついでにスタイルシートのお勉強をしたので、忘れないようにここにメモしておく。
【margin 属性と padding 属性について】
どちらも余白の意味だが margin は border（枠）の外側の余白、padding は内側の余白を指す。
しかしBODY 要素に margin の値を指定する場合、ＩＥとＮＮでは意味合いが違ってくる。
BODY 要素で border を指定すると、ＮＮではコンテンツ（内容）の外側に枠が引かれるが、ＩＥではウインドウ枠そのものが border の枠になる。
つまり、厳密にいえばＩＥの場合、BODY { margin : 〜 }と指定するのはウインドウ枠の外側の余白を指定することになってしまう（そんなことはあり得ない！）が、なぜか本来 padding になるはずの枠の内側指定にしてしまっている（ズル！）
BODY に border を指定する人はあまりいないので、ズルはばれていないみたいだが、ＮＮではあくまで border の外側なので、値が違ってくる。
margin と padding の使い分けは覚えておこう。
【スタイルシートと SCRIPT タグ】
スタイルシートを設定している時、BODY タグのすぐ後（つまりコンテンツの一番上）に SCRIPT タグを使うと、ＮＮ４ではスタイルシートが有効にならない場合がある。
他の要素が入った後に使うと大丈夫なのだけど。
結局その後いろいろいじったら、大丈夫になった。
Javascript の記述にもよるのかなあ。
はぎさんは相性だとか言ってたけど、ほんとか？
よくわからん、ヘンなの。
【 line-height 属性の使い方】
最近ＮＮ４で見ると、テキストに画像がかぶっちゃって、読めないページがゴマンとある。
これはみんな line-height のせい。
ＮＮ４では line-height が設定してあると、画像を無視しちゃうのだ。
BODY に何もかも指定してＯＫなのはＩＥだけ。
ＮＮ４では各要素に、それに見合った指定をすると考えた方がよいみたい。
たとえば line-height は P 要素に指定し、行間を空けたいテキストには P タグを使用する。
テーブル内をスタイルシートで設定する時も、BODY だけでなく、TH , TD , P などもそれぞれ指定し、TH , TD の中でもテキストの部分だけ P で囲むようにする。
そうすると TD の中に画像とテキストが混在していても、P の中だけに line-height が適用される（みたいだ）。
まだ細かく調べたわけじゃないから、これで全ての場合にうまくいくのかどうかわからないけど。
ちなみに参考ページはこちらとこちらです。
| 戻る | メール |