CSSのアーカイブ

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。

画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。
グローバルナビとか、写真のサムネイルとか。

そういうときにほぼ間違いなく出現するのが、画像の下の小さなすき間。
Firebug で確認すれば、それが li 内の問題であることはすぐ分かるのですが、いろいろ試してみても画像はなかなかピッタリくっついてはくれません。
続きを読む

「今さらかよ」という声が聞こえてきそうですが。

前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。
ようやく踏ん切りが付きました。
ので、自分はこういう順番で書きますよー、という宣言的な意味を込めてエントリー。

今までは特にルールもなく、「組んでいくときに追加した順」みたいな感じでした。
もちろん気が付く範囲では調整はしてたので、何となくは統一されてましたが。
他の人からすると恐ろしく読みにくいことになってたんだろうなー、と推測します。
（でも社内で CSS 使えるの僕だけなので他の人が見ることはまぁ無いんですけどね（っていうかそういう状況を何とかするのが先のような気がしないでもなjっs；ぁsdf；jふぁsj））

さて、そんなこんなで今までは何事も無くやってきたのですが、さすがにずっとそのままではまずかろう、という漠然とした動機で決めることにします。
といいつつ、自分で決めた順番ではなくて、基本的には Mozilla の順番を踏襲。
あとは好みとか使い勝手とかで違和感があれば、追々ちょっとずつ変えていこうと思います。
続きを読む

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。

»CSS Naked Day…公式（？）サイト

»そういえば裸の日でした｜CSS HappyLife
»CSS Naked Day | Web標準Blog | ミツエーリンクス
»そういえば裸の日だったね – Archiva

要は HTML と CSS（構造と装飾）の分離を促そうというコンセプトらしいのですが、こんなイベント（？）があったんですね。
初めて知りました。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。

IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。
どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。
もちろんソースにそんなものは含まれていません。
JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。
続きを読む

「ある列だけを改行なしにしたい」というときが結構あります。
確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。
ソースの見栄え的にもいただけない感じ。

そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。
が、どうしてもうまくいきません。
col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。
ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。
続きを読む