css

先日wordpressのテーマファイルをいじっていたときに、コード上ではAbcdefとなっているのに、実際にブラウザで見てみるとabcdefになっていて、しばらくにらめっこをしていたんですが…

調べてみたところ、コード上では大文字なのになぜブラウザで見ると小文字なのかの原因は、スタイルシートで

text-transform　というスタイルがあたっていたからでした。

プロパティ値は

• none　（初期値）
• capitalize　（先頭の文字だけ大文字）
• uppercase　（全て大文字）
• lowercase　（全て小文字）

の4つで、今回の原因は　Abcdef　のテキスト部分に、lowercase（全て小文字）が指定されていたせいで、先頭のAが小文字になっていたのでした。

どうやら単語ごとに先頭文字を大文字にしたりできるみたいなので、例えば

i love wordpress.
と3つの単語をpタグで囲って、そのpタグに　text-transform:capitalize; を指定すると
i love wordpress. となるわけですね。
使い道があるかどうかはちょっと…ですが、また引っかかりそうなのでメモメモ。

今日は画像のリンクの枠の装飾方法を考える機会があったので、それについて。
これでも一応設定きくんだなぁ、というメモなので、役に立つかどうかは不明…

何も設定していないとこんなかんじで、画像にリンクを貼った場合青い枠（左）がでます。（クリック後は紫色（右））
で、リンク色をcssで設定していると、Firefoxで見たときは枠の色がリンクの文字色と同じになります。が、IE6では何も変わりません。
これがIE6でも同じように枠の色を変えられないかなぁ、と思ってcssを書いてみました。

a img	{
	border:none;/*まずリンクの枠を消す*/
	padding:2px;/*消したボーダー分の余白を設ける*/
	background:#333333;/*枠の色にしたい色を設定する*/
}
a:hover img	{
	background:#999999;/*リンク画像にマウスを乗せたときの枠の色を指定する*/
}

これがいいかなぁ、という感じです。
別に↓でもいいんじゃ…と思ったんですが

a img	{
	border:2px solid #333333;/*通常時のリンク画像の枠の色*/
}
a:hover img	{
	border:2px solid #999999;/*マウスを乗せた時の枠の色*/
}

これだとIE6の方では全く効果がなかったです。Firefoxでもa:hoverの指定のみ効果があるようで…。
画像に枠をつけるのにbackgroundで指定するのもちょっと変わってる気がしますけどね。
他にもっと楽な方法ないかなぁ。