KUNISAN.JPブログ - 1233 / 1695 ページ

今後、ホームページ制作について、将来的に他の業者などと連携することを考慮して、「Web標準」を学ぶ必要がでてきたことについて書きました。ということで、さっそくWeb標準の本「実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~ 」を購入して勉強を進めています。その他にも、以前購入した「HTMLタグ辞典」「スタイルシート辞典」も本棚から引っ張り出して、ページの端から端まで読むようにしています。

本を読んでいるだけでは実感が沸きづらいので、さっそく「KUNISAN.JP事業案内」のソースをWeb標準化してみることにしました。やはり私のHTMLの知識はかなり古く、たった1ページのソースを修正するのにかなりの時間を要しました。主な変更点は以下の通りです。

1.HTMLのバージョン宣言(HTML 4.01)
2.HEADタグ内の整理(読みやすい順序に)
3.要素、属性等の小文字化(一部大文字のものが残っていました)
4.W3C非推奨の要素、属性をすべてCSS化
5.h1、h2、h3要素を使った見出しの階層化
6.CSSを外部ファイル化して他のページと共有

XHTML 1.0(2nd Edition)という選択肢もありましたが、あえてHTML 4.01の方を選択しました。「XML的視点(?)」から見るとXHTMLの記述の方が理にかなっているのかもしれません。しかし、XHTML自体がHTML 4.01を参考にして作られたものなので、XHTMLに記述を合わせなければいけないとしても、それほど大きな違いはないと認識しています。あと、Apple、Mozilla、OperaなどがXHTMLの方向性に異を唱えるなどして、HTML 5の作成が進められているとこなども、Xの付かないHTMLに留まっている理由でもあります。

今後新たに作成するホームページについては、基本的にWeb標準的な考えに従ってコーディングすることを心がけようと思っています。ただ、既存のページについては、「その都度」やっていくということにします。KUNISAN.JPドメイン傘下にあるファイルはHTML、CGI(Perl)、PHP全て合計すると2万個以上にもなるので、バッチ処理可能なテキスト変換ソフトを使ったとしても、短時間で全て修正＆検証するのは不可能です。特にCGIについては古い形の記述(ダブルクオーテーションで囲った中に、ダブルクオーテーションを用いていないHTMLの属性値の記述があるなど)が残っていて、動作の検証だけでも膨大な時間がかかってしまいます。基本的には「気づいたところ」から少しづつ作業を進めて、IE、Firefox、Safariなどのメジャーなブラウザーで閲覧に問題が生じた場合に、一気に作業を進める形にしたいと思っています。

あと、特にIE6でCSSの互換性に問題があるようなので、今正常に動いているものを急いでCSSを取り込むようにするのはかえって危険な気がします。加えて現在うちのPCのIEは「8」しかなく、IE6の動作をチェックできないということも理由としてあります(以前に作成したページのほとんどはIE6で動作チェック済みです)。今回修正したページでもtable属性を使ったレイアウト調整が含まれていますが、これをそのままにしているのはそのようなことからです。もちろん、将来的にはこのような部分もCSSで記述するつもりでいます。ちなみに日本国内のインターネットユーザーのうち、約1/4が未だにIE6を使っているというデータもあり、とてもIE6を無視できるような状況にはなっていません。

これだけ書きましたが、まだ現時点で「Web標準」の明確な定義はないようです(方向性はよく理解できます)。XHTMLとHTMLが混在していたり、未だにブラウザー間での互換性の問題があったり(特にIE6など)、HTML 5の登場が待たれていたりと、今せっかくルールを覚えたとしても、これから色々と変更になる可能性はあるようです。ただ、現状は現状として理解し、少なくともWeb標準のコンセプトを体験しておくことは無駄ではなさそうです。実際にHTMLソースの修正を行っているうちに、そういう気になってきました。





Web管理関連記事(リンク一覧): SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / ...(記事連続表示)

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~ をAmazon.co.jpでチェック