うろんな日々: HTML5+CSS3 入門

2010年10月5日火曜日

HTML5+CSS3 入門

　HTML5+CSS3 入門というサイトは実にわかりやすいサイトであります。HTML5は少しずつほうぼうのサイトを見ながら勉強を続けてきましたが、このサイトが入門者には一番わかりやすかったです。サンプルコードもついていまして、それをパクリながら自分のサイトを構築しようと思っています。こんごここでの説明を自分でも理解するために書いて行きたいと思っています。HTML5で記述して一番ネックになるのがIEでの振る舞いであります。だからHTML5での記述は時期尚早ということで見送ろうとも思ってましたが、ここのサンプルコードを見て続けてみようと思いました。以下が気になったコードです。

<!DOCTYPE html>
<html lang="ja">
この簡単な記述で済むようですね。

次が肝心なところです。


↑この部分を翻訳機で翻訳させますと、

「スクリプトのメーカーの下に新しいHTML5のタグがあると適用を理解IEの我々のそれにCSS」

となります。うーーんわかるような、さっぱりわからんような。わははは。マイッタ



<link rel="stylesheet" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

ここらあたりの記述は深く追求しないで呪文のごとく覚えておけば済むことなのですが、これまでの浅はかな知識から推し進めますと、HTML5にほとんど対応していないIEのブラウザーだったら、HTML5に対応したJavaScriptを使用しますよということなのでしょう。そのスクリプトの在処はgooglecode.comにありますよという意味だと思います。このあたりもう少し丁寧に調査してみたいと思います。

一番気になるのはこのif文ですね。これ初めてみる文です。JavaScriptなんだろうか？

調査の結果JSなどではなくIEの条件分岐なのですね。以下がhttp://blog.worldending.jp/web/ie-conditional-comment.phpでの説明です。やっぱり調べてみるもんだね。

IEには「条件分岐コメント(Conditional comments)」という（気持ち悪い）独自機能が実装されていて、これをつかうとIEのみに適用可能なHTMLの記述を簡単に行うことが出来ます。
しかしIEだけに適用させる場合ってどんな場合よ？と思うところですが、CSSコーディングを行う際にIEに別のCSSファイルを適用させたいときに使うのが一般的なよう。CSSハックの記述がどうにもこうにも増えすぎてしまって、こりゃ別ファイルに分けなければどうしようもない、というような場合ですね。
自分自身はと言うとプライベートでも仕事でも今までに利用した経験は無く、別ファイルに分けなければならないほど多量のハックを必要とすることがあるか？という疑問もありますが、知っておいて損はないということでメモ。

それから"http://html5shiv.googlecode.com/svn/trunk/html5.js"というサイトにはどんな記述がなされているのかも確認してみました。それが以下の記述ですが、今の私の能力では理解できませんね。これこそ呪文ですね。

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.5.1 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(p,e){var q=e.createElement("div");q.innerHTML="i";q.childNodes.length!==1&&function(){function r(a,b){if(g[a])g[a].styleSheet.cssText+=b;else{var c=s[l],d=e[j]("style");d.media=a;c.insertBefore(d,c[l]);g[a]=d;r(a,b)}}function t(a,b){for(var c=new RegExp("\\b("+m+")\\b(?!.*[;}])","gi"),d=function(k){return".iepp_"+k},h=-1;++h\\s*$","i");i.innerHTML=a.outerHTML.replace(/\r|\n/g," ").replace(c,a.currentStyle.display=="block"?"":"");c=i.childNodes[0];c.className+=" iepp_"+
d;c=f[f.length]=[a,c];a.parentNode.replaceChild(c[1],c[0])}t(e.styleSheets,"all")});p.attachEvent("onafterprint",function(){for(var a=-1,b;++a

　それでこのサイトにあったソースをダウンロードしてきて、実際にIEや他のブラウザーで動作確認をしましたら、確実に動くようです。

0 件のコメント:

コメントを投稿