PR
小林 信次
マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後,1年弱のニート生活を経て,販売代理店の営業職を経験後,有限会社アイエイトワンに入社。主に,Webディレクション,マークアップを務めるかたわら,講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則,これだけ。」(共著,MdN発行)がある。

 噂のInternet Explorer(IE)8 Beta,まだほんのちょこっとしか触っていませんが,取り急ぎの雑感としては,Firefox2よりもCSSサポートは高いようですね(※1)。僕の知っている限りでは,CSSサポートと言えば,Operaが最強なのですが,いろいろごちゃごちゃやっても,Operaと遜色ありませんでした。特にfloat周りに力を入れたという印象です。やっとこ「Acid2テスト」にも合格ですしね。

※1 CSS2.1へのサポートとなります。また,最新のFirefox3においては改善されています。

 セレクタの実装なんかも,CSS3の実装という点ではまだまだですが,これまでのバージョンと比較すれば納得できるレベルのものになってきました。また,長らく待ち望んだ「before/after擬似要素」がIEでも使える!ということです。そしてまた,長らく苦しめられてきた「IEのhasLayoutプロパティ」というかなり謎の多かった仕様も消え失せるということで,これはもう感動ものです。

 今までマークアップを生業とする身としては,何かと話題というか問題児なIEでした。IEが駄々っ子なために,泣きながら徹夜をしたという制作者の方もいらっしゃるかと思いますが,IE8のリリースとともに,制作にかかる負担が一気に解消されそうですね。

 JavaScriptやその他のプログラミング系の言語はあまり得意ではありませんので,自分では調べていないのですが,amachangさんのIE8 速攻徹底レビューなんかを見ても,全体的にWeb標準回りの対応が強化されていることが伺え知れます。

 IEといえば,2008年2月13日にIE6からIE7への自動更新がはじまっているのですが,思ったほどにグーンとは移行が進んでないですよね。ちなみに弊社(アイエイトワン)のサイトで見てみると,IEユーザーは約50%と他のサイトより少なめです(まぁ,職種的に同業の方がご覧になる機会が多いですからね)。その中での比率は,表1のようになっています。

表1●アイエイトワンのサイトを訪れたIEユーザーのバージョンごとの割合(Google Analyticsのページ)
ブラウザのバージョンセッションの比率
IE 6.064.20%
IE 7.035.19%
IE 5.50.62%

 このようにIE7への移行は現時点ではちょっと微妙な感じになっております。IE8も2008年中に正式リリースと噂されている訳ですから,IE7はすっ飛ばしてしまって次期スタンダードはIE8になってしまえば良いのにと思います。

 最後にちょっと残念(というかやっぱり)な感じというものです。IE8ではあらたに「WebSlices」という独自の機能を実装しています。これは何かと言うと,セマンティックWebということでは有名な,あの Microformats の代替的な機能となるものです。より詳しい情報は,【詳報】セマンティックWebに向かうIE8の「8つの強化点」,で説明されています。

 まぁ,ついにマイクロソフトもここまで対応するようになったということは間違いなく喜ばしいことなのではあります。が,せっかくセマンティックWeb的なことに対応するのであれば,独自の機能を作り出すのではなくて,世界中の皆でせっせと仕様を策定しているMicroformatsの一部に対応したほうが良いんじゃないの?と思います。

 WebSlices というのは,Microformats のhAtomを拡張したものらしいのですが,記述の仕方がMicroformatsとは微妙~に変わってきます。そんな中,次期バージョンではMicroformatsそのものに対応するらしいFirefoxとかもある訳です。クロスブラウザと言うと今までは(X)HTML+CSSの世界やJavaScript界隈で主として叫ばれていた言葉だったのですが,今後はセマンティックWebにおけるクロスブラウザ問題なんかも出てきてしまいそうな予感です。

 最後にネガティブな内容も書きましたが,全般的にWeb標準周りを強化した新たなIE8のリリースが,待ち遠しいところです。

 ちなみに以下は,検証(という程のものでもない)ソース(リスト1)。時間があれば,いろいろやってみたいです。

リスト1●検証用のHTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>デモ</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding-top: 100px;
}
div.container {
width: 800px;
overflow: hidden;
}
div.content {
width: 3200px;
}
div.section {
float: left;
width: 760px;
padding: 10px;
border: 10px solid #313131;
}
div.section ul li {
list-style: none;
min-height: 200px;
background: url(demo.gif) right bottom no-repeat;
}
div.section ul li h3 {
position: relative;
}
div.section ul li h3:after {
content: "abcdef";
}
div.section ul li h3 img {
float: left;
margin-right: 10px;
border: 5px solid #a2a2a2;
}
div.section ul li p {
/*float: left;*//* 最後に追加してみたら,IE7・FF2でめっちゃ崩れた */
margin-left: 200px;
}
div.section dl {
clear: left;
}
</style>
</head><body>
<div class="container">
<div class="content">
<div class="section">
<ul>
<li>
<h3>hnタイトル<img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" /></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<hr />
<p>ダミーテキスト</p>
<dl>
<dt>dtっす</dt>
<dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
</dl>
<p>dlの後のpっす。ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<!-- /.content --></div>
<!-- /.container --></div>
</body>
</html>