サイトの設計が古くなっており、それに伴った問題も色々と発生していたため、リニューアルを行いました。
HTML5、CSS3の導入
当サイトは当初、HTML 4.01のみで構成していました。そこに、2009年4月にCSS（スタイルシート）を導入しましたが、サイトの基本設計は変わらず。
で、この基本設計に問題がありまして、HTMLの使い方が正しくない。その最たるものが<br>タグ（強制的に改行するタグ）の乱用で、本来、<p>タグ（段落を意味するタグ）で段落を構成するべきところを、<br>タグで段落を構成しています。
また、CSSの登場により、文章の意味づけ（「見出し」とか「段落」とか）をHTMLで行い、デザイン（文字色を変えたり、背景色を変えたり）はCSSで管理するという役割分担が明確になりましたが、当サイトは、HTMLとCSSの境界があいまいで、デザインもHTMLで行っている部分が多くあります。
さらに、左右にメニューを表示するために<frameset>などのフレームを構成するタグを使用していますが、この「フレーム」という仕組みは廃止の流れにあります。2014年に勧告されたHTML5では<iframe>と関連タグのみを残し、その他は廃止されています。
そんなわけで、多々生じている問題を修正し、また、新しい規格のHTML5にも対応するため、サイトのリニューアルを決めました。
で、なんでHTML5＋CSS3「移行」ではなく「導入」なのかと言うと、更新作業が追いつかないから。HTMLファイルだけで1,600近くあるので、手作業で全部のページをHTML5に対応させるのは無理です。サイトを長く運営する間にページのフォーマットが微妙に変わってきているので、置換ツールによる一括変換もなかなか難しい。
そのため、HTML5の適用はこれから作っていいく新しいページからにしたいと思います。古いページは、書き換えの必要が生じた場合は書き換えますが、通常はHTML 4.01のまま保留することにします。
サイドメニューの廃止
現在は、必要な情報へのアクセスを容易にするため、フレームにより画面を3分割して、両サイドに表示されているメニューをクリックすれば中央にページが表示される、という仕組みにしています。両サイドのメニューにリンクを詰め込むことで、少ないクリック数で目的のページにたどり着けるようになっています。
しかし、実際にサイドメニューが必要なほど色々なページを行ったり来たりするかというと、そうでもないですね。なので、無駄な機能になってしまっています。
他方で、画面を3分割した結果、各エリアの幅が狭くなっています。そのため、ページに組み込む要素の幅が狭く、窮屈になっています。例えば、「艦これ」のゲーム画面は横に800pxありますが、日記のページの横幅は700pxに満たないため、画像を縮小せざるをえません。また、画像を横に並べることも難しくありました。
そういうわけで「大して活用できていないならなくしてしまえ！」ってことで、サイドメニューの廃止を決めました。結果、ゲーム画面の画像を縮小せずに載せられるようになりましたし、これまで縦に並べるしかなかった家具画像を横に並べられるようになり、見やすくなったと思います。
<table>タグを使ったレイアウトの廃止
これまで、要素を横に並べたり、縦に並べたりと、デザインを整形するために<table>を使ってレイアウトしていました。しかしこの<table>タグは本来、表組みをするためのタグであるので、デザイン目的で使用してはいけません。よって、これをやめることにしました。
代わりに、フレックスボックスなどを用いることにしました。比較的新しい規格であるため、古いブラウザでは正しく表示されない問題がありますが、現在、主流となっているブラウザなら大丈夫‥‥なはず。もし表示が崩れてしまう場合は、ブラウザの更新をしていただけるとうれしいです。
他にも色々と変更した点はあるのですが、文章が長くなってきましたし、見た目には変化が無いような更新であるため、省略します。