◆当サイトで外部スタイルシートを導入したのは04年春でした。できることから始めて、06年7月にひとまず完了しました。引き続き、第2段階の対処をおこなっているところです(ほぼ終わりつつあります)。
◆検索エンジンで直接入ってこられた方にお断りします。このページは当サイトにおける対処を述べたものです。100点満点のWebページは限られています。どこまでやるかはその人次第です。
「セットポジション」は00年8月に開設しました。当初、私は「FrontPage Express」を使ってこのサイトを作成していました。その後、「Front Page 2000」を使うようになりました。名前が示すように、両者は「Outlook Express」と「Outlook」のような関係にあります。
04年春、当サイトの「TOP」を上記「ゲートウェイ」の文法チェックにかけてみたところ、マイナス評価でした。ほかのページもせいぜい20点です。もともと入門書を1冊読んだだけで始めたサイトですので、文法的には至らない部分が多くても仕方がありません。
膨大なエラーの数に茫然自失となりましたが、うろたえても仕方がありません。「文法よりも、内容が大事なことは明々白々ですが、文法を正したからといって、内容が損なわれることはありません」(よくある質問と答え)は正論です。少しずつエラーを解消してきました。
マイナス評価といっても、それまでそれなりにやってきたわけです。数字ほど深刻なものではないとも言えるかもしれません。実際のところ、ポータルサイトを上記「文法チェック」にかけると、やはりマイナス評価になってしまいます(06年3月24日現在)。楽天の「10点」は上出来の部類です。
| URL | エラー | 採点結果 |
| http://www.rakuten.co.jp/ | 577個 | 10点 |
| http://www.livedoor.com/ | 308個 | -29点 |
| http://www.goo.ne.jp/ | 632個 | -46点 |
| http://www.msn.co.jp/home.armx | 339個 | -71点 |
| http://yahoo.co.jp/ | 766個 | -334点 |
| http://www.infoseek.co.jp/ | 999超 | -532点 |
文法にのっとって記述する目的は、できるだけ多くのブラウザで崩れずに表示されるようにすることです。これらのボータルサイトは文法を無視しているだけで、ブラウザのバグも踏まえながら見事に対応しています。文法は正しくないかもしれませんが、目的は果たしているわけです。私にはそんなスキルはありませんので、可能な限り文法に忠実にやることにしました。
外部スタイルシート適用前は大半がマイナス評価でした。導入後、おおむね90点台に乗せました。今では、ほとんどのページが100点または90点台後半です。さらに改善を進めるために、これまで着手していなかったものにも対応しているところです。
▼以下、***部分は上記「HTML文法チェック」で示されるエラーの内容です。行頭の数字は解説用のエラー番号、行末カッコ内の数字は重要度です。重要度は9〜0の10段階で示されます。
対処を完了したと思われるエラーです。一部の古いファイルにはあるかもしれませんが、優先順位の高いものとして04年春以降に対処してきたものです。
2. 最初の記述が DOCTYPE宣言ではありません。(8)
DOCTYPE宣言とは、文書がHTMLであり、どの仕様のHTMLで書かれているのかを、冒頭で(つまり<HTML>タグの前で)明示するものだそうです。
作成ソフトはワープロ感覚で操作するだけで勝手にタグをつけてくれます。あとはプレビューで確認してみるだけの話です。作成ソフト任せですから、そんなものがあることすら知りませんでした。
119. <HTML> には LANG 属性を指定するようにしましょう。(2)
これも作成ソフト任せですので、<HTML>タグに属性があることなど知りませんでした。
129. <META> に指定されている文字コードセット `x-sjis` は IANA に登録されていません。`Shift_JIS` または `MS_Kanji` なら登録されています。(0)
「Front Page 2000」は文字コードを「x-sjis」と記述します。それでもあまり問題はないようですが、「shift_jis」に置き換えてきました。
86. <STYLE> には TYPE 属性が必要です。(6)
TYPE属性が指定されてないという警告です。<STYLE>タグは、文字サイズを固定していたWebページのソースを開いて、それらしきものを各ページにコピーしました。パクリです。内容を知らずにパクったのが悪かったわけです。
146. <STYLE> を使うときは <HEAD>〜</HEAD> 内に <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="〜"> を指定するようにしましょう。(1)
スタイルシートを使用する場合、ベースとなるスタイル言語を明示しなければならないそうですが、パクってきたぐらいですから、知るよしもありません。
79. <STYLE> に不明な属性 `FPROLLOVERSTYLE` が指定されています。(6)
153. <STYLE>〜</STYLE> 内の要素はすべてコメントで囲んだ方が安全です。(3)
155. <STYLE>〜</STYLE> 内に `<` を書くときは外部にスタイルシートを用意しましょう。(0)
155. <STYLE>〜</STYLE> 内に `--` を書くときは外部にスタイルシートを用意しましょう。(0)
04年当時、当サイト各ページのヘッダ部分は次のように記述していました。
<style fprolloverstyle>A:hover {color: #FF0000; font-family: MS Pゴシック}
<!--
td {font-size: 10pt}
h1 {font-size: 13pt; text-align: center}
p {margin-left: 10; margin-right: 5; font-size: 11pt}
li {font-size: 11pt}
-->
</style>
「fprolloverstyle」に対して「不明な属性…が指定されて」いるというエラーになりました。チェックをかけてみて一番慌てた項目です。私は<!--と-->挟まれた部分でサイズやマージンを指定すればいいのだろうと漠然と理解していました。
パクった元のサイトが上のように記述していたのかもしれませんし、次のような複数のサイトからパクった結果、私が勝手に合成してしまったのかもしれません。
<style fprolloverstyle>A:hover {color: #FF0000; font-family: MS Pゴシック}</style>
<style>
<!--
td {font-size: 10pt}
h1 {font-size: 13pt; text-align: center}
p {margin-left: 10; margin-right: 5; font-size: 11pt}
li {font-size: 11pt}
-->
</style>
まあ、後者のほうが可能性としては高いような気もします。「スタイルシート」という言葉は聞いたことがありましたし、「Front Page 2000」のヘルプを参照したこともありましたが、どう使うのかわかりませんでした。04年当時もWeb上で検索を重ねて、ようやくぼんやりと理解したという次第です。まあ、それでもやってこられたわけです。
159. <BODY> での色指定が不完全です。LINK、VLINK、ALINK 属性も含めるようにしましょう。(1)
当時、<BODY>タグの色指定は、BGCOLOR(背景)、TEXT(文字)のみを指定して、LINK(未表示リンク)、VLINK(表示済リンク)、ALINK(クリック時)の色は指定していませんでした。これらの色指定は、外部スタイルシートに委ねることにしました。
55. <BLINK> は Mozilla、MSIE、iMode、J-SkyWeb または doti 用のタグです。(7)
59. <BLINK> は使うべきでありません。(1)
<BLINK>や<MARQUEE>タグに警告が発せられます。<BLINK>はネスケで反映される点滅文字、<MARQUEE>はIEで反映されるスクロール文字です。点滅文字はIEでは点滅せず、スクロール文字はネスケではスクロールしません。
読めないわけではありませんので、限定的に使っていました。とくに、点滅文字については、ネスケでの動作確認を終えたというシグナルの意味がありました。スクロール文字を使っていたのは2カ所だけで、しかも低速に設定していましたので、私の感覚では、さほど不快感はありませんでした。
画面をちらつかせないというのは、WAIの「Content Accessibility Guidelines 1.0」では優先度1のmust事項です。使うべきでないのなら、最初からそんな機能をつけないでほしいと思うのですが…。
80. <TABLE> に MSIE 用の属性 `BORDERCOLORDARK` が指定されています。(5)
80. <HR> に MSIE、iMode、J-SkyWeb または doti 用の属性 `COLOR` が指定されています。(5)
<HR>要素のCOLOR属性やHEIGHT属性、<TABLE><TD>要素のBORDERCOLOR属性やHEIGHT属性を指定したときに、この警告が出ます。
罫線の色を指定してもネスケに反映されないことは、04年春の時点では気づいていました。別に反映されなくても構わないので使っていましたが、<HR>要素に関してはスタイルシートで色指定しています。
テーブルの罫線は、もともとあまり使っていませんでした。使っているように見えるところは<TABLE>要素と<TD>のBGCOLORを別の色にして、<TABLE>要素のCELLSPACINGを「1」に指定することで、代替手段としています。
82. <BODY> の属性 `BGCOLOR` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <BODY> の属性 `TEXT` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <H1> の属性 `ALIGN` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
これらのエラーは外部スタイルシート適用時に一括して対処しました。
64. </TD> の前に </P> が省略されているとみなします。(2)
ああだこうだと、いじくっているうちに、結びの</P>タグが消えてしまうことがあります。エラーが出たときには対処してきました。
56. <CENTER> はあまり薦められないタグです。<DIV ALIGN="CENTER"> かスタイルシートを使いましょう。(1)
「Front Page 2000」で表などをセンタリングすると、<DIV align="center">と<CENTER>が<TABLE>の前に入ります。このうち<CENTER>タグに対してこのエラーが出ます。削除しても変化はありませんので、削除してきました。
52. <P> と </P> の間に空白文字しか含まれていません。(0)
レイアウト目的で空白の段落を入れていたケースは、スタイルシート等で対応してきました。
102. <TD> の ALIGN の属性値 `middle` は正しくありません。`LEFT`、`CENTER`、`RIGHT`、`JUSTIFY` または `CHAR` でなければなりません。(6)
ごくまれに、このエラーもありました。普通にALIGNをセンタリング指定すると、CENTERが入ります。私がわざわざいじることはないはずです。なぜCENTERではなくMIDDLEが入るのか定かではありませんが、見つかったときは対応してきました。
102. <META> の NAME の属性値 `Microsoft Border` は正しくありません。英字から始まる名前文字列(NAME)でなければなりません。(6)
「Front Page 2000」では、<META>タグは次のように記述されます。
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage
4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
この辺りを私がいじるはずはなく、そんな記憶もありませんが、(ごく)一部のページでこのエラーが出たことがありました。そのときのHTMLは不明です。
117. メタ文字 `>` は `>` と書かなければなりません。(5)
このページ特有のエラーです。<**>を「Front Page 2000」の標準画面にコピペすると、HTML上では頭のカッコは < に自動変換されますが、お尻のカッコは実体参照にならずそのままです。たしかに、HTML上で「>」だけがあるのは、いかにもまずいことです。
220. <A> のアンカー名 `**` が見つかりませんでした。(6)
リンク先が同一ページ内のデッドリンクに対して、このエラーが出ます。もちろん、見つかったときは即座に対処しています。
134. 半角カタカナが含まれています。 (1)
半角カナに誤変換すれば気づきますし、読点(、)の半角文字も目につきやすいのですが、中点(・)はプロポーショナルフォントでは全角なのか半角なのか判別しづらいものですし、段落末で句点(。)の半角に誤変換したら簡単には気づきません。見つかったときは、すみやかに対処しています。
06年春以降、対応を始めたエラーです。08年3月現在、90%以上対処済みです。
124. <HEAD>〜</HEAD> 内に <LINK REV="MADE" HREF="mailto:〜"> が含まれていません。(0)
125. <HEAD>〜</HEAD> 内に <LINK REL="NEXT" HREF="〜"> などのナヴィゲーション用のリンクが含まれていません。(0)
重要度0であることから、当初は無視してきましたが、前者に対しては「メールのページ」へのリンク、後者に関してはTOP(目次)へのリンクを入れるようにしました。
82. <P> の属性 `ALIGN` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
気づいたときには対処したつもりですが、減点対象でないことから、見逃してしまったケースもあります。
198. <B> は物理的フォントタグです。論理的タグを使うようにしましょう。例えば <STRONG>。(0)
<B>タグに対してこのエラーが出る場合は、<STRONG>タグに置き換えてきました。
57. <FONT> はあまり薦められないタグです。スタイルシートを使いましょう。(0)
この警告自体は減点対象ではありませんが、できるだけファイルを軽くしたいという思惑から、必要性の薄いCOLOR指定は削除してきました。また、赤字等についても、<EM>タグまたは<SPAN>タグによってスタイルシートで定義するようにしてきました。
テーブル内で等幅フォントを指定しているケースは対処が遅れましたが、<FONT>タグの全滅を目指しています。
81. <A> の属性 `TARGET` はあまり薦められない属性です。(1)
197. <A> の TARGET 属性のフレームターゲット名 `_brank` は正しくありません。(5)
当サイトでは外部リンクは別ウインドウを開いていましたが、これは推奨されていないようです。上記文法チェックで「よくできました」評価と「普通です」評価を分けているのが、そのページに含まれる外部リンクの数でした。
05年12月以降に更新したページでは、外部リンクも同一ウインドウ表示としましたので、これら2つのエラーについても対応してきました。いったんは全廃しましたが、08年3月現在では「TOP」ページのdffへの外部リンクにTARGET属性を用いています。
208. <A> のアンカー `***` は **行目で異なるリンク先を指しています。(1)
同一の語句から異なるリンク先を示すことは推奨されないようです。異なるTITLE属性をつければいいということのようですから、そのように対応しています。
211. <A> のアンカー名 `(**)` 中に安全でない文字が含まれています。(1)
<A>タグのNAME属性(ページ内特定箇所のリンク先)を加えるとき、作成ソフトでは日本語も使えます(たとえば「#日本語」)。好ましくないのだろうと思っていましたので、文法チェック以前の時点で、できるだけ年月日や算用数字を指定するようにしていました。
日本語で指定しているものはアスキー文字に置き換えてきました。内部リンクに齟齬が生じることが多く、フォローに手間がかかりましたが、ほぼ対応を終えました。
186. <TABLE> には SUMMARY 属性を指定するようにしましょう。(1)
テーブルには要約をつけなければいけないようです。当初、このエラーは無視してきましたが、今は対応中です。テーブルには原則として<CAPTION>をつけることにしましたので、そのついでに対処するだけのことです。
<CAPTION>のないテーブルは、将来的にテーブルでの記述を改めることになります。
82. <HR> の属性 `SIZE` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <TABLE> の属性 `BGCOLOR` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <TD> の属性 `BGCOLOR` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <TD> の属性 `NOWRAP` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <TD> の属性 `WIDTH` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
82. <UL> の属性 `TYPE` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
57. <STRIKE> はあまり薦められないタグです。スタイルシートを使いましょう。(0)
これらはスタイルシートで対応しています。
52. <TD> と </TD> の間に空白文字しか含まれていません。(0)
空白を入れずに<TD></TD>とすると、エラーにはならないのですが…。
52. <SCRIPT> を使うときは <HEAD>〜</HEAD> 内に <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="〜"> を指定するようにしましょう。 (3)
07/04/07以降に更新したページには、Google AdSense広告を掲載しています。それまでJava Scriptはあまり使っていませんでしたので、ほとんどのページの<HEAD></HEAD>内にはそんなメタタグはありません。うっかりAdSense広告だけ入れると、このエラーになります。
これまでごく一部しか対処しなかったもので、徐々に対応しているものです。
200. <BR> が多数連続しています。(1)
当サイトでは、主に表(テーブル)内で行間を確保するために<BR>タグを連続して使っている箇所があります。Lynxなどの一部のブラウザでは連続する<BR>をひとまとめにして解釈するそうです。
テーブルの<TD>内で<BR>を連続して使っているケースが一番悩ましいのですが、半角ハイフンを入れることで<BR>が連続しないようにしています。結果的にはファイルサイズが大きくなってしまうのですが…。
187. <TH> には ABBR 属性を指定するようにしましょう。(0)
従来、テーブルには見出しセルとしての<TH>要素を使用していませんでした。太字になってしまうのを嫌ったからです。スタイルシートで太字にならないように設定することができるのを“発見”して以降、<TH>要素を使うようにしました。ただ、<TH>要素を用いると、このエラーが出ます。
ABBR属性は、セルの省略情報を記述するためのもののようですが、レイアウトの関係でセル内の文字列のほうを省略形にしていることが多いので、重ねてABBR属性を記載することは、あまり意味がないように思われます。<TH>要素は使わず<TD>タグに戻しているところです。
52. <SPAN> と </SPAN> の間に空白文字しか含まれていません。(0)
主にテーブルの注釈部分で、<SPAN>タグを用いて全角スペースの空白文字に背景色を指定し、その背景色のセル(または文字列)は○○に該当する事例だということを例示しています。
空白文字を半角(一部は全角)のアスタリスクに置き換えることで対処しています。
バリアフリー対応を真剣に考えるなら、これと併用する形での代替措置が必要になるわけですが、そもそもテーブル自体が音声ブラウザ向きではありません。
153. <SCRIPT>〜</SCRIPT> 内の要素はすべてコメントで囲んだ方が安全です。 (3)
07/11/15に「Google Analytics」を導入しました。指定されたとおりのタグを埋め込んだら、このエラーが出ました。要は、<!-- と //--> で囲めということなのですが、試しに囲んでみても正常に作動しているようですので、07/12/27以降に更新したページではそのように対処しています。→「3代目んだ」(Google Analytics)
82. <DIV> の属性 `ALIGN` はあまり薦められない属性です。スタイルシートを使いましょう。(0)
ブロック要素をセンタリングしたいとき、現状では<DIV>タグを入れ子にしなければ、主要3ブラウザに対応できません。ややこしい設定をしても、IEがバグを修正したら、そのときには再び別の対応を迫られるわけですので、従来どおりHTMLで指定します。
114. `***` は不明な実体参照です。 (3)
対応を見合わせるというより、対応のしようがないのですが…。サーチエンジンのキャッシュや掲示板の過去ログにリンクしているページで、リンク先のURLに「&hl」や「&word」が含まれていたために、このエラーが出ました。
161. <FONT> の COLOR 属性の色指定が <BODY BGCOLOR> の色と同じです。(3)
隠し文字を使うと、このエラーが出ます。まあ、スタイルシートに置き換えてしまえば、上記「文法チェック」ではエラー表示されなくなるのですが…。
162. <FONT> の COLOR 属性の色指定と <BODY BGCOLOR> の色は明度差と色差が不十分です。(3)
明度差で125未満、色差が500未満のときにこのエラーが出ます。これもスタイルシートで定義すると、上記「文法チェック」ではエラーになりません。
04年当時、当サイトでは引用部分にはTeal(#008080)を、本文から外れる注釈には緑(#339933/Greenで定義された#008000より薄め)の文字色を使っていました。
カテゴリーごとに背景色を統一していますので、明度差や色差を十分に保てないケースも出てきます。注釈部分については濃い目の#006600に変えることで対処してきました。また、引用部分については、背景色を白にして明度差の確保をはかっています。
基準値を満たしているかどうかのチェックは行き届いていないのが現状です。
◆事実誤認、変換ミス、リンク切れ等にお気づきの際は、お手数ですが「3代目んだ」(スタイルシート)または「メールのページ」からご一報いただけると幸いです。
★07/02/11校正チェック済、ケなし、順OK
★08/03/05HTML文法チェック済(エラーなし)
検索|リンクポリシー|ガイドライン|次へ:ナビゲーションリンクの変更|作成順:04年選手権大会予想