いかなる場合でも、このセクションをスキップしないでください。 この章を読むと、スキルが向上し、Web ページの負担が軽減され、マークアップとデザインの違いがより明確に理解できるようになります。 この章のアイデアは学ぶのが簡単ですが、サイトのパフォーマンスを大幅に向上させるだけでなく、サイトの設計、構築、更新を容易にすることができます。
このセクションでは、帯域幅トラフィックを約 50% 削減して、サーバーの負荷とストレスを軽減しながらサイトの読み込み時間を短縮できる、論理的でコンパクトなマークアップを作成する方法を学びます。 これを実現するには、これらの表現要素を削除し、何の役にも立たない悪い習慣を断ち切る必要があります。
これらの悪い習慣は、Web 上の多くのサイト、特に CSS コードと主にテーブルベースのレイアウトを混在させるサイトに影響を与えています。 このアプローチは、他の分野での経験を持つデザイナーにとっても、不器用で不経済です。 同時に、この問題は、手動でコードが記述されたサイトであっても、Dreamweaver や GoLive などのビジュアル編集ツールを使用して作成されたサイトであっても、同様に発生します。
このセクションでは、これらのよくある間違いを特定して防止し、修正する方法を学習できるように説明します。 一意の識別子属性 (id) について詳しく説明し、ハイブリッド レイアウトまたは純粋な CSS レイアウトのいずれを作成する場合でも、それを使用して非常にコンパクトな XHTML コードを作成できる方法を示します。
前のセクションで述べたように、各要素は構造化でき、CSS を使用すると、順序付きリストまたは順序なしリストを本格的なナビゲーション バーとして表示できます。これには、反転ボタンの効果もあります。 ドキュメントのコンテンツは、特定の構造属性でマークされた共通要素によってマークアップされ、サイトの設計において要素が果たす意味論的な役割を示すことができます。
<div id="header"><h1><a href="/">w3cstudy オンライン チュートリアル</a></h1></div> <div id="navfirst"> <ul id="メニュー"> <li id="h"><a href="/h.asp" title="htmlチュートリアル">htmlチュートリアル</a></li> <li id="x"><a href="/x.asp" title="XML チュートリアル">XML チュートリアル</a></li> <li id="b"><a href="/b.asp" title="ブラウザ スクリプト">ブラウザ スクリプト</a></li> <li id="s"><a href="/s.asp" title="サーバー スクリプト">サーバー スクリプト</a></li> <li id="d"><a href="/d.asp" title="ドット ネット チュートリアル">ドット ネット チュートリアル</a></li> <li id="m"><a href="/m.asp" title="マルチメディア チュートリアル">マルチメディア チュートリアル</a></li> <li id="w"><a href="/w.asp" title="サイト建設マニュアル">ステーション建設マニュアル</a></li> </ul> </div>
正しく使用すると、div は構造化マークアップの強力なヘルパーになります。id は、非常にコンパクトな XHTML を記述したり、CSS を賢く使用したり、洗練された動作をサイトに追加したりできる素晴らしい小さなツールです。標準のドキュメント オブジェクト モデル (DOM)。
W3C は、最新の XHTML2 ドラフトで XHTML 構造モデルの div を定義しています。
div 要素は、id、class、および role 属性と連携して、ドキュメントに追加の構造を追加するための一般的なメカニズムを提供します。 この要素は、コンテンツの表示スタイルを定義しません。 したがって、作成者は、この要素をスタイル シート、xml:lang、属性などとともに使用することで、XHTML を自分のニーズや好みに合わせることができます。
div は除算の略です。 Division は部門、領域、グループを意味します。 たとえば、一連のリンクをグループ化すると、ドキュメントの 1 つの部分が形成されます。
HTML を書く人なら誰でも、段落や見出しなどの一般的な要素についてはよく知っていますが、div についてはあまり詳しくない人もいるかもしれません。 div 要素を理解するための鍵は、W3C の説明「構造を追加するための一般的なメカニズム」にあります。
このサイトのホームページでは、チュートリアル ディレクトリのリストを div でラップしています。これは、チュートリアル ディレクトリが本文の要素の一部ではないためです。 このうち、h2 要素は各チュートリアルのタイトルを示し、ul list 要素は各チュートリアルの詳細なリストを示します。 しかし、より大きく、より具体的な意味では、このチュートリアル ディレクトリは、二次的なナビゲーション コンポーネントとして構造的な役割を果たします。 この役割を強調するために、この div に navsecond という ID の注釈を付けます。
<div id="navsecond"> <h2>HTML教程</h2>
任意の名前を使用できます。 「Gladys」と「orangebox」は両方とも、XHTML 命名規則に完全に準拠しています。 ただし、セマンティック (意味論的) またはメタ構造 (メタ構造) 名 (つまり、その中の要素が何をするかを説明する名前) が最適です。
クライアントが青を使用することに決めた場合、サイトの一部に orangebox (オレンジ ボックス) という名前を付けるのは非常にばかげていると感じるでしょう。 最終納品まであと 6 か月しかなく、「Gladys」が何であるかを思い出せないときにスタイルシートの調整を始めると、さらに愚かに感じるでしょう。 ナビゲーション エリア、サイドバー、または検索ボックスを表します。
そのため、ID を「メニュー」、「コンテンツ」、または「検索フォーム」としてマークすると、思い出すのに役立ちます。 さらに、マークアップはデザインと同じではないため、適切に構造化されたページは任意の方法でフォーマットできます。 この結果、純粋な CSS レイアウトを使用するかハイブリッド レイアウトを使用するかに関係なく、プレゼンテーション マークアップで考えたり作成したりする習慣が完全になくなってしまいます。
id 属性は XHTML にとって新しいものではなく、class 属性や div 要素も同様です。 これらはすべて HTML の時代に遡ります。 id 属性は要素に一意の名前を割り当てます。 各名前は、割り当てられたページで 1 回だけ使用できます。 (たとえば、ページに id コンテンツを持つ div が含まれている場合、他の div や他の要素はその名前を使用できません。代わりに、class 属性をページ内で繰り返し使用できます (たとえば、それぞれの5 つの段落では、「small」または「footnote」というクラス名を使用できます。次のマークアップは、id と class の違いを明確にするのに役立ちます。
<div id="searchform">Search form components go here. This section of the page is unique.</div> <div class="blogentry"> <h2>Today's blog post</h2> <p>Blog content goes here.</p> <p>Here is another paragraph of blog content.</p> <p>Just as there can be many paragraphs on a page, so too there may be many entries in a blog. A blog page could use multiple instances of the class "blogentry" (or any other class).</p> </div> <div class="blogentry"> <h2>Yesterday's blog post</h2> <p>In fact, here we are inside another div of class "blogentry."</p> <p>They reproduce like rabbits.</p> <p>If there are ten blog posts on this page, there might be ten divs of class "blogentry" as well.</p> </div>
この例では、searchform という名前の div を使用して検索フォームを含むページ領域をラップし、div class="blogentry" を使用してブログ内の各記事エントリをラップします。 ページには検索フォームが 1 つだけあるため、この一意のコンポーネントに ID のラベルを付けることにします。 ただし、ブログには多数の (記事) エントリがあるため、この場合は class 属性が使用されます。 同様に、ニュース サイトには通常、クラスに「newsitem」などの名前が付けられる複数の div があります。
ただし、すべてのサイトに div が必要なわけではありません。 ブログ サイトでは、ニュース サイトと同様に、h1、h2、h2 の見出しと <p> 段落のみを使用できます。 ここでは blogentry クラスの div を示していますが、これはサイトに div を詰め込むことを奨励するためではなく、単に原則を示すためです。同じ HTML ドキュメント内でクラスを複数回使用しますが、ID は 1 回だけ使用してください。
id 属性を付箋のようなものと考えるとわかりやすいでしょう。 冷蔵庫に牛乳を買うよう促すステッカーを貼り、期限を過ぎた顧客に電話するよう携帯電話にステッカーを貼ります。 もう 1 つあります。これは、今月 15 日までに支払わなければならない請求書を思い出させるために、帳簿フォルダーに投稿されています。
id はまた、ドキュメント内の特別な領域をマークして、特別な処理が必要な領域を思い出させます。この点で、id 属性は粘着ステッカーに似ています。 いわゆる特別な処理を実現するには、この特別な ID を使用してスタイル シートにいくつかのルールを記述するか、JavaScript ファイルに数行のコードを追加する必要があります。 CSS ファイルに、searchform という名前の ID を持つ div 内の要素にのみ適用する特定のルールがあるとします。
id 属性が特定の CSS ルールのセットの磁気オブジェクト (マグネット) として使用される場合、それは CSS セレクターと呼ばれます。 セレクターを作成する方法はたくさんありますが、id は使いやすく、さまざまな用途に使用できます。
id 属性は非常に強力です。 次の機能があります:
id 値は文字またはアンダースコアで始まる必要があり、数字で始めることはできません。 W3C 検証ではこのエラーは検出されませんが、XML パーサーでは検出されます。 また、フォーム内の JavaScript で id を使用する場合、id の名前と値は有効な JavaScript 変数である必要があります。 スペースとハイフン、特にハイフンは使用できません。 それだけでなく、CSS2.0 (および一部のブラウザー) の制限により、クラス名または ID 名にアンダースコアを使用することはお勧めできません。
広く使用されている XHTML 要素 (特に div と id) について説明したので、このサイトのホームページの例を見てみましょう。 まず、ヘッダーのメニューを確認してみましょう。
<div id="navfirst"> <ul id="メニュー"> <li id="h"><a href="/h.asp" title="htmlチュートリアル">htmlチュートリアル</a></li> <li id="x"><a href="/x.asp" title="XML チュートリアル">XML チュートリアル</a></li> <li id="b"><a href="/b.asp" title="ブラウザ スクリプト">ブラウザ スクリプト</a></li> <li id="s"><a href="/s.asp" title="サーバー スクリプト">サーバー スクリプト</a></li> <li id="d"><a href="/d.asp" title="ドット ネット チュートリアル">ドット ネット チュートリアル</a></li> <li id="m"><a href="/m.asp" title="マルチメディア チュートリアル">マルチメディア チュートリアル</a></li> <li id="w"><a href="/w.asp" title="サイト建設マニュアル">ステーション建設マニュアル</a></li> </ul> </div>
7 つのリンクがあり、各リンクには対応するコンテンツに対応する ID が割り当てられます。たとえば、h という名前の ID は HTML チュートリアルに対応します。 同時に、これらのリンクは、menu という名前のリスト要素にカプセル化されます。menu という名前の ID は、このリストの機能 (メニュー リスト) を示し、navfirst という名前の外側の div は、ページ内のこのセクション (セクション) をマークするために使用されます。メインコンテンツ、サイドバー、フッターなどの要素とは区別します。
div 要素と ul 要素は実際の構造を提供し、コンテンツの内容 (ナビゲーション バー) とドキュメント内のどこに属するか (ページ ヘッダー) を示します。 対照的に、従来の表形式のレイアウトでは、データに関するセマンティック情報がまったく提供されず、簡単に 3 倍の帯域幅を消費します。
これらのタグには img タグが含まれていないため、幅、高さ、背景、境界線などの属性は関係しないことに注意してください。 同時に、テーブルのセルは使用せず、一連の関連プロパティも使用しません。 非常にすっきりしていてコンパクトでありながら、理解するために必要な情報がすべて提供されています。
これらのタグを CSS と組み合わせて使用すると、サイト訪問者に堅牢で高速に読み込まれるレイアウトが提供されます。 また、訪問者に対してより柔軟で多様な外観を作成する可能性も提供します。 CSS のない環境でも、適切に構造化されたマークアップにより、すべてのコンテンツが乱雑にならずに提供されます。
鋭い読者なら、a 要素に含まれるテキストがブラウザーに表示されないことに気づいたかもしれません。これは、構造化マークアップと CSS が完全に連携しているためでもあり、トリガー メカニズムを定義できるためです。ユーザーがグラフィカル ブラウザを使用すると、美しいナビゲーション ボタンが表示されます。また、テキストのみのリーダーを使用すると、全文を取得できるため、すべてのユーザーが同じコンテンツを利用できます。
また、マークアップにはイメージ要素やテーブル要素が含まれていないため、このナビゲーションバー コンポーネントは構造を変更することなくサイト内のどのページからも参照でき、同時に異なる視覚効果を与えることができます。 つまり、コードをモジュール化することで、コードの再利用性が高まります。