北海道は道北と道東の観光スポットやアウトドア、渓流と滝を紹介

公式サイトのHTML5化

PC専用の公式サイトでHTML5化でリニューアル作業中。
その覚え書きとして残しておく。

基本的にはXHTMLのサイトのタグ書き換えで追加したのはheader、nav、section、article、footerの5種類。HTML5化するメリットを考えると外せないと思われるタグに限定した結果。レイアウトではベンダープレフィクスを付ける必要が有るbox系プロパティは使用せずfloatでレイアウト。


問題は画像表示に使用していたlightbox、jqueryのプラグインとなったv2.5でも「rel=lightbox」という属性のままなのでHTML5ではそのまま使えない。HTML5で利用するため「class=lightbox」なるように書き換えたが、そうするとIE6では動かないというが、その辺は割り切った。ただサイズの大きな壁紙などではlightbox v2.5では使い勝手が悪いのでlightbox_plus改良版を使用した。lightbox_plusはHTML5に対応していないのでやむを得ず壁紙コーナーはXHTMLとしている。


レイアウトはHTML5と同じCSSなのでsectionなどのタグはdivとする事で実際は微妙に異なるのだが基本的には同じレイアウトが可能。1番の問題は各種ブラウザで確認ができる環境がないことかな。そのためhtml5.jsで古いIEでもHTML5を使えるようにした事。IE9.jsでIE9以前のIEを強制的にW3c標準にしたこと、これでCSSが安定して使えるというが、この二つが組み込まれたことでIEの表示速度は確実に遅くなった感じが有る。後数年でその必要もなくなるのかもしれないが・・・


現在XHTMLでサイトを作成している方にはHTML5化は割と容易にできると思うが、周辺の環境はまだ不十分な印象で趣味サイトなどでは良いと思うが、見やすい事、早いことが優先される地自体などの公式サイトなどでは相応の技術力がないと難しいかな。

コメント
コメントする








 
この記事のトラックバックURL
トラックバック

 カレンダー

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< January 2013 >>

 selected entries

 categories

 archives

 recent comment

 links

 profile

 search this site

 others

 powered

無料ブログ作成サービス JUGEM
楽天・フィッシング市場
楽天・アウトドア市場
楽天・季節特選
qrcode