にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:55.

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

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

にししふぁくとりー 新旧トップページ

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

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

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

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

This document was successfully checked as HTML5!

古いブラウザ(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。^^;)

コメント

以前はありがとうございました(^_^)
これからもがんばってください!

投稿者 ちびっこ : 2013年01月09日 20:47

どうもありがとうございます!

投稿者 にしし : 2013年01月09日 23:46

コメント数: 2件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---