グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

hタグにそのままテキストを入れてみせるのではなく、
CSSで背景に画像を指定して、HTMLにかいたテキストは飛ばしてしまう。
よくやる手法だと思います。
が、たまにwidthもhightもmarginもpaddingも全部設定したにもかかわらす、
下に隙間が空いてしまう事があります。

そんな時はたいていIE６自体が持っているスタイルシートで指定された
フォントサイズと行間が、自分のスタイルシートで指定したhightをこえてしまっているのが
原因と思われます。

例えばIE6のスタイルシートではh1に入るテキストは18pxと指定されているとします。
でも自分が背景に指定した画像の高さは11pxなのでhightを11pxで指定します。
そうすると文字を飛ばしているとはいえ、
18pxの文字が入っている事になり、下に7pxの不明な隙間が出来てしまうのです。

これを解消するには、自分がhを指定したスタイルシートに、
下記の指定を追加します
overflow:hidden;
たったコレだけの事がないために苦労してしまうことになります。

今更な感じですが、IE6でのレイアウト崩れについてです。

＜div＞や＜img＞などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。

横幅にぴったりな＜img＞の下の隙間


＜img＞タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、＜img＞と要素の間の改行が原因であることが多いです。

＜div＞
　＜img src="xxxxx"＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。

こういう場合は＜img＞タグ後の改行をとってしまうか、＜img＞タグの後ろに＜br /＞タグを入れれば解決できます。

＜div＞
　＜img src="xxxxx"＞＜br /＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

こんな感じです。



縦細の＜div＞の下にできる隙間


縦幅の狭い＜div＞などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ＋行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。

スタイルで font-size や line-height を指定して、＜div＞の height よりも小さくしてあげれば直ると思います。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。

lightboxを使って画像をポップアップさせたとき、エリアの外はデフォルトでは半透明の黒が敷かれるのですが、そこを変えてみました。

カラーは、lightbox.css内にある「 #overlay 」の背景色を変更することで変えることができます。

同じようにして、不透明度も変えられるだろうと思ったのですが・・
どうやら、ここでは設定できないようです。

不透明度のほうは、lightbox.jsの320行目にある

new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

最後の to: の部分で設定できました。
この場合は0.8なので不透明度80%です。

更新のたびに画像を差し替えるサイトで、かつ画像の縦幅が毎回変わるような場合。

＜img＞タグの height の値を指定してしまうと更新のたびに変えなくてはいけなくなってしまうので、最初から height を入れない、という方法を取ることにしました（指定しなければ勝手に画像のサイズになるので）。

ですがこの＜img＞タグのサイズ指定、入れなければならないものという認識があったので、実際のところどうなのか調べてみました。


するとどうやら、サイズ指定は必須ではなく任意、のようなのです。
HTMLチェッカーにかけてみても、エラーなどは出ませんでした。

では何故入れるのかというと、ちゃんとメリットがあるようです。

・ページの表示速度が上がる
・ページ読み込み中と読み込み後とで、レイアウト崩れが起きない
（画像が読みこまれた瞬間にテキストがずれるとか、そういうのが防げる）

表示速度はほとんど変わらないようですが、レイアウト崩れのほうは、重いページでは多少関わってくるかもしれません。


基本は入れるようにして、画像サイズが変わる可能性がある部分は外す、という形が一番良さそうですね。


おっしーでした。

スタイルシートでコーディングする時に、なんとなくいつも id と class の使い分けに迷ってしまいます。

そこで簡単にどう使い分けたらいいかを書いておこうと思います。
レイアウトを行うという点で考えるとこれだけでは分類しきれない場合も多いですが、参考にして下さい。

■id
「一意属性」とも呼ばれており、割り当てた値は唯一の名前を持つ事になります。
例えば料理のレシピを紹介しているサイトで「id="pasta"」や「id="cake"」とすることによって、それぞれが意味を持った情報の集まりになります。
要素に固有の値を持たせることがid属性の役割です。

■class
class属性は分類をあらわすもので、同じ意味を持つ意味を持つ情報をグループ化して明示する際に定義します。先ほどdivに「pasta」や「cake」と固有の値を定義したものは、それぞれにレシピに関する情報であるといえるので「class="recipe"」と定義することができます。