2013年1月 7日(月) 18時34分53秒 [Web関連]

トップページをリニューアル！ ようやくHTML5 Validに(^_^;)

数年ぶりに、トップページをリニューアルしました。
新旧の変化は、下図の通りです。

……変わってないように見えるかも知れませんが(笑)、レイアウトに大きな違いはなくても、内部（ソース）は大違いなのです。^^;

これまでは、HTML4.01を使って、しかも文法的には正しくない Invalid の状態で、しかも思いっきりtable要素を活用しまくった「テーブルレイアウト」なページでした。
さすがにその状態で放置するのは、ウェブ作成に関する記事を連載している身としてどうなのか……と数年前から思っていたのですが、なかなかリニューアルのためのまとまった時間を確保できなかったので、忸怩たる思いでありながら放置してきたのですが。
この度、ようやく、HTML5 Valid なソースになりました！(笑)
わーい。(笑)

やっとです……。(^_^;;;

文法的には、ちゃんと正しいHTML5になっております。
レイアウトはCSSで行っており、テーブルレイアウトは使っていません。
ここが今回のリニューアルでの大きな点です。(^_^;;;

古いブラウザ（IE6など）で表示しても崩れないように、HTML5から新設された要素は（使ってはいるものの）あまり影響しないような書き方になっています。そのために、若干冗長なHTMLソースになっているのですが……。まあ、過渡期としてはそんなものじゃないでしょうかね。^^;

で、HTMLはValidですが、IE対策もあって、CSSソースはValidではありません。（特に古い）IEでは使えないCSS3のプロパティは、IE独自のプロパティを併用して対処したりしているので。こればっかりは、現時点では（古いIEも表示対象に入れれば）避けようがないので、仕方がないとしています。

今回のリニューアルでは、主要ページの上部にある共通メニューもリニューアルしました。従来は、自力のJavaScriptでプルダウンメニューを作っていましたが、そこにはjQueryを使うことにしました。そっちの方が便利ですし。^^;;; 独自のソースにこだわる意味もありませんしね。
JavaScriptはそこまで深くは使っていないので、JavaScriptが完全にOFFの状態でも、ページの閲覧自体には問題ないようにはしてあります。

トップページの端に地味に存在していた「アクセス履歴パネル」は、Cookieを使うのをやめて、Web Storageを使うようにしました。
Cookieだと処理が面倒ですし、余計な通信が出ることになりますし。Web Storageは扱いがすごく簡単なので良いですね。過去にAll Aboutで記事にもしましたので、よければ是非ご参照下さい。^^;;;
■Cookieより扱いが簡単な「Web Storage」の使い方（＠All About ホームページ作成）
（※ただし、現時点で履歴が記録できるのは、リニューアル済みのページのみです。旧デザインのページには、記録用スクリプトが読み込まれないので、対象外です。^^;;;）

リニューアルはサイト全体にはまだ及んでいないので、ほとんどのページは古いままです。今後、ちょくちょく時間を取ってリニューアルしていく予定です。
それまでは、新旧入り交じった状態でいきます。^^;;;
全部作り終わってから公開していたら、いつまで経っても公開できなさそうなので。^^;;;

というわけで、トップページをリニューアルしたよ！ という話でした。

（※ちなみに、このブログ自体は、まだHTML5にはなっていません。XHTML1.0です。しかも、いろいろInvalid。^^;）