Web標準サイト構築への思い

私は昨年の初めから Web 標準について学び始め、過去 2 年間である程度の経験を積んできました。最近転職して家で暇になったので、皆さんにシェアしたくて書きました。

1. Web標準とW3C XHTML仕様の理解

通常の理解によれば、これら 2 つの概念は同じものを指しているようです (これらの「高度な理論」はこの版で説明します^_^)。しかし、実際のところ、技術的な観点から見ると、これら 2 つはほとんど相関関係がないと思います。つまり、Web 標準とは、ページの構造、パフォーマンス、動作を独自に実装することです。より一般的に言えば、今日の採用で人気の言語「div+css」です。ただし、W3C XHTML のどのバージョンも Web 標準の概念に制限を設けていません。明らかに、xhtml 1.1 を使用してテーブル配置の Web ページを作成できます。この時点で、私がばかげた話をしていると思うかもしれません。しかし、どのようなテクノロジーであっても、基本的な概念を十分に理解していなければ正しく使用できません。現在の Web 標準の適用における 2 つの誤った道について、次の 2 つの側面からお話しします。

最初のケースは単純です。 XHTML+CSSを使っている以上はWebの標準だと思います。このページにはクラスと ID が満載です。詳細ごとに個別のクラスを自由に定義してください。このようなページと従来の HTML の違いは、img タグに余分な「/」があることです。少なくとも、辞書のようにスタイルシートを調べる必要がなく、フォントを簡単に使用できるようにするには、従来の HTML に戻ったほうがよいでしょう。もう 1 つの、より巧妙でカジュアルな CSS の使用方法については、後ほど説明します。

2 番目の状況は、理解するのがさらに難しいと思います。つまり、必要なパフォーマンスを達成するためにさまざまな複雑な div ネストと CSS ステートメントを使用しようとするということです。非常に簡単な例は、先ほど見た投稿にあります「画像を切り取らずにページの角を丸くする」です。まず最初に、CSS 関数を使用して丸い角を「描画」するこのアイデアが本当に良いものであることを確認したいと思います。これを行うには、設計者は次のようなコードの大部分を対応する場所に追加する必要があります。

しかし、これは、構造と表示の分離という Web 標準の基本概念に大きく違反します。それは、Web ページのパフォーマンスを制御するために使用されるコードを構造ドキュメントに配置するためです。おそらく、実際のパフォーマンス コードを CSS に配置していると言えるでしょう。しかし、これは盗まれた概念だと思います。上記の b タグは Web ページの構造とは関係がないため、すべて空のタグです。つまり、文書構造が必要とする場所に何かを置くという機能は存在しません。したがって、それらは文書構造のための単なるジャンクコードです。

別の例は、より微妙なものかもしれません。 Web ページに 3 方向の列を実装する方法に関する記事を、以前 alistapart.com で見たことがあります。その原則は、おそらく 3 つまたは 4 つの div を使用して相互にネストすることです。これもWeb標準に違反していると思います。これらの div タグがコード内に配置される順序は、単に構造上の必要性のためではなく、Web ページのパフォーマンスのためであるためです。

もちろん、上記の考え方がある程度やりすぎであることは認めます（でも、一方で、絵以外の角丸処理を実装しなければならないとなると、それもやりすぎではないでしょうか（笑））。場合によっては、構造とパフォーマンスをそれほど簡単に分離できないことがあります。豊かなパフォーマンスを実現するには、構造を適応させる必要があります (<div style="clear:both" /> の使用を考えてください)。しかし、何が正しくて何が間違っているかを知ることが重要です。たとえ時々何か間違ったことをしなければならないとしても。

最後に、「絵にならない角丸」が無意味だとか間違っていると言っているわけではないことを申し上げたいと思います。著者の知性とインスピレーションにも感心します。このような技術的な研究は、以前CSSを使って国旗を描くのと同じで、CSS技術を習得するのに非常に役立つと思います。ただし、その使用は CSS フラグと同様に限定されるべきであり、実際のアプリケーションでは採用すべきではありません。それは Web 標準の基本原則に違反しているからです。

2. HTMLタグのセマンティクス

