先日出版させていただいた「携帯サイト コーディング&デザイン」の中でも
触れている携帯サイトで使えるCSSハックをご紹介。
ドコモ端末だけ内容を表示する
「displayハック」
勝手に名付けてしまってはいますが…
「display:none;」というCSSプロパティと値の組み合わせは、
現在auとソフトバンク端末で対応しています。
CSSで「display:none;」とすると、これが指定された要素は完全に非表示になりますが、
displayセレクタに対応していないドコモ端末は、内容が表示されてしまうという
CSSの対応度を逆手に取ったCSSハックです。
ただし、「3G端末(+XHTMLコーディング)」に限るという条件付き。
したがって、できればドコモユーザだけに表示させたいけど、
まぁ他キャリアにも表示されてもいいや程度に使うと便利かなと思います。
なので、
あんまり多用するとGoogleさんに怒られるかもしれませんが笑
まぁ1ページに1回程度なら使ってもよいかと思われます。
キャリア別のCSS対応状況についてさらに詳しく知りたい方は、
「携帯サイト コーディング&デザイン」を。ぜひぜひ。
また、ハックを見つけたら、こちらで紹介しますね。
触れている携帯サイトで使えるCSSハックをご紹介。
ドコモ端末だけ内容を表示する
「displayハック」
勝手に名付けてしまってはいますが…
「display:none;」というCSSプロパティと値の組み合わせは、
現在auとソフトバンク端末で対応しています。
CSSで「display:none;」とすると、これが指定された要素は完全に非表示になりますが、
displayセレクタに対応していないドコモ端末は、内容が表示されてしまうという
CSSの対応度を逆手に取ったCSSハックです。
ただし、「3G端末(+XHTMLコーディング)」に限るという条件付き。
したがって、できればドコモユーザだけに表示させたいけど、
まぁ他キャリアにも表示されてもいいや程度に使うと便利かなと思います。
なので、
のような使い方がいいのではないでしょうか。<div style="display:none;">
ドコモをご利用の方<br />
…
</div>
あんまり多用するとGoogleさんに怒られるかもしれませんが笑
まぁ1ページに1回程度なら使ってもよいかと思われます。
キャリア別のCSS対応状況についてさらに詳しく知りたい方は、
「携帯サイト コーディング&デザイン」を。ぜひぜひ。
また、ハックを見つけたら、こちらで紹介しますね。
| ホーム |


