最近はものすごい勢いで遊びのサイトを作ってます。ちょっとしたジェネレーター系のページとか、無駄に凝ったネットショップのインターフェースとか。
最近の僕のhtmlコーディングはこれまでのコーディング方法と決定的に変わってきたことがあります。
その前にHtmlコーディングについて。僕はもともとそれほどstrictな記述にこだわらなくていいんじゃね、って思ってるんです。厳密に記述することが正しいような風潮(というか間違いなく正しい)があるので、まぁあまり公言はしていませんが。htmlとcssを分離したり、構造を論理的にしたり、Validatorに準拠したり、そういったガイドラインに沿って作るのって、ある意味正解がハッキリしているから、第三者が評価するクリエイティブな部分よりもよっぽど作るのが楽で、ある意味簡単。
でもね、なんか最近はますますどうでも良くなってきました。何故かというと最近はhtmlコーディングの大半はjQueryを使っているからです。javascriptはhtmlとcssというなんというか不自由で古臭い構造を根底から代えちゃいます。
たとえば、cssハックというのがよく使われます。大抵はブラウザごとのバグだったり仕様の違いだったりを吸収するために、逆にブラウザのバグや仕様を逆手にとって、それぞれのブラウザでしか認識できない形でcssを記述することを言います。サイトを見る人からすると見えればいいんでどうでもいいんですが、文法的に間違っているからお勧めできないとか、Validator通らないからお勧めできないとか、まぁよくブログなんかで書かれています。cssハックしている時点でValidator通るか通らないかなんておかしくないか?と思うんですけど。だったらはっきり言ってブラウザ間の違いはjavascriptで吸収するほうがよっぽどシンプルだと思うんですけどね。
で実際jQueryはcssの記述が簡単でわかりやすいです。cssに限らずエレメントに対してシンプルに記述できるのが僕にとってjQueryの使いやすい部分です。
$("#hoge").css({"color":"#FF0000","background":"#000000"});
文字色と背景色を適用です。たとえばIE6だけにcss適用するなら、
$(document).ready(function(){
var ua=navigator.userAgent.match(/MSIE (¥d)¥./);
switch(parseInt(ua[1])){
case 6:
("#hoge")
.css({
"width":"120px",
"padding-left":"20px"
});
break;
}
});
直接case 6:の中にcssの記述をしたけど、ブラウザごとに関数をまとめておけまばもっと簡単でわかりやすくなりますよね。無論case 7:としてIE7用とか同様にIE5用とか、safari,Firefox用なんかも分岐にすれば、CSSハックは一切必要なくなります。
最近のswfファイルは大抵swfobject.jsを使ってhtmlに貼付けられているので、これも同じようなかんじじゃないでしょうか。