HTML5 と CSS3 の感触

HTML5 と CSS3 を利用した Web ページ・レイアウト作成をちょっとだけ試してみました。

浮動（float）や、折れ曲がり（flex）でちょっとゆるめをイメージしたレイアウトがテーマです。ブラウザの幅を変えると、レイアウトもちょっと変化します。

 

Web で HTML5 と CSS3 の記事などを参照させていただき、最初の試作ページとなったのが http://www.iseeit.jp/5g/。

注意点がありまして、最新のブラウザでも、IE9 と Firefox4 では、失敗作となっています。CSS3 で新しく追加されたボックスレイアウト（Flexible Box Layout Module）を利用したいくつかのところです。

Safari5 と Chrome12、iPod touch の iOS4 と XOOM Wi-Fi の Android3.0 の標準ブラウザでは、とりあえずイメージしたものになりました。

 

IE9 と Firefox4 でうまくいかなかったスタイルシートの個所を、これまでのやりかたで置き換えたページも試作してみました。http://www.iseeit.jp/4g/。

 

それぞれのレイアウトで個人的にお気に入りのところもありますが、さらに手を加えていきたいところもあります。さて、どちらをベースにするか、迷っています。

つまりは、Webkit 系のブラウザに合わせて進めるか、IE に歩調を合わせるか、といったところでしょうか。

iOS や Android の利用が増えていることを考えると・・・。わたし自身、このごろは IE を利用していませんし・・・。PC では、Safari がメインで Chrome がたまに、といった頻度です。

 

CSS3 はもちろん HTML5 もまだドラフトの状態ですので、現時点で決めて取り掛かるのもどうかと思います。とりあえず、のんびり気が向いたやりかたで進めていくのが良いということなのでしょう。