立て続けにCSSのメモをしてますが、最後に。

<ul>
<li><a href=”/”>a</a></li>
<li><a href=”/”>b</a></li>
<li><a href=”/”>c</a></li>
</ul>

なんて、メニューを横並びにa要素をブロック表示にして、floatで
回り込みさせるやり方で、これまたIE6の対応のために。

aタグに幅や高さを指定してfloatさせるんですが、aタグのCSSに
floatを指定するとIE6では階段状のように段々に下にずれていく。

解決策としては、aタグにdisplay: blockと幅高さ指定し、
liタグにfloatを指定する。こうすればIE6でもだいじょうぶ。

▶ 続きを読む »

aタグのCSSでは3つを駆使したりしますよね。a:linkは意味ないので
考えないことにして、ちょっとしたCSSの謎をメモ。

これまた、IE6の現象なのでそろそろどうでもいいとえば、
どうでもいいのですが、a:visitedとa:hoverの位置をCSS記述上で
a:visitedを後にa:hoverを前に書くとover時におかしなことになる点について。

a
a:visited
a:hover

こうするとvisited後でもhover時に、overが正常に反映される。

a
a:hover
a:visited

こうするとvisited後だとhover時にvisited要素が表示される。
もちろん、要素がかぶってなければ問題ないですが。

通常、visited要素がhover要素を上回るってことはないはず。
よって、a:hoverを下に記述するといいってことかな。

bodyに背景色をつけていて、mainの入れ物なんかに白を一面に敷きたい！
何てことがよくあります。しかし、floatでleftやrightに振っていると
mainの背景が下まで続かなく、何でだ？という時はmainの中にclear: both;
をさせるmain-bottomをmainの幅で、floatした要素の下にもってきて、
mainの背景色を下まで続けたりします。footerとして扱ってもいいですよね。

main-bottomに、clear: both;

<div id=”main”>
<div id=”left”>
</div>
<div id=”right”>
</div>
<div id=”main-bottom”>
</div>
</div>

しかし、IE6ではこれでもアレ？ってことがあってclear: both;と同時に
幅の指定もしっかりするとIE6でも正常に機能します。

floatする時は、幅指定をしましょう！というのは通説ですが、
clearする時にも幅指定をしっかりしましょう！ということに
なるでしょうか。

• idとclass
  <div id=”a” class=”b”>
• classに2つ
  <div class=”b c”>

あまり使う必要もなく、しっかりと認識していなかったので。

普通、idだけとかclassだけとかで事足りてしまうので、
意識してなかったですが、やり方によっては便利な2つ化。

指定方法は、

• #a.b　もちろん#aと.bバラでも。
• .b　で統一して、セレクト的に　.c　を使ったりできますね。

class2つでの発想としては、classを変えたいのだけ置き換えてではなく、
classをもう一つ付け加えて対応させるという発想ですね。

今までは、以前使っていた手間の掛かるCSSを引っ張り出して、
入れ替えて何てやってましたが、最近では0から書いた方が
速いことが多くなってきました。

CSSは省略化を考えずガンガン突っ込んでいくという考え方は
変わってませんが、省略化も綿密に考えるのも面白いなぁと
思えてきました。まぁそこに時間かけても意味ないですけどね。