連載

2008年12月2日

制作現場で役立つCSSハック：いまさら聞けないCSS／スタイルシート入門（最終回）（3/3 ページ）

CSSの継承と詳細度の概念、表示ズレを解消するJavascriptハックなど、現場で役立つ技を実践的に分かりやすく説明（編集部）

[喜安亮介，有限会社タグパンダ] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

JavaScriptハックによる対策

　JavaScriptを使ってクロスブラウザ対策を行うに当たってパフォーマンスが低下することを頭に入れておかないといけません。

　またJavaScriptが実装されていないモバイルデバイスを中心としたブラウザに対しては動作しないケースも考慮しておきましょう。

CSS expression関数を使う

　CSS expression関数というのはIE 5以降（IE 5／IE 6／IE 7）でサポートされているIEの独自拡張による仕様で、CSS構文内にJavaScriptが記述できるというものです。

　min-widthプロパティをサポートしていないIE 5／IE 6の代替のために用いられるケースがありますが、Webサイトのパフォーマンスが落ちたり、XSSの原因にもなったりしますので使用には注意が必要です。参考までに紹介しておきます。

width: expression ( document.body.clientWidth < 700 ? "700px" : "auto");
min-width: 700px;

　ユーザーが利用しているブラウザの画面幅が700px未満の場合には、widthプロパティの値を700pxにセットし、700px以上の場合にはautoという値をセットするexpression関数です。

　DocumentオブジェクトのclientWidthプロパティの値を評価することにより実現しています。

　また、IE以外のユーザーエージェントに対しては下の「min-width: 700px;」というのが読み込まれます。

※IEBlogの2008年10月16日付のエントリ記事で、Expression関数のサポートの終了が正式に発表されました。IE 8に搭載される新しいレンダリングエンジンの標準モードにおいてExpression関数は無視されます。ちなみにIE 7とIE 8の互換モードにおいて、Expression関数は動作するようです。

　詳しくはこちらをご覧ください

▼Ending Expressions＜IEBlog

IE7.js／IE8.jsを使う

　JavaScriptを使って古いWebブラウザで起こる表示ズレを回避する方法があります。

　それは、dean.edwards氏がオープンソース（MIT License）で開発しているIE7.jsというライブラリです。これは「標準に準拠していないIE 5／IE 6といったWebブラウザをJavaScriptの力を使って標準に準拠させてしまおう！」というWebデザイナにとっては知っておいて損のないJavaScriptライブラリです。

　現在も開発が続けられていて記事公開時点（2008年12月2日）ではversion 2.0 (beta3)です（ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser）.。

Web標準に準拠させるJavaScriptライブラリ

IE7.js

　下記コードをhtmlのheadタグ内に記述すれば、IE5／IE6をWeb標準に対応させられます。

<!--[if lt IE 7]>
<script
     src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"     type="text/javascript">
</script>
<![endif]-->

IE8.js

　下記コードをhtmlのheadタグ内に記述すば、IE7をIE8に対応させられます。（IE8.jsを使っている場合は別途IE7.jsを読み込ませる必要はありません）

<!--[if lt IE 8]>
<script
    src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
    type="text/javascript">
</script>
<![endif]-->

透過PNGを表示できる！

　同じように、IE 5／IE 6は透過PNGをサポートしていませんが、IE7.js／IE8.jsを使えば、IE 5／IE 6でも透過PNGが使えるようになります。

　適用させたいPNG画像の名前を「～ *-trans.png」に変更するだけでOKなのです。

　そのほか、IE7.js／IE8.jsを利用して、恩恵を受けられるセレクタやプロパティは下記URLからご確認ください。

▼IE 7/IE 8……The selectors and properties below should all work according to the W3C specifications.

まとめ

　今回はCSSの応用編として、駆け足で解説してきました。なんとなくですが、CSSの概要がつかめたでしょうか？

　頭で理解したらすぐそれを体に覚えさせるためにも、実際にコーディングしてみることをオススメします。

　簡単な半面、CSSは体系的に学んでいかないと身に付きませんので、実際に手を動かしながら覚えていきましょう。

筆者紹介

タグパンダ代表取締役

喜安亮介

1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

「いまさら聞けないCSS／スタイルシート入門」バックナンバー