今日の Web 標準は、俗に「div+css」または「レイヤー レイアウト」と呼ばれています。私はこの便宜には反対しません。しかし、これは誤解を招きます。構造要素として大量の div タグを使用しているということです。実際、これは div 悪用のより高度な形式です (Jeffrey Zeldman が著書『Website Refactoring』で言及しています)。

HTML には非常に豊富なタグが用意されており、それぞれに独自の意味があります。デザインする際には、HTML 構文に従うだけでなく、各タグの「セマンティクス」を最大限に活用し、遵守する必要があると思います。たとえば、タイトル テキストは h1 ～ h6 に含める必要があり、テキスト コンテンツの大きな段落は <br /> ではなく <p> で分割する必要があり、リスト項目は ul または ol または dl に配置し、データは表形式にする必要があります。テーブルレイアウトのままである必要があります。

なぜこれを行うのでしょうか?非常に説得力のある理由は、ユーザーが CSS 表示を削除したときに、Web ページでコンテンツの構造階層を可能な限り効果的に表示できるようにするためです。すべての div が使用されている場合、CSS が削除されると、Web ページ全体の階層が失われ、乱雑なテキストの断片だけが残ります。これは、低構成の互換性に関する Web 標準の要件を満たしていません。

いくつかのタグのセマンティクスについての私の理解を詳しく列挙してみましょう。

pbr

最初に最も単純なものについて話しましょう。段落には br の代わりに p タグを使用します (2 つ連続する<br /> 場合でも)。これは多くを語るまでもないことのようだ。しかし、時にはこの原則を放棄しなければならないこともあります。一般的な例はフォーラムの投稿です。セグメント化したい場合は、Enter キーを押します。このように背景に送信されて表示されるものは明らかに<br /> を使ってセグメント化されています。

テーブル番号

div+css が盛んに推進されているため、テーブル レイアウトを使用する人は未開の原住民であるかのように思われます。しかし、私はこの見方は間違っていると思います。 table の意味は表であるため、表形式で表示されるデータはすべて表にレイアウトする必要があります。簡単な例としては、名前、学生 ID、性別などを含むクラスメートの名簿があります。これは明らかに表形式のデータであるため、表レイアウトを使用する必要があります。検討する価値のあるもう 1 つの例は、ブログ内のカレンダー ナビゲーションです。以前、あるブログ プログラムを見たことがあります。そのカレンダー ナビゲーションの日付はすべて 1 日から 30 日までの div で囲まれており、float:left スタイルを使用して現在の月のカレンダーが 7 行に配置されています。ブラウザのCSS表示を解除すると、カレンダーの一部が1番から30番まで縦に並びます。これは間違っていると思います。カレンダーは表形式のデータである必要があるため、引き続き表レイアウトを使用する必要があります。 CSS をキャンセルした後も、行が 7 つあるテーブルにグループ化されているはずです。

これも無視されるタグです。 CSS の全能性により、すべてのテーブル セルは td とクラス属性を使用して作成できます。ただし、意味的には、一部のテーブル セルには th というラベルを付ける必要があります。たとえば、上記のカレンダー テーブルでは、週を識別する「MON TUE WED...SUN」の単位に td の代わりに th を使用する必要があります。

h1-h6

h1 ～ h6 タグの場合、意味的にはすべてのタイトル テキストに対して機能する必要があります。そのため、<div class="diary-title>などの記述方法は冗長なので、直接<h1>と記述し、.diary-titleの代わりにh1のCSSを直接​​定義しても同様の効果になるのではないでしょうか？もちろん、このルールは、タイトル部分の構造要素が h1 を使用するだけでは解決できない場合もあるので、あまり厳格にすることはできませんが、せいぜい <h1><span></ のような方法を使用します。タイトルを変更するには、span></h1> を使用します。パフォーマンスのニーズを満たすために、構造はより複雑にネストされています。

しかし、ここで意味上の不一致が生じます。 h1 は、第 1 レベルのタイトルとして理解すべきでしょうか、それともフォント サイズがサイズ 1 のタイトルとして理解すべきでしょうか?通常は第 1 レベルの見出しとして理解しており、第 1 レベルの見出しの下に字幕がある場合は h2 を使用します。しかし実際には、HTML デザインの初期を振り返ると、h1 ～ h6 の後の数字はタイトル テキストのサイズを制御するものとして理解されていました。 h3 は、サイズ 3 のフォントを使用するためだけに使用される場合があり、第 3 レベルの見出しであるという意味ではありません。それ以外の場合、すべての第 1 レベルのタイトルは h1 を使用し、それらはすべて非常に大きなフォントなので、CSS を使用してフォント サイズを制御する必要があり、非常に面倒に感じられます。したがって、これは議論の余地のある質問です。

ああ、ああ

用語をリストする必要がある場合は、p の代わりに ul または ol を使用する必要があります。例えば、求人広告の募集要項や、操作手順などの注意事項などです。さらに、一般的な使用法は、ulli を使用して Web ページのナビゲーション メニューをリストし、CSS を使用してその配置を制御することです。

ul または ol を li で使用して第 2 レベルのリストを形成できることを忘れないでください。

dl dt dd

これはほとんど忘れられているタグのセットですが、Jeffrey Zeldman は「Web サイト リファクタリング」での使用を強く推奨しています。 dl は「定義リスト（または定義リスト？知っている人がいたら教えてください）」の完全な名前にする必要があります。典型的な使用法は辞書のエントリです。 dtには単語の名前が、ddには単語の説明が入ります。 alistapart.com Web サイトはさらに巧妙で、右側の列全体を dl として定義し、各単元のタイトルに dt を使用し、単元の内容に dd を使用します。

画像

img タグ自体には特に言うことはありません。ここで話したいのは、この要素がコンテンツ内で実際に必要な画像である場合にのみ img を使用するという、ありふれたことです。それ以外の場合は、CSS を使用してスタイルとして定義する必要があります。イラスト、アバター、絵文字など、コンテンツ内に必ず表示される画像はimgを使用してください。タイトルの背景画像やリスト項目の前にある小さなアイコンなど、その他のタグでは img タグを使用しないでください。

スパン

スパンは現在では div と同じくらい人気があります。しかし実際には、本来の用途に忠実であるべきだと思います。私の個人的な理解では、span はもともとクラスまたはスタイルの属性を伝えるために使用されていました。それ自体には明確なセマンティクスはありません。したがって、テキスト フローで一部のテキストのスタイルを変更する必要がある場合は、span を使用してテキストを囲みます。たとえば、単語を赤色で追加する必要がある場合は、<span class="red"> を使用します。

ただし、これにより、前述の h1 で説明した問題が発生する可能性があることに注意してください。一部のテキスト スタイルには実際に <strong> 、 <sub> などの既製のタグがあるため、それらに適切な機会を与える必要もあります。

ある

a はハイパーコネクションを制御するラベルです。ただし、これを使用したくない特殊なケースがいくつかあります。たとえば、小さなウィンドウをポップアップ表示する必要があります。私はあまり気にしていませんでしたが、デザイナーによっては「再生」アイコンの <img> タグに直接 onclick を定義する人もいると思います。個人的には、img の外側に a を追加し、a の中に onclick を定義し、js 関数の最後に return false を忘れずに記述する必要があると考えています。可能であれば、JS が無効になっている場合でもユーザーが効果的にページを開くことができるように、a タグの href 属性にもポップアップ ウィンドウの URL を記述する必要があります。

今のところリストするのはこれだけです。

最後に、HTML タグのセマンティクスに従うことの重要性をまとめてみましょう。 Web 標準の要件の 1 つはロープロファイル互換性です。ユーザーが画像を無効にしたり、CSS を無効にしたり、JS を無効にしたりしても、ユーザーが Web コンテンツを効果的に閲覧できるようにすることができます。ご存知のとおり、必須の alt 属性は、画像を無効にするときに互換性を考慮するためのものです。 HTML タグのセマンティクスに正しく従うことで、CSS が無効になっている場合でも互換性が確保されます。 HTML タグが正しく使用され、Web ページが「CSS ストリーキング」になっている場合にのみ、ユーザーはナビゲーション メニューがどこにあるのか、記事のタイトルがどこにあるのかを確認でき、カレンダー テーブルがバラバラになることはありません。