Category CSS Archive

id/class命名規則

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

CSSでサイトを組むにあたって悩むid/classの命名規則。はてなブックマークを見てたらCSS Flightでのpurprinさんのプレゼン資料を見つけた。

日本でも海外でも結構ばらつきがあって中々面白いなと思った。特にサイドバーとかは#sidebarとか#beta、#left、#subBox、#rightrail、#extra、#subcol、#colとものすごいバリエーションがあって、サイドバーのネーミングってみんな結構悩んで付けてるんじゃないかな?

けどやっぱり一番悩むのは汎用的に使うクラス名...名前つけて後からやっぱり違う名前にした方が良かったなとか思う時結構あるし(鬱)

Firefox1.5で長い点線を出さない方法

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

Firefox1.5ユニバーサルバイナリが発表されてインストールしてから数日、自分の作ったサイトで画像置換を使ったリンクをクリックすると、フォーカスされた点線が画面外に向かって表示されてしまう事に気づいた。

どうやらtext-indent: -9999px;で画面外に飛ばしたテキストを拾ってるらしいのは分かるのだが、対処方法に困っていたらFsikiさんの所に記事が載っていた。

aタグのoverflowプロパティにhiddenを指定すればOKらしいとの事で試すと見事に消えました♪Mac IEのoverflowプロパティにvisible以外を指定すると要素が表示されないバグを回避するためにバックスラッシュハック(/*\*/ 〜 /**/)を使えば完璧。いや助かりました。

/*\*/
a { overflow: hidden; }
/**/

IE7で使えなくなるハック

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

IE7のβ版が出て数ヶ月。情報をちらほら集めだしてみたら適応されなくなるハックが数種類あるみたい。例えばスターハックやアンダースコアハック、プロパティの後に空コメントを入れるハックなどが使えなくなるらしい。そもそもスターハックやアンダースコアハックは構文的にも認められる記述ではないからね。けど構築したサイトでスターハック使ってるなぁ...(苦)対処しないと。

floatを解除する - clearfix -

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

floatを使って画像にテキストを回り込ませて解除する時 clear:both;やclear:left;などを使うけど、テキストの量が少ないと上手く解除されない。

例えば......

image1画像にテキストを周りこませる。

この状態から回り込みを単純に解除するには空のdivタグやbrタグにclear: both;プロパティを与えれば良いんだけど、くくってるdivタグにmargin-bottomなどのプロパティが与えられてるとき、テキストの終わりの部分からしかmarginが計算されないので正確なmarginが適応されない。しかもpでくくったりした場合はブロック要素が入れられないから回り込みを解除できない。

色々探してなんとか方法を見つけたので覚えがきとして書いておこう。

Read more