XHTML ＆ CSSの最近のブログ記事

ブログなどでソースコードを美しく見せるためのライブラリが多数ありますが、今回から「SyntaxHighlighter」を使用することにしました。
やはりソースコードは色分けされていたほうが見やすいですしね。

いろんなライブラリがあるのですが、その中でも「SyntaxHighlighter」の表示の仕方が一番好みだったのと、一番使われているような気がしましたので採用しました。

導入方法は簡単。

SyntaxHighlighterのダウンロードページからダウンロード。いろんな言語のバージョンがあります。（ここでいう言語とはプログラム言語ではなく、英語や日本語といった自然言語のこと）
私が確認した時点（2010年2月13日）では、日本語バージョンは無かったので「English」をダウンロード。

ダウンロードしたファイルを解凍して、サーバーにアップ。
ブログの記事に記述するソースコードの言語（ここでいう言語とはJavaScriptやPHPといったプログラム言語）によって、読み込む JavaScriptが変わります。

「W3CがXHTML 2の策定打ち切りを決定、HTML 5の標準化に注力へ」

「XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5」

Web業界、Web制作に携わる人にとっては結構大きなニュースですね。
Web技術の標準化団体W3C（World Wide Web Consortium）が、「XHTML 2」の策定を打ち切り、「HTML 5」の標準化に力を注ぐことを決定したわけです。

現在はご存知のとおり。HTML(最新版はHTML 4.01)とXHTML（最新版はXHTML 1.1）の2つの仕様が並存しています。
最初はHTMLだけだったのに、なぜXHTMLなんてものができたのか？
そしてHTMLからXHTMLへの移行という道に進まず、なぜ今になってHTML5というものが出てきたのか？
その辺の推察は下記の記事にわかりやすく書いてあります。

「なぜ今また出てきたのか HTML5が持つ本当の意味」

簡単に言いますと・・・

世間が、Firefox3の正式版リリースに浮かれ騒がれている昨今、一際冷めた目で見ている自分がいます。
当然、自宅および会社のPCにさっさとインストールしたのは間違いありませんが・・・

もちろん、Firefox3はすばらしいと思います。「爆速」と呼ばれるほど改善されたレンダリングエンジン。そして、あれほど食いまくっていたメモリ使用の改善。
以前の記事「Firefox 3 Beta5 をインストール」でも書いたように、Firefox3はβ2から試している身です。当然、正式版リリースが嬉しくないはずはないのです。

・・・が、世間が「ダウンロード数でギネスに挑戦」とか、大騒ぎしていると逆に冷めてくるのが天邪鬼な性格ゆえ。Firefox1.0のとき、社内で一人Firefox普及活動？していたのも今や昔の話。今度はOpera9.5でも使ってやろうかと思ったりするわけです。

それは冗談ですが、PC版の第2次ブラウザ戦争が勃発する中、PC用のブラウザだけに注目していて良いのかな？と甚だ疑問に思います。
次の戦場は明らかにモバイル＆非ＰＣ用のブラウザなのは間違いないのです。

Javascriptを利用できない環境でもGoogle Mapsが利用できるようになりました。

Google Static Maps API

通常のGoogle Maps APIではJavascriptで地図を表示させ、ズーム機能やマウスでドラッグして移動させたり、マウスオンでふきだしを表示させたりなどできました。
ただし、Javascriptを使用できないモバイルサイトでは利用できませんでした。

モバイルでGoogle Mapsを利用したい場合はiアプリ版の「モバイルGoogleマップ」がありましたが、これはドコモの903iシリーズ以降の対応となっており、かなり限定的でした。

これまではモバイル版Yahoo!地図情報にリンクを貼ったりしてモバイルサイトに対応していたのですが、今後はGoogle Static Maps APIにより、Google Mapsも利用できるようになりそうです。

Google Static Mapsは静的なGIF画像を表示させます。
当然、ドラッグして地図を移動させたり、マウスオンでふきだしを表示させたり、ズーム機能は使えません。
しかしながらあらかじめマーカーを表示させたり、通常のマップとモバイル用のマップのいずれかのマップタイプを指定できます。

たとえばリストタグのリストマーカーに背景画像を指定している場合、IEで背景画像が表示されたり消えたりすることがあります。

たとえばページを読み込んだときや、ページをスクロールさせたときに発生する現象ですが、これはIEのバグです。

親要素にfloatプロパティを指定している場合に発生するようで、背景画像を指定している子要素にwidthでサイズ指定してやると解決します。

メールマガジンなどでHTMLメールを配信している企業も多いかと思いますが、CSSを使用するのは下記のサイトを確認してからのほうが良さそうです。

A Guide to CSS Support in Email: 2007 Edition
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

WEBブラウザに関しては、まだまだブラウザ間の対応状況に差があるとは言え、XHTML＋CSSでコーディングするのが主流になってきています。
ただメールクライアントに関しては、ブラウザほどCSS対応が進んでおりません。
特に注意を要するのがHotmailやYahoo!Mail、GmailといったWEBメール。
ほとんどCSSに対応していないと判断してかまわないと思います。

続いて、膨大になったCSSのプロパティを整理＆チェックするのに便利ツールを紹介します。

■Clean CSS
http://www.cleancss.com/

Code Beautifierと同じアプローチのツール。
結果の表示もほぼ同じです。
それもそのはずで、ベースとなっているのは「CSSTidy」というCSS最適化ツールで、使用しているバージョンが違うだけ。

膨大になったCSSのプロパティを整理＆チェックするのに便利ツールを紹介します。

■Code Beautifier
http://www.codebeautifier.com/

CSSのソースをコピペで貼るか、CSSソースのパスを入力すると最適化をかけて、結果を表示してくれます。

オプションの設定が多岐に渡っております。
自分なりにベストなオプション設定を見つけるしかないです。

シンプルでいて利用価値が非常に高いと思われるJavascriptのライブラリが発表されていました。
ブロックレベル要素の高さを揃えることができるという「heightLine.js」

複数のブロックレベル要素の高さを揃えれないというCSS固有の問題を解決できるという点で、かなり有意義なのではないでしょうか？
WEB標準に準拠という考え方に固執すると、ブロックレベル要素の高さを揃える必要性に疑問を感じなくもありませんが、現実問題として、デザイン上そういうニーズはあります。

そこだけテーブルレイアウトにしてしまうと、どこか「敗北感」みたいなものがあり、フルCSSレイアウトではなくなります。
そんな時、便利なheightLine.js。
ぜひ今度使わせていただきたいと思います。