CSS: January 2009アーカイブ

 4 
のように、四角で囲む文字をCSSで扱う機会があったので、記録しておきます。

ふと思うと、今までなら画像で処理してしまいそうでしたが、ブラウザでの文字サイズの変更や、ファイルサイズを1バイトでも減らすことは、サーバーや回線の負荷など、1つは微々たるものでも、何度も表示されれば積み重なっていくので、今回はエコを考えてCSSでの処理となりました。

まあ、とくに目新しい訳ではないですが、次使うときには忘れていそうなので。

//HTML//////////////////////////////////////////////////////////////////

<span class="cubettl">&nbsp;4&nbsp;</span>


//CSS//////////////////////////////////////////////////////////////////

.cubettl{
border-style: solid;
border-width: 1px;
border-color: #000000;
color:#000000;
}

/*Safariのみ見え方が異なるため、ハックで調整*/
body:last-child:not(:root:root) .cubettl {
padding-top:0px;
padding-bottom:1px;
}


広さの単位である、平方メートル（m²）や、容積の単位である立法メートル（m³）を入力するには、Macでは『平方メートル』もしくは『立方メートル』と入力して変換すると表示されますが、HTMLでは認識されません。

Windowsでも同様ですが、HTMLで正しく表示させるには、正しい文字コードで入力するか、上付き文字としてCSSで設定するかが必要です。

//文字コード//////////////////////////////////////////////////////////////////
『平方メートル』もしくは『立方メートル』の文字コード
² : ²
³ : ³


//CSS//////////////////////////////////////////////////////////////////

span.sup{
vertical-align:super;
font-size:80%;
}

参考サイト
特殊文字コード表
HTMLの特殊文字

やっぱりどうしてもInternet Explorerなどでうまく他のブラウザと表示をあわせることができず、最後の手段のハックを使う場面が出てきます。

今回はIE7のみに適応したい場面があったので、記録しておきます。

下の例は、#menu ulにmargin-leftをIE7のみ別の値を設定したい時のハックです。

//CSS//////////////////////////////////////////////////////////////////

#menu ul{
padding-top:21px;
margin-left:38px;
}

*:first-child+html #menu ul{
margin-left:76px;
}