ASH | サーバ | セキュリティ | Linux | FreeBSD | DB | Web | CGI | Perl | Java | XML | プログラム | ネットワーク | 標準 | Tips集

IE7.js/IE8.jsを使って、スタイルシートの標準化

　IE8になり、MicrosoftもW3Cの標準規格に準拠するようになりました。 これで、基本的なデザインは、W3CのCSS3.0を使って行うことができるようになりました。 ただ、すべてのブラウザがCSS3.0に対応しているわけではありませんので、IE8, Firefox3, Safari4, Opera10, Sleipnir2で確認できた機能のみを使ってデザインすることになります。
　もし、IE7やIE6がIE8と同じ機能になれば、HTMLデザインも、非常に楽になります。 そのような望みに答えてくれるのが、Google Codeで公開されている、IE7.js/IE8.jsです。

IE7.js/IE8.jsの利用方法

　IE7.js/IE8.jsを使うためには、HTMLのヘッダ部分に、コンディショナルコメントを記述するだけです。 コンディショナルコメントですので、、IE7以前のブラウザ以外ではコメントとして扱われます。
HTMLヘッダの記述 
<!--[if lt IE 8]>
  <script type="text/javascript src="IE8.js""></script>
<![endif]-->
　IE7.js/IE8.jsの、一番のメリットは、特別な記述をしなくても、W3CのCSS3.0に準拠したスタイルシートを記述しておけば、スタイルシートを解析して、処理してくれる点です。 ただ、IE7.js/IE8.jsは、IE7やIE6を、完全にIE8にするわけではありません。 あくまで、一部の機能を補完するだけですので、実装されている機能を理解した上で、利用する必要があります。

IE7.js/IE8.jsで対応できるスタイルシート

　IE7.js/IE8.jsには、いろいろな機能がありますが、ここでは、私が使っている便利な機能のみを紹介します。

直属の子セレクタの指定（selector>selector）

IE8 IE7 IE7+
IE8.js		 IE6 IE6+
IE8.js		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
○ ○ ○ × ○ ○ ○ ○ ○ ○
　セレクタを大なり記号（>）で区切ることにより、selector1の直属の子になるselector2に対して設定することができます。
　直属の子セレクタを利用すると、HTMLでは、親の要素にクラス指定するだけで、子の要素に対してクラス指定をする必要がなくなります。
　子孫セレクタを利用すると、HTMLのタグが2階層以上になった場合に、親のスタイルが、子や孫にまで反映されてしまうため、親と子で別のスタイルを設定することができません。
　直属の子セレクタを利用することで、下記のような表示が、親要素（table）のクラス指定だけで可能となります。
HTMLのサンプル
style1
style2
style3
HTMLの記述 
<table class="tree1"><tr><td>style1
<table class="tree2"><tr><td>style2
<table class="tree3"><tr><td>style3
</td></tr></table>
</td></tr></table>
</td></tr></table>
スタイルシートの記述 
table.tree1, table.tree2, table.tree3 {
  border-collapse: collapse;
  margin: 3px;
}
table.tree1>tbody>tr>td {
  border: #770000 2px solid;
  color: #770000;
  background: #ffeeee;
}
table.tree2>tbody>tr>td {
  border: #007700 2px solid;
  color: #007700;
  background: #eeffee;
}
table.tree3>tbody>tr>td {
  border: #000077 2px solid;
  color: #000077;
  width: 200px;
  background: #eeeeff;
}

最初の子要素のスタイル指定（element:first-child）

IE8 IE7 IE7+
IE8.js		 IE6 IE6+
IE8.js		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
○ ○ ○ × ○ ○ ○ ○ ○ ○
　:first-child 擬似クラスを使うことにより、最初のセレクタだけ別のスタイルを指定することができます。
　表やリストなどで、両端に特別な指定をしたい場合など、各要素には、上、または左に対してのみスタイルの指定をし、:first-childを使って、最初の要素のみ指定を変更することで、実現可能となります。
　:first-child 擬似クラスを使わない場合は、親のスタイル指定だけでは無理なため、子に対して、個別にスタイルを指定する必要があります。
　:first-child 擬似クラスを利用することで、下記のような表示が、親要素（table）のクラス指定だけで可能となります。
HTMLのサンプル
見出し1見出し2見出し3
データ1データ2データ3
データ1データ2データ3
HTMLの記述 
<table class="sep1">
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
</table>
スタイルシートの記述 
table.sep1 {
  border-collapse: collapse;
  width: 250px;
  text-align: center;
  margin: 5px;
  padding: 5px;
}
table.sep1>tbody>tr>th, table.sep1>tbody>tr>td {
  border-left: #000077 2px solid;
}
table.sep1>tbody>tr>th:first-child, table.sep1>tbody>tr>td:first-child {
  border-left: none;
}

要素の前後にデータを追加（element:before, element:after）

IE8 IE7 IE7+
IE8.js		 IE6 IE6+
IE8.js		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
○ × ○ × ○ ○ ○ ○ ○ ○
　:before、:after 擬似クラスを使うことにより、要素の前後にデータを追加することができます。
　見出しを＜＞や【】で囲んだり、見出しの左に●や■を追加したりすることができます。
　:before、:after 擬似クラスを利用することで、HTMLに記述することなく、下記のように記号を追加したりすることができます。
　また、divタグにクラス指定するだけで、可変長の枠画像を表示したりすることもできます。ただ、CSS3.0では、border-imageプロパティで指定した方が良いと思いますので、CSS 3.0 対応状況も参考にしてください。
HTMLのサンプル

大見出し

小見出し
HTMLの記述 
<div class="bdr1">
<h2 class="lbl1">大見出し</h2>
<h3 class="lbl1">小見出し</h3>
</div>
スタイルシートの記述 
@charset "utf-8";
div.bdr1 {
  position: relative;
  background: #ffffff url('img/bdr1_body.jpg');
  width: 550px;
  margin: 5px;
  padding: 25px;
}
div.bdr1:before {
  position: absolute;
  left: 0px;
  top: 0px;
  content: url('img/bdr1_head.jpg');
  width: 600px;
  height: 25px;
}
div.bdr1:after {
  position: absolute;
  left: 0px;
  bottom: 0px;
  content: url('img/bdr1_foot.jpg');
  width: 600px;
  height: 25px;
}
h2.lbl1:before {
  content: '＜';
}
h2.lbl1:after {
  content: '＞';
}
h3.lbl1:before {
  content: '●';
}
　IE6以前のブラウザでは、marginの分にも背景が描画されてしまう問題点が発生してしまいますので、下記のようなスタイルシートハックを追加する必要があります。
IE6用スタイルシートの追加記述 
* html div.bdr1 {
  overflow: hidden;
}

マウスオーバー時のスタイル指定（element:hover）

IE8 IE7 IE7+
IE8.js		 IE6 IE6+
IE8.js		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
○ ○ ○ × ○ ○ ○ ○ ○ ○
　:hover 擬似クラスを使うことにより、マウスオーバー時のスタイルを指定することができます。
　:hover 擬似クラスに対応していない場合、JavaScriptなどで、HTMLに記述しなければなりません。
　:hover 擬似クラスを使うことで、HTMLに記述しなくても、divタグにマウスカーソルを合わせると、背景色が変わるというようなことができます。
HTMLのサンプル
マウスカーソルを合わせると、背景色が変わります。
HTMLの記述 
<div class="over1">
マウスカーソルを合わせると、背景色が変わります。
</div>
スタイルシートの記述 
div.over1:hover {
  color: #007700;
  background: #eeffee;
}

[WebデザインTips] [ASHのホームページ]
Copyright (C) 1995-2009 ASH.
URL:http://ash.jp/ Mail:info@ash.jp