サイトにおいて、マーク付きのリストはよく目にします。
※こんな感じのやつ
上のテキストの部分が一行の場合はきれいに表示されますが、もしも2行になってしまうときれいに表示されなくなってしまいます。
※こんな感じに、テキストが
マークの下にまがたってしまう。
これを防ぐには下記
.sample {
text-indent:-1px;
padding-left:1px;
zoom:1;
}
これによって、テキストが改行されて二行になってもマークの下にはテキストが回りこまず、きれいに表示されます。
サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。
もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。
これを防ぐには下記のCSSをhtml要素に追加します。
html {
margin-bottom:1px;
height:100%;
}
html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。
まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。
要素を親要素の上下中央に表示したい、ということはサイトを作っていてよくあると思います。
たとえば、テキストと画像が横並びになっていて、テキストの分量が増えても画像を上下中央に表示したい、という場合など。
そんなときの方法を紹介します。まずはHTMLから。
<div> <p>こちらの分量が増えても、buttonを中央に表示したい</p> <p><img src="button.gif" alt="ボタンの画像" ></p> </div>
次に、CSS
p{
display: table-cell;
vertical-align: middle;
display:inline; //IE6,7対策
zoom:1; //IE6,7対策
}
display:table-cellで自動的に横並びになるので、floatなどは不要です。
なお、上記のCSSでdisplay:inline;とzoom:1;の前に全角スペースがあるのは、IE6、IE7だけに反映させるためのCSSハックです。
親要素にheight:1%を指定すると解決したと思います（うろ覚え）。
parent{
padding:500px;
height:1%
}
コーディングでハマる罠っていうのは大体同じようなことだと思います。
まぁ95％以上の確率で、コーディング時の問題はIE6、IE7、IE8で起こると思います。
今回はコーダー最大の敵、というかコーダーおよびJavascriptプログラマー曰く「ほんと消えてなくなってほしい」代表のIE6くんの基本的な対策を紹介します。
●loat要素のmargin2倍問題
IE6ではfloatを指定した要素にmarginも指定すると、そのmarginの値は2倍で表示されます。これを防ぐにはdisplay:inline;を指定する
.sample{
float:left;
margin-top:100px;
display:inline;
}
●min-height問題
IE6はmin-heightが反映されません。しかし、IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、単純にheightだけを指定すればOK。
.sample{
min-height:500px;
height:500px; //heightの前に半角スペースがあるので、IE6だけに反映される
}
●position:relative問題
IE6ではposition:relativeをそのまま指定するとダメ。どうだめになるのかは未検証ですが、zoom:1;を追加するようにしましょう。
.sample{
position:relative;
zoom:1;
}
●ネガティブマージン問題
marginをマイナスで指定すると、要素が逆方向に移動しますが、IE6ではposition:relative; zoom:1を追加します。
.sample{
margin-top:-50px;
position:relative;
zoom:1;
}
●overfllow:hidden問題
overfllow:hiddenにはzoom:1;を追加します。
.sample{
overfllow:hidden;
zoom:1;
}
とりあえず基本としてはこんなところだと思います。
IE6、IE7、IE8に関しては、困ったら「zoom:1;を追加」で問題が解決することが多いと思います。
IE6などはズレても修正が簡単ですが、まれに、ごくごーくまれにFirefoxだけ、とかsafariだけちょっとズレた、なんてときは結構大変ですよね。本当にまれですけれども。
赤ちゃんの大冒険
おさるランド
動物オーケストラ2
子どもゲームランド
おしゃべりボタン
天空までのぼれ！
ジャンプで川下り
ひよこランド
動物オーケストラ
ポコポコアニマル
キラキラお絵かき
音が出るお絵かき
あいづちん
