朝日新聞の土曜版「be」に「夏休みホームページ作り」が特集されました。しかし、それはお世辞にも良いとはいえない記事でした。さて、その記事からミスを学びましょう…その間違いを起こさないように。
さぁ、まずは朝日新聞のページをご覧下さい。案外企業も適当なもので…ソースは酷い…。が、しかし、ココでは記事で教えたこと以外については目をつぶる事にしましょう。他にも「微妙に違っているけど、そう説明しておけば無難だな…」と思うような説明などは黙認しています。よって、ここで紹介しているもの以外にも間違いはあります事を念頭に置いてお読み下さい。だって、キリがありませんから。
というわけで、このページでは朝日新聞の間違いからいろいろと学んでゆこうと思います。
なお、残念な事にasahi.comに掲載の記事・写真の無断転載は禁じられていますので、これを尊重し、本文を引用して紹介する事は致しません。お手数ですが、上のリンクから記事を開いて、参考にしつつお読み下さい。但し画像に関しては読む事が出来ない環境もありますので当サイトでも引用している場合があります。この引用はasahi.comの画像に代替テキストが記述されたことを確認しましたら削除する予定です。
まず、見本のソースが最悪です。ソースの一部を見てみましょう。
<font color="blue"> <H1><center>ホームページ講座３回のスケジュール </center></H1></font>
このソースは次のように処理される可能性があります。
<font color="blue">
</font><H1></H1><center>ホームページ講座３回のスケジュール
</center></H1></font>コレは「font要素、H1要素にはブロック要素であるH1要素、center要素は含まれないからその前で要素は終わっているはずである」…という解釈にもと基づいたものです。
次のように訂正することによってとりあえずの問題はなくなります。
<center>
<H1><font color="blue">ホームページ講座３回のスケジュール
</font></H1></center>たったコレだけでHTML4.01 Transitionalに準拠したソースになるのです。ブロック要素とインライン要素の違いも参照すると便利かもしれません。
夏休みホームページ作り（上）中級★★☆まずは文字を書き込むの後半部をご覧下さい。見出しを表すHn要素とfont要素のcolor属性の値について嫌がらせだ……と説いています。本当に嘘はやめていただきたい。
Hn要素は見出しを表す要素です。それは紙面でも解説されています。しかしHnタグは数字が小さいほど文字を大きく強調する
物ではありません。あくまでも見出しのレベルを数字で表しているのです。たまたま有名なUAが文字を大きく表示しているだけなのです。
font要素のsize属性は……font要素のsize属性は文字の大きさを指定する為にあるもので間違いありません。だからこそ数字が大きいほど文字が大きく
なるのです。
title要素この回でやっとtitle要素が紹介された。折角だから必ずtitle要素は書きましょう位言って欲しかったり…。実際問題、必須のものですし。
alt属性<img src="fr.gif" alt=フロントランナー> <img src="repo.gif" alt=リポート> <img src="ichi.gif" alt=一流を育てる> <img src="okane.gif" alt=お金の悩み> <img src="manu.gif" alt=マニュアル不要> <img src="between.gif" alt=ビットイン>
alt属性がクォーテーションで括られていません。ファイル名は括られているのになぁ…。
もしHTML2.0やHTML3.2で記述するのなら、アルファベットと数字、ピリオド(.)、ハイフン(-)で構成されている文字列は括らなくても構いません。また、HTML4の場合はそれに加えてコロン(:)、アンダーバー(_)を含んでいても構いません。
但しW3Cは常に最新の仕様に従う事を推奨しています。既にHTML4が登場して大分経っています。UAもほぼ対応しているものと考えられるのでよほどの理由が無い限りはHTML4(もしくはXHTML)に従いましょう。
それを踏まえてソースを見てみると…寧ろファイル名は括らなくてもよいから、alt属性を括って欲しい…なんて思ったり。
basefont要素覚えよう！タグ一覧
と表していくつかのタグを紹介しています。その中で間違っているのが一つ。それがこのbasefont要素。解説として次のように書かれています。なおマーク付けは私個人によるものです。
<basefont size="n"></basefont>- 文字の基準サイズ設定です。
nには1から7までの数字が入り、数字が大きいほどサイズも大きくなります。指定しないとn=3になります。
僕はこの解説を読んでも意味を理解できません。だって、基準サイズ設定
なのに終了位置を指定するんですよ。謎です。font要素との違いが分かりません。まぁ分からないのも無理ないわけで、この解説には致命的な間違いがあるのです。basefont要素に終了タグはありません。だから理解できないのです。
もっとも、この要素は利用価値が今ひとつ理解できないものであることは言うまでもありません。だって、スタイルシートを使えばいいだけなのですから。
きっと真面目に切り抜き保存もしてまで読んで来た人は必死に読み返したことでしょう。何せ今までの事を全て打ち砕く例文だらけですから。ある意味感動的な例文は以下のとおりです。
<title>トップページ</title> <img src="title_b.gif"WIDTH=200 HEIGHT=180 ALT=ｂｅのロゴ><br><br> <color=Blue> <a href="http://homepage3.nifty.com/*****/moji.html"> シリーズ３回のスケジュール</a> <br> <a href="http://homepage3.nifty.com/*****/nikki.html"> 画像張り付け例</a> <br> <s>beのホームページは <a href="http://www.be.asahi.com/"> こちらです</a></s> <br> beへのお便りは <a href="mailto:be@asahi.com">こちらへ</a> </color></size>
htmlタグ消滅htmlタグ消滅。ついでにbodyタグも消滅。もうコレだけで大混乱ですよ。きっとこれを読んでいた人はhtml文書は<html>で始まり</html>で終わると思っていたでしょうから。
正確にはhtml文書はDTD宣言で始まります。また、htmlタグ、bodyタグは共に省略可能ですので一応問題は無いことになります。
<color=Blue>～</color>……何が言いたい?全く持って謎です。この表現は無視しましょう。救いようがありません。勿論</color>だって存在しえません。
</size>……何コレ?さらに謎です。いきなり終了タグのようなものだけが出てきました。size要素という新しい要素名だけでなく、そもそもソース中に開始タグが無い。終了だけ?何コレ?
以下に背景色等の定義を引用します。マーク付けは私個人のものです。また終了タグの表記において原典を改変しています。
<body bgcolor="～"></body>- 背景色を指定します。～の部分に色を入れます。
<body text="～"></body>- 基本になる文字の色を指定します。指定しないと黒になります。
<body background="～"></body>- 壁紙の画像を指定します。～の部分に画像のファイル名を入れます。データサイズが大きいと画面表示に時間がかかるので注意
……謎が解けました。こんな解説が存在するからひとつの文書に何度も<body>が登場するような文書が存在するのだね!!コレだけ見たら文字色と背景色を指定しようと思ったらbodyタグを2つ書かねばならないし…。
実際のところbodyタグはひとつの文書に1度しか記述できません。気をつけましょう。もし文字色と背景色をbodyタグで指定しようとする場合は<body text="～" bgcolor="～"></body>のように記述するのが正しい方法です。
背景色や文字色、背景画像(壁紙)を指定したい場合にスタイルシートを使うべきであることはいうまでもありません。
今回の例として提示されたソースを実際に表示させてみました。(<size=7>の処理を見ることができるように追記を施しました。)
| ブラウザ名 | <color=Blue>の処理 |
<size=7>の処理 |
|---|---|---|
| Internet Explorer 6 | 無視 | 無視 |
| Mozilla 1.4 | 無視 | 無視 |
| Opera 7.20 | 無視 | 無視 |
| iモードHTMLシュミレーター | 無視 | 無視 |
……結局どのブラウザでも完全無視という結果。コレが正しいのですけれど。でも挿絵では<color=Blue>が有効になってるみたいなんだよな(文字色が青くなるらしい)…。一体どんなブラウザなんだろう?Internet Explorerの旧バージョンとかかなぁ…?
alt属性の値alt属性には代替テキストを記述します。ただ記述しておけばいいというものではありません。では、夏休みホームページ作り（下）中級★★☆さあネットにデビューを見てみましょう。(ソースはこのページ内にも引用されています。)alt属性に「ｂｅのロゴ」というのがあります。コレが適切であるか確かめてみましょう。方法は簡単です。試しにalt属性で読んでみるだけで代替になるかが確認できるのです。読んでみると、「ｂｅのロゴ シリーズ３回のスケジュール…」となり、明らかに可笑しい事がわかります。この場合は画像に書いてある文字である「be on Saturday」を指定するのが適切でしょう。
また、この画像は見出しのようですのでh1タグ等で括ってあるとなお良いかと思います。
このように画像を無視してalt属性で読んでみることは大切です。それによってテキストブラウザでどのようになるのかや、音声ブラウザでの読み上げ等を推測することができます。
きっと製作者は文字実体参照の存在を知りません。そうでなければ全角で記述してゆく必要はないのですから……。なお、文字実体参照を用いて<html>を表すには、<html>と記述します。もっと他の文字実体参照も知りたい場合は以下のサイトが詳しいと思います。
この件に関してはこれ以上私がどうこう言うよりも多くのサイトで厳しく突っ込まれていますので、そのほかのページをご覧ください。一部にリンクしておきました。一見の……いえ、熟読の価値があります、多分。そして、朝日新聞で学んだ人は絶望の底です。
お願いですからこの朝日新聞の特集を真に受けないでください。これは無茶苦茶です。信じてはいけません。また、保存している方は即刻破棄しましょう。その文書は毒物であって、百害あっても一利はありません。