カテゴリー: CSS

タイトルのまんまだが、CSSの先頭のが数字だとCSSが無効になって機能しない。久しぶりにCSSをいじっていたので忘れていたことに気付いたいので、エントリー。

NG

#123abc
.123abc

OK

#abc123
.abc123

このように、アルファベットから始めた後に数字が来るのは問題ない。

ここで、一つ提案したいこととして、WEBなどにおけるこのような「小さいこと」に気を取られてしまってはいけないということ。あれもこれも覚えておこうとすると完全に身動きが取れなくなってしまう。性格にもよるところだが、あまりにもWEB的誤作動やバグのようなものは日常茶飯事に起こることというのが前提であれば、気にする必要もなくなってくる。

例えWEBデザイナーの人であっても、このようなCSSの小さなことは忘れも何の問題もない。問題があるとすれば、忘れてしまっていたことに悲しんだり残念がってしまうような無駄にある。

どのみち本当に必要なものは残る。

使われなくなった技術や手法は山ほどあるし、その使われなくなったものまで頭で覚えておく必要は全くないのです。このようにブログにメモしておけば検索で後で拾ったりカテゴリーでまとまって見られたりする訳だからそれでいいし、Evernote何かに突っ込んでおけば事足りてしまうことなのです。

まぁ、何が言いたいかというと、CSSの細かなことなどはむしろ忘れるくらい、大きなことからしっかりと脳に覚えさせておくべきことがあるのではないか？を問いたい訳でした。

CSSよる角丸が超便利ですね。IE8が残念ながら非対応のようですが、
Chrome、Safari、Firefoxでは問題なくCSSだけで角丸を実現できます。

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

Firefoxではimgタグは反映されないみたいですが、写真の角丸を
画像にほどこしていたことを考えると途轍もなく実用的です。

アップルのグローバルメニューのように左端と右端だけ適用することもできます。
divで背景色を敷いて使ったり、borderもしっかり角丸になりますし、
tableもＣＳＳを指定すれば角が丸くなっちゃいます。

IE6のCSSバグで回り込みさせるとなぜか、マージンの値が２倍になって
表示されてしまうことのCSS対策で、IE6ハックで別途マージンの値を半分にして
対策する方法もあるが、もっと簡単にinlineにすれば、marginの値は正常になる。

CSS {
display: inline;
}

同じところをブロック表示をしたい場合

CSS {
display: block;
display: inline;
}

２つのCSSが同じdisplayなのでダメなのでは？と思いますし、
CSS的には不正なのかもしれないが、Safari, Chrome, Firefox, Oera, IE8, iPhoneなど
でも問題なく表示されて機能しているので、だいじょうぶでしょう。

このブログはIE6は無視してますが、まだまだIE6を最低限考慮しないと
いけいない状況ですしね。

今更ながら、角丸CSSのやり方の備忘録。

結論：widthを指定する

HTML5からは、角丸が画像を使わずCSSだけでできるみたいだし、javascriptやtable小技でやったりもあるが、IE6を考えてまだ画像でやるのが一般的。

divタグで空にしてheight指定で背景に角丸画像背景を入れるのだとIE6でも問題なしだがソース的に、空はちょっとマズイだろということで、top middle bottomなど3つで上下を挟むやり方でtopとbottomにpaddingを高さ指定してやる。

すると、何だかtopの下に妙な空きがIE6だとできてしまうが、widthを指定すると解消される。

ちなみに、背景画像bottomなんかを超縦長にしておけば、divがtop bottomと２つですむ。PNGでも以外に超縦長の画像は、容量が増えないので縦可変の激しくないある程度の高さですむ場合は、ソースが軽くなる背景超縦長バージョンがいいかと。

あと、

縦並びul li aもIE6だと変な上下の幅ができるがこれもwidthを指定すると解消される。
これも忘れてたので、備忘録。

aタグのCSSブロック表示復習。。。

高さをaに height ではなく line-height 指定 pxがわかり良い（必須）
幅をaに width 指定 pxがわかり良い（必須）←縦並びでも指定しないとIE6縦間隔おかしくなる

縦並びであれば、floatいらず、
横並びであれば、liがあればliをfloat
何もなければa floatでOKだが、liがある状態でa floatだとIE6おかしくなる。
liは、縦並びでも横並びでもwidth, height, line-heightいらずだが、
aのブロック表示にwidth, line-height（height）の両方を必ず指定。

いまいち毎回忘れるので、備忘録。

立て続けに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タグ ブロック表示の回り込み【display: block;とfloat】

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