CSSの最近のブログ記事

iPhoneやiPodTouchでPC用に作られたサイトを見た場合、1pxの幅や高さの画像は、縮小されてみた場合に表示されなくなってしまうことがあります。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。

div{
width:300px;
height:100px ;
border:1px #000000 solid;
-webkit-border-radius:10px;/*Safari(iPhone含む)*/
-moz-border-radius: 10px;/*FireFox*/
/*この下IE用にborderを削除し、画像で対応*/
*border:none;
*background:url(bg.gif);
}


InternetExplorer8が公式にリリースされましたが、だんだんとIE8でも検証が必要かなと思い、いろいろなハックを試してみました。
結果、下のハックがIE8のみに適応されるのでわかりやすいかなと思ったので、メモしておきます。

color /*\**/:#333333\9;
の部分を普通に
color :#333333;
と記述しないように気をつける必要があります。

<style>
<!--
#ie8{
    background:#ff55ee;
    color:#ffffff;
}
html>/**/body #ie8 {
    background /*\**/: #ff0022\9;
    color /*\**/:#333333\9;
}
-->
</style>

サンプルHTMLはこちら
https://www.bute-studio.com/lab/ie8.html

Internet Explorer7に使うハックはこちらの記事参照
Internet Explorer7のみに適応するCSSハック //CSS

 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;
}

InternetExplorerでは、position: fixedが使えないので、フッターやヘッダーを固定するレイアウトにする場合は、IE6に対策が必要です。
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。

いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html

これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。

最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。


もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/

Web制作の仕事をしていると、必ずぶち当たるIEの壁。
CSSでは違った解釈をいろんなところで引き起こしてくれるし、IE6までは.pngの透明画像もそのままは扱えず、ややこしくしてくれちゃうし。。。

そのくせ今でもIE6のシェアが高かったりして。
この際、IE6に致命的なバグが発見されて、毎日テレビのニュースで「古いIEを使っている人は、すぐにIE7に移行しましょう」ぐらいなことがおこらないかと毎日期待してますが、そんなこともなく。

といつもの壁をまたしても感じている今日、発見してしまいました。
IE6だけ落ちる仕掛けが！
しかも簡単に作れる！

驚くほど簡単です。
こんな1行で落ちてしまうIEってどんだけ弱いのかと哀れになってしまうほどです。

ネタ元はこちら
http://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher

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

<style>*{position:relative}</style><table><input></table>

Flashでは常にStage.widthでウィンドウサイズをとって、コンテンツの配置やサイズ等を可変にすることができますが、CSSはwidthを%換算にすることはできますが、他には無いかと思って考えてみました。

今回はFlashで作ったswfを#flashnaviに読み込むためのエリアですが、規定サイズ(ここでは1000px)以下の場合には1000pxより#flashnaviのwidthが縮まらないようにしました。
ウィンドウの幅は、Javascriptのwindow.innerWidthでとれるはず！と思いましたが、IEなどでは計算方法が異なるため、以下の方法を使いました。
下の例では、ウィンドウサイズが1000px以下の場合のみの記述ですが、elseやelse if等を使って、もっと細かく指定するといろいろと使えそうです。

//CSS//////////////////////////////////////////////////////////////////
#flashnavi{
    width:100%;
}

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

<script language="JavaScript">
<!--
inW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if(inW<1000){document.write("<style>#flashnavi{width:1000px !important;}</style>");}
// -->
</script>

フォームの"input type=file "を入れると、Mac&WindowsのSafariだけ劇的に見た目が違います。

そこで、CSS Hackのよって、この違いを乗り越えようと考えました。

サンプル input type=file
Safariで見ると違いが見えます
Hackあり

Hackなし

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

input {
color: #000000;
}

body:last-child:not(:root:root) input {
color: #ff6600;
}

普段、Mac/Winともに、Firefoxを愛用しています。
それは、いろいろなアドオンを入れて使えるためです。

Mac miniのFirefoxを入れ直すことになったので、ついでに、アドオンの一覧を記録しておきます。

ColorZilla[サイト内の色情報をスポイトで取得できる]

Web Developer 1.1.4[JS,CSSなどのON/OFFや、webに関するいろいろな機能が集約されている]

Measureit[ブラウザ内のものさし]

その他は順次更新予定