> >

mojoさんが Win IE などでご自分のブログが見えない状態になっていてここ連日苦しんでいらっしゃるようなので、ブログページをダウンロードして様子を見てみました。

このプロセスを私とmojoさんの間だけのものにしておくのももったいないので、何をしたのかをここに公開します。iBlog に限らず Web ページを作成したけれどうまく表示されないときのノウハウになると思うのでホームページのカテゴリにしました。

& < " > が入る JavaScript コードはファイルにして外出し

修正前

<script language="text/javascript" type="text/JavaScript">
function showMore(varA1, varB1){
...
}
</script>

修正後

<script language="text/javascript" type="text/JavaScript" src="{JavaScriptファイル}"></script>

タグの開始や終了と誤解するブラウザがあるそうです。外出しにしなくても書く方法はありますが保守性が悪化するので外出しがおすすめです。

script 要素の中のコメントは本当にコメントになる仕様

修正前

<script language="text/javascript" type="text/JavaScript" ></script>
<!--
...
//-->
</script>

修正後

<script language="text/javascript" type="text/JavaScript" ></script>
...
</script>

前の項目と関連します。HTML では script 要素の中身を HTML の一部と誤解させないためにコメントにする技が一般的でした。HTML としては解釈されませんがブラウザは JavaScript コードとして解釈してくれていたのです。しかし XHTML の仕様ではコメントは本当にコメントです。仕様通りのブラウザではこの部分は存在しないものとして扱われてしまいます。

終了タグがないタグは /> で終える

修正前

<br>

修正後

<br />

img, hr, input などのタグも同じです。HTML の癖でやりがちなので注意しましょう。XHTML ではこれらは単独のタグではなく空の(中身が空っぽの)要素という位置づけです。終了タグと混乱して </ br> と書いてしまう場合もある(実際にありました)ので注意しましょう。

カスタマイズしたらチェッカーにかけよう

修正前

<form action="ListEntry.html" method="get" onsubmit="return ValidateListEntryForm(this);" target="_blank">
...
</cernter></form>

修正後

<form action="ListEntry.html" method="get" onsubmit="return ValidateListEntryForm(this);" target="_blank">
...
</form>

消し忘れかな? 何かカスタマイズする度にチェッカーにかけるとケアレスミスを溜め込まなくて済みます。他にもケアレスミスと思われる場所が何カ所かあります。タグの属性値を " " で囲むところを片方だけ忘れたりするとかなり悲惨になります。もしかするとこれが Win IE で見えない原因かも知れません。

全角スペースに気を付ける

修正前

<a href="http://www.apple.co.jp/"　alt="アップルコンピュータ">

修正後

<a href="http://www.apple.co.jp/" alt="アップルコンピュータ">

alt 属性は a タグに使えない

修正前

<a href="http://www.apple.co.jp/" alt="アップルコンピュータ">

修正後

<a href="http://www.apple.co.jp/" title="アップルコンピュータ">

こんなのいちいち覚えていられないと思いますので、チェッカーを使いましょう。

大文字小文字は区別される

修正前

<SCRIPT language=JavaScript src="/i/chp/TKCounter.js">
</SCRIPT>

修正後

<script language=JavaScript src="/i/chp/TKCounter.js">
</script>

HTML と違い XHTML ではタグの名前や属性の名前の大文字小文字が区別されます。厳格なブラウザでは小文字名のタグと同じタグだと解釈してもらえません。

script タグに type 属性は必須

修正前

<script language=JavaScript src="/i/chp/TKCounter.js">
</script>

修正後

<script type="text/javascript" language=JavaScript src="/i/chp/TKCounter.js">
</script>

属性値は " " で必ず括る

修正前

<script type="text/javascript" language=JavaScript src="/i/chp/TKCounter.js">
</script>

修正後

<script type="text/javascript" language="JavaScript" src="/i/chp/TKCounter.js">
</script>

img タグに alt 属性は必須

修正前

<img src="http://homepage3.nifty.com/mojoworking/image/mojo-plate.gif"></img>

修正後

<img src="http://homepage3.nifty.com/mojoworking/image/mojo-plate.gif" alt="MOJO WORKING" />

読み上げブラウザやテキストブラウザだけでなく、解像度が低いパソコンで見たりセキュリティのために一度画像なしで表示させてから安心して初めて画像を表示させる人のために alt 属性は必須になっているんです。推奨ではなっく必須です。

タグの閉じ忘れに注意

div 要素の終了タグが三、四カ所ありました。これもうまく表示されない原因かと思います。チェッカーを使いましょう。

チェッカーは機械的にチェックするので、そのエラー出力は一つの原因による複数の現象を報告してくることがよくあります。これに惑わされず本当の修正すべき箇所を見つけ出すにはちょっとした経験がいるかと思います。普段からカスタマイズをする度にちょくちょくチェックしておけば、直すところも少なくて分かりやすし経験も積めます。是非習慣づけてください。
# JChecker の宣伝ではありません。(^^;
# 私もあまり人に言えたもんではないのですが...

それからタグの開始と終了に合わせてインデントする習慣を付けましょう。終了タグの書き忘れが格段に減ります。インデントは閲覧者に余分なタブや改行をロードさせるから嫌う人もいますが、ミスって見えないよりはずーっとましです。私もミスらない自信がないのでインデントを付けています。