朝日新聞に学ぶHTML

最終更新：2006年8月16日

公開：2003年8月7日

所要時間：約12分

朝日新聞の土曜版「be」に「夏休みホームページ作り」が特集されました。しかし、それはお世辞にも良いとはいえない記事でした。さて、その記事からミスを学びましょう…その間違いを起こさないように。

前書き

さぁ、まずは朝日新聞のページをご覧下さい。案外企業も適当なもので…ソースは酷い…。が、しかし、ココでは記事で教えたこと以外については目をつぶる事にしましょう。他にも「微妙に違っているけど、そう説明しておけば無難だな…」と思うような説明などは黙認しています。よって、ここで 紹介しているもの以外にも間違いはあります 事を念頭に置いてお読み下さい。だって、キリがありませんから。

というわけで、このページでは朝日新聞の 間違いから いろいろと学んでゆこうと思います。

なお、残念な事に asahi.comに掲載の記事・写真の無断転載は禁じられています ので、これを尊重し、本文を引用して紹介する事は致しません。お手数ですが、上のリンクから記事を開いて、参考にしつつお読み下さい。但し画像に関しては読む事が出来ない環境もありますので当サイトでも引用している場合があります。この引用はasahi.comの画像に代替テキストが記述されたことを確認しましたら削除する予定です。

(上)「まずは文字を書き込む」の間違い

ブロック要素とインライン要素

まず、見本のソースが最悪です。ソースの一部を見てみましょう。

例示されているソースの一部

<p><font color="blue">
<H1><center>ホームページ講座３回のスケジュール
</center></H1></font></p>
——夏休みホームページ作り（上）中級★★☆まずは文字を書き込むより引用

このソースは次のように処理される可能性があります。

例示されているソースの処理例

<p><font color="blue">
</font><H1></H1><center>ホームページ講座３回のスケジュール
</center></H1></font></p>

コレは「 font 要素、 H1 要素にはブロック要素である H1 要素、 center 要素は含まれないからその前で要素は終わっているはずである」…という解釈にもと基づいたものです。

次のように訂正することによってとりあえずの問題はなくなります。

例示されているソースの改善例

<p><center>
<H1><font color="blue">ホームページ講座３回のスケジュール
</font></H1></center></p>

たったコレだけでHTML4.01 Transitionalに準拠したソースになるのです。ブロック要素とインライン要素の違いも参照すると便利かもしれません。

嫌がらせ?

夏休みホームページ作り（上）中級★★☆まずは文字を書き込むの後半部をご覧下さい。見出しを表す Hn 要素と font 要素の color 属性の値について 嫌がらせ だ……と説いています。本当に 嘘はやめていただきたい 。

Hn要素は…

Hn 要素は 見出しを表す 要素です。それは紙面でも解説されています。しかし Hn タグは数字が小さいほど文字を大きく強調する物ではありません。あくまでも 見出しのレベルを数字で表している のです。たまたま有名なUAが文字を大きく表示しているだけなのです。

`font` 要素の `size` 属性は……

font 要素の size 属性は 文字の大きさを指定する 為にあるもので間違いありません。だからこそ数字が大きいほど文字が大きくなるのです。

(中)「今週は画像を張ります」の間違い

`title` 要素

この回でやっと title 要素が紹介された。折角だから 必ず title 要素は書きましょう 位言って欲しかったり…。実際問題、必須のものですし。

`alt` 属性

img要素の抜粋

<p><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=ビットイン></p>

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 要素に終了タグはありません 。だから理解できないのです。

basefontの利用価値

もっとも、この要素は利用価値が今ひとつ理解できないものであることは言うまでもありません。だって、スタイルシートを使えばいいだけなのですから。

(下)「さあネットにデビュー」の間違い

きっと真面目に切り抜き保存もしてまで読んで来た人は必死に読み返したことでしょう。何せ今までの事を全て打ち砕く例文だらけですから。ある意味感動的な例文は以下のとおりです。

致命的な例示

<p><title>トップページ</title>
<img src="title_b.gif"WIDTH=200 HEIGHT=180 ALT=ｂｅのロゴ><br><br>
<color=Blue>
<a href="<a href="http://homepage3.nifty.com/*****/moji.html">">http://homepage3.nifty.com/*****/moji.html"></a>
シリーズ３回のスケジュール</a>
<br>
<a href="<a href="http://homepage3.nifty.com/*****/nikki.html">">http://homepage3.nifty.com/*****/nikki.html"></a>
画像張り付け例</a>
<br>
<s>beのホームページは　<a href=“<a href="http://www.be.asahi.com/">">http://www.be.asahi.com/"></a>
こちらです</a></s>
<br>
beへのお便りは　<a href=“mailto:be@asahi.com”>こちらへ</a>
</color></size></p>

`html` タグ消滅

**html タグ消滅。ついでに body タグも消滅。** もうコレだけで大混乱ですよ。きっとこれを読んでいた人は html 文書は <html> で始まり </html> で終わると思っていたでしょうから。

DTD宣言

正確にはhtml文書はDTD宣言で始まります。また、htmlタグ、bodyタグは共に省略可能ですので一応問題は無いことになります。

`<color=Blue>～</color>`

……何が言いたい? 全く持って謎です。この表現は無視しましょう。救いようがありません。勿論 </color> だって存在しえません。

`</size>`

……何コレ? さらに謎です。いきなり終了タグ のようなもの だけが出てきました。 size 要素という新しい要素名だけでなく、そもそもソース中に開始タグが無い。終了だけ? 何コレ?

背景色とか

以下に覚えよう！タグ一覧から背景色等の定義を引用します。マーク付けは私個人のものです。また終了タグの表記において原典を改変しています。

要素説明

<body bgcolor="～"></body> 背景色を指定します。～の部分に色を入れます。

<body text="～"></body> 基本になる文字の色を指定します。指定しないと黒になります。

<body background="～"></body> 壁紙の画像を指定します。～の部分に画像のファイル名を入れます。データサイズが大きいと画面表示に時間がかかるので注意

要素	説明
`<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 属性には 代替テキスト を記述します。ただ記述しておけばいいというものではありません。では、be3を見てみましょう。ソースはこのページ内にも引用されています。「さあネットにデビュー」に掲載された例文”) alt 属性に「ｂｅのロゴ」というのがあります。コレが適切であるか確かめてみましょう。方法は簡単です。 試しに alt 属性で読んでみるだけで代替になるかが確認できるのです 。読んでみると、「ｂｅのロゴ　シリーズ３回のスケジュール…」となり、明らかに可笑しい事がわかります。この場合は画像に書いてある文字である「be on Saturday」を指定するのが適切でしょう。

見出しを明示する

また、この画像は見出しのようですのでh1タグ等で括ってあるとなお良いかと思います。

このように 画像を無視して alt 属性で読んでみる ことは大切です。それによってテキストブラウザでどのようになるのかや、音声ブラウザでの読み上げ等を推測することができます。

文字実体参照の存在

きっと製作者は文字実体参照の存在を知りません。そうでなければ全角で記述してゆく必要はないのですから……。なお、文字実体参照を用いて <html> を表すには、 <html> と記述します。もっと他の文字実体参照も知りたい場合は以下のサイトが詳しいと思います。

HTMLで使える文字実体参照

あっけない結論

お願いですからこの朝日新聞の特集を真に受けないでください。これは 無茶苦茶です 。信じてはいけません。また、保存している方は即刻破棄しましょう。その文書は毒物であって、百害あっても一利はありません。

随所での嘆き

この件に関してはこれ以上私がどうこう言うよりも多くのサイトで厳しく突っ込まれていますので、そのほかのページをご覧ください。一部にリンクしておきました。一見の……いえ、熟読の価値があります、多分。そして、朝日新聞で学んだ人は絶望の底です。