マークアップ言語 - List_HTML/Xhtml_Web ページの制作

標準化された設計ソリューション - マークアップ言語とスタイル マニュアル

Web 標準ソリューション マークアップとスタイルのハンドブック
パート 1: マークアップを理解する マークアップ構文から始めましょう
第 1 章 チェックリスト
チェックリストは、Web 上のほぼすべてのページにあります。 ハイパーリンクのリスト、ショッピング カートのアイテムのリスト、さらには Web サイト全体のナビゲーション リストなど、リストの作成が恣意的であるように思える人もいるかもしれませんが、ここで検討する内容は次のとおりです。リストとコレクションを作成するいくつかの一般的な方法には利点と欠点があります。後で、一般的なリストを装飾する方法の例をいくつか挙げ、その利点と欠点を説明します。
買い物に行きましょう
当初、この章の例として洗濯物リストを使用する予定でしたが、そのようなリストにどのアイテムを含めるべきかまったくわからないことにすぐに気づきました。例として、食べ物を例に挙げてみましょう。
Web サイトに食品リストを掲載する必要があると想像してください。なぜ Web サイトに食品リストを掲載する必要があるのか​​混乱しているかもしれません。これは、単に理由があるだけかもしれません。リストについて考え始めます...
ページ上で、リストを次のようにしたいとします。リストのようなものです。
リンゴ
スパゲッティ
インゲンの各項目をそれぞれの行に配置した長い縦方向のリストです。
ミルク
非常にシンプルに見えますね? ページのデザインと開発の多くの側面と同様に、さまざまな方法で同じ (または同様の) 効果を実現できます。この本の後のすべての例と同様に、 eXtensilbleを使用します ハイパーテキスト マークアップ言語 (XHTML) の観点からすべての例を表示し、選択したメソッドが World Wild に従って正しいマークアップ構文を使用していることを確認します。 Web コンソーシアム (W3C) によって開発されたさまざまな標準。
各項目の後に
タグ付けが完了しました。または、さまざまなリスト項目タグを使用してジョブを完了できます。次に、

---

の 3 つの方法を見てみましょう。

質問タイム
食料品リストを作成するのに最適な方法は次のうちどれですか?
方法 A:
を使用します。 改行
リンゴ

スパゲッティ
/>
Green Beans

Milk
メソッド A は実際に広く使用されており、実際に何百万ものページで使用されていると思います。時々このメソッドを使用することがあるでしょう。リスト内の各項目を独立した行に配置し、改行タグを含める必要があります (この場合は、xhtml 準拠の標準の自己終了タグ
) は各項目の後に改行を生成します。これは非常に便利そうです。
しかし、この食品リストに他のページ要素とは異なるスタイルを追加したい場合はどうすればよいでしょうか。たとえば、リスト内のすべてのリンクの色をデフォルトの青ではなく赤にしたい場合はどうすればよいでしょうか?色を変更したい、またはフォント サイズを変更したいですか? 本当に何もできません。同時に、タグがなければ、HTML ドキュメント全体のフォント スタイル (設定されている場合) によって制限されます。リストを囲むと、リストに固有の CSS ルールを作成できません。

をリストに「Five Foot Loaf of Anthony's Italian」のような行を追加すると、 「パン」。ページ上のこのリストの位置によっては、水平方向のスペースが不十分な場合、または閲覧者のブラウザ ウィンドウが狭い場合、項目が長すぎると次の行に折り畳まれる危険性があります。
同時に、視力の悪いユーザーが読みやすさを高めるためにデフォルトのフォント サイズを変更する可能性があることも考慮する必要があります。図 1-1 に示すように、項目を狭い列に簡単に配置できると考えられます。それは次のようになります 図 1 - 2 このように、読者がフォントサイズを大きくすると、デザインスタイルが完全に変わります。

うーん...さて、パンを買おうかと思うのですが、写真1～2のパンに書かれた2行の文字が非常にわかりにくいです。

携帯電話や PDA などの小さな画面デバイスを使用して長い行を読む場合、同様の行折り返しの問題が発生し、買い物リストを記録するために Palm を持ち歩くことがあります。 パイロット（伝統的な意味での紙とペンではなく）はスーパーマーケットを歩き回っていたとき、棚で「Anthony's Italian」と呼ばれるものを探していました。

ここで本質的に指摘しておきたいのは、メソッド A を使用すると、Web ページを読むときにデザイナーが制御できない変数が考慮されないということです。

---

方法 B: ドットを噛む

リンゴ

スパゲッティ

インゲン

Milk

ほとんどの成熟したブラウザでは、

タグを解析するときに、リスト項目の左側にドット記号が追加されます。この効果を実現するには、ドット記号が必要な場合に

タグを追加します。ただし、

タグが適切な親タグに含まれていない場合、親タグにはドット記号が含まれます。

は強力であり、
• のもう 1 つの親タグは
  (順序付きリスト) です。これについては後で説明します。
  ドット シンボルの表示は、行の折り返しの問題をある程度解決するのに役立ちます。項目が長すぎて折り返せない場合は、小さなドットは表示されません。これが新しいプロジェクトではないことは明らかですが、方法 B には依然として予期せぬ結果の問題があり、基準を満たしていません。
  確認してください
  W3C の XHTML 1.0 仕様に従って、すべてのタグは最後で閉じる必要があります — 上記の例を使用し続けて、すべての
  1. を行末に使用するのは残念です。 /> タグを使用して、ワードラップを使用した順序なしリストの正しい表示効果をシミュレートしますが、実際にはもっと良い方法があります。
     正しいタグ構文を書く習慣を身につけることは常に非常に重要です。タグ構文を正しく記述することで、将来、誰かがこれらを読んだとしても、終了タグがないことや間違ったネストされた要素によって引き起こされる問題を心配する必要がなくなります。ソース コードを使用することで、ソース コードが達成したい効果をより深く理解できるようになります。
     送信した URI やアップロードしたドキュメントをチェックするためにオンライン検出ツールを必ず活用してください。
     
     

     ---

     方法 C: 閉じる
     

  2. リンゴ
  
  
  3. スパゲッティ
  
  
  4. 緑 Beans
  
  
  5. Milk
  方法 C は完璧な解決策に近づいていますが、それでも惨めに失敗します。その理由は依然として非常に明白です。それはまだ標準を満たしていません。マークアップ文法。
  
  6. はブロックレベルの要素であるため、使用から削除できるため、
  7. タグを閉じました。 /> タグを使用して、各項目が独自の行を占めるようにしましたが、その外側の構造が欠落しており、「この項目のグループはリストです!」という要素が欠落していました。意味の観点からも、この問題は非常に重要です。重要 — リストは一緒に属する項目のグループであるため、そのようなタグを追加する必要があります。さらに、正しいリスト タグを使用すると、ブラウザ、ソフトウェア、または表示デバイスに「この項目のグループはリストである」と明確に伝えることができます。意味は、コンテンツが属するカテゴリに従ってコンテンツを構造化することです。
     ブロックレベルとインライン: HTML 要素は、ブロック レベルとインラインの 2 つのタイプに分類できます。ブロック レベルの要素は新しい行で始まり改行で終わりますが、インライン 要素は他のブロック レベルの要素と同じ行に表示されます。要素には他のブロック レベルの要素とインライン要素を含めることができますが、インライン要素にはブロック レベルの要素を含めることはできません。
     ブロックレベル要素には、
     、

     -

     、

     などが含まれます。インライン要素には、、、、 < ;q>待ってください。
     純粋な XML の観点から食料品リストを見ると、次のように注釈を付けることになるでしょう:
     
     Apples
     
     グリーン Beans
     Milk
     
     リスト全体にはコンテナ要素 が含まれており、これにはすべての食品が含まれます。プロジェクトを分類する方法により、XML ベースのアプリケーションがリストからすべてのプロジェクトを簡単に抽出できるようになります。
     たとえば、開発者は XSLT スタイル シートを作成し、リストを xhtml、プレーン テキスト、または PDF ファイルに変換する必要があります。リスト項目の構造は非常に明確であるため、プログラムは情報を簡単に取得できます。そしていくつかの有用な処理を行います。
     この本では XML を直接扱っていませんが、これらの原則は XHTML の世界にも当てはまります。ドキュメントが非常にセマンティックなタグ構造を使用している場合、それが将来のドキュメントの柔軟性を向上させます。明確な構造をドキュメントに CSS スタイルシートを追加するか、それとも理解しやすくするために変更する方がよいでしょうか。 — 正しい構造が提供されていれば、将来のメンテナンスで無駄になる可能性のある時間を大幅に節約できます。
     次に、方法 D を詳しく見て、これらがどのように組み合わされるかを見てみましょう。 ほとんどのブラウザーとスクリーン リーダーで認識および表示できるドキュメントであり、さまざまな方法でドキュメントのスタイルを設定できます。
     
     

     ---

     方法 D: 快適なパッケージ化。 Beans

     Milk

     メソッド D の何がそんなに特別なのでしょうか? まず第一に、その構文は完全に正しく、順序付けされていません。

     コンテナ要素、および各項目は
     • 要素によって閉じられています。この時点で、それが正しいことを示すためだけに多大な労力を費やしたのではないかと疑問に思うかもしれません。これを行うことの利点を見てみましょう。
       食料品リストを正しくマークアップしたため、各商品は個別の行に表示され (ブロックレベルの
     • 要素により)、ほとんどのブラウザーは各商品記号の左側に小さなドットを追加します。正しいインラインインデントと改行を実行します (図を参照)。 1 - 3)
       
       
       
       図 1 - 3
       PDA、携帯電話、またはその他の小さな画面デバイスのユーザーにも、データの種類 (この例ではリスト) がデバイスに通知されるため、明確で明確に関連する組織が表示されます。最適な効果を達成するために、独自の機能に従って表示する方法。
       フォントサイズの拡大やブラウザウィンドウの幅の縮小などの理由で改行が発生した場合、折り返されたテキストはテキストの最初の行に合わせてインデントされ、各行を簡単に識別できるようになります。ブラウザ環境に関係なく、
       

       ---

       概要
       考えられるすべてのアプローチについて説明したので、今説明した内容を簡単に確認してみましょう。 方法 A:
       リストに独自のスタイルを追加できません
       狭い列または小さな画面デバイスでは、行の折り返しにより長いコンテンツが誤解される可能性があります
       セマンティクスの欠如 方法 B:
       各項目を識別しやすいように小さなドット記号を追加します。ただし、一部のブラウザでは、親タグ

       が欠落している場合、小さなドット記号が表示されない場合があります。
       は
       に配置されていません。終了タグ
     がないため、スタイルを追加するのが困難です
     は標準ではありません 方法 C:
     終了タグ を追加すると、
     タグは必要なくなります。
     
     要素が省略されているため、このリストに特定のスタイルを追加することが困難になります。
     非標準の方法 D:
     標準に準拠しています。
     ドキュメントを意味的かつ構造的にします
     ほとんどのブラウザでは、各項目の左側に小さなドット記号が表示されます
     ほとんどのブラウザでは、改行の後に行がインデントされます
     特定の CSS スタイルを定義するのは簡単です
     ご覧のとおり、一見単純な問題から多くの知識を得ることができます。たとえすべてのページで方法 D を使用したとしても、なぜこれを行うのかを尋ねたほうがよいでしょう。引き続き調査していきます。この本では「なぜ」を問いかけ、さまざまな場面で最適な方法を選択できるようにします

     ---

     スキルの拡張
     を使ってみましょう。 CSS スタイルを定義するいくつかの方法を試すために作成されました。デフォルトのスタイルを放棄し、カスタムのドット記号を追加して、それを横向きに変換してナビゲーション バーに変えます。
     水玉模様は捨てましょう
     「買い物リストにある小さな水玉模様は本当に気に入らないので、
     に戻ろうと思います。」
     古い習慣に戻る必要はありません — 構造化された順序なしリストを引き続き使用し、CSS を使用してドット記号とインライン インデントをオフにすることができます。重要なのは、リストの構造を保持し、それを CSS で具体的に表示することです。
     まず、ドット記号を削除する CSS ルールを追加します:
     ul{
     list-style:none;
     }
     表示される結果を図 1 - 4 に示します
     

     図 1 - 4 小さなドット記号を削除する
     次に、インデントを削除しましょう。デフォルト値によれば、すべての順序なしリストの左側にパディングが表示されますが、心配しないでください。
     ul{
     list-style:none;
     padding-left:0;
     }
     表示結果を図 1 に示します。 5
     

     図 1 ～ 5
     図 1 ～ 5 は見た目も使用方法もいくつか異なりますが、
     /> タグの効果はほぼ同じですが、依然として標準に準拠した構造化された順序なしリストです。 ブラウザに関係なく、デバイスは正常に表示できます。必要に応じて、いくつかの CSS ルールを更新するだけで、独自のスタイルに変更できます。

     ---

     想像力
     おそらく、ドット記号をリストに残しておきたいが、ブラウザの退屈なデフォルト設定を使用するのではなく、独自のドット パターンを使用したいと考えます。希望するものを実現するには 2 つの方法があります。 。 欲しい-
     最初の方法は、list-style-image 属性を使用して、デフォルトの小さなドットの名前を置き換える画像を指定することです。
     ul{
     list-style-image:url(i_hot.gif)
     }
     これは最も単純な方法ですが、異なるブラウザ間では画像の垂直方向の配置に違いがあります。違いは次のとおりです。ブラウザによっては画像を項目テキストの中心線に揃えたり、画像を少し上に配置したりすることがあります。
     いくつかの一般的なブラウザで list-style-image によって引き起こされる位置合わせの問題を回避するために、私は別の方法を使用することを好みます。それは、各

     • 要素の背景として画像を使用することです。
       まず、デフォルトのドットを削除して、独自の背景画像を追加する必要があります:
       ul{
       list-style:none;
       }
       li{
       background -image :url(i_hot.gif) no-repeat 0 50%;
       padding-left:25px;
       }
       no-repeat 背景画像をタイル表示しないようにブラウザに指示します (デフォルトでタイル表示されます)。0 50% はブラウザに背景画像を左から 0 ピクセル、上から 50% の位置に配置するように指示します。 i_hot.gif は中心線に合わせて位置を指定することもできます。たとえば、0 6px と指定すると、左から 0 ピクセル、上から 6 ピクセルの位置に画像が配置されます。
       また、邪魔にならない程度の空白を残しながら、幅 20 ピクセル、高さ 11 ピクセルの画像を完全に表示できるように、リスト項目の左側に 17 ピクセルのパディングを追加する必要があります。文字との重複がありますので、ご使用の画像サイズに合わせて調整してください。

       ---

       ナビゲーション リスト
       私の個人的な Web サイトでは、通常の構造化 XHTML を使用して、順序なしリストを水平ナビゲーション バーに変換するいくつかの方法を共有しています。食料品リストの例。
       食品リストをオンラインスーパーのナビゲーションバーに変換しました（このスーパーではいくつかの商品しか販売していません...）。
       このナビゲーション バーを水平方向に表示し、マウスをその上に移動して選択したときに強調表示して、タブのページングの効果をシミュレートできるようにしたいと考えています。
       まず、CSS スタイルを個別に定義できるようにリストに ID を追加し、各食品項目もリンクに変換します。
       
     • リンゴ
     
     
     • スパゲッティ
     
     
     • グリーンビーンズ
     
     
     • Milk
     
     
     
     次に、補助 CSS の追加を開始します:
     #minitabs{
     margin :0 ;
     パディング:0 0 20px 10px;
     border-bottom:1px ソリッド #696;
     }
     #minitabs li{
     margin:0;
     padding:0;
     display:inline;
     list-style:none;
     }
     ここで、デフォルトのドット記号とインラインの削除が完了しました。インデント作業も行います 表示はインラインに設定されます。これは、垂直リストを水平リストに変換するための最初のステップです。同時に、リンク グループ全体を区別するために下枠も追加します。
     リストを水平ナビゲーション バーに変換する 2 番目のステップは、すべてのリンクを左側にフローティングすることです。また、すべてのハイパーリンクに単純なスタイルを追加します。マージンと内部パッチのサイズを定義します。
     #minitabs {
     マージン: 0;
     パディング: 0 0 20px 10px;
     border-bottom: 1px ソリッド #696;
     }
     #minitabs li {
     margin: 0;
     パディング: 0;
     表示: インライン;
     リストスタイルタイプ: none;
     }
     #minitabs a {
     float: left;
     line-height: 14px;
     フォントの太さ: 太字;
     マージン: 0 10px 4px 10px;
     テキスト装飾: none;
     color: #9c9;
     }
     ここでは、リスト内のすべての要素を 1 行で水平に表示できるように float:left を定義し、いくつかの色を追加しました。リンクを太字にし、リンクの下部にある下線を削除しました。
     次に、マウスを置いたリンクまたは選択したリンクのページング ラベルをシミュレートするマージンを作成します。
     #minitabs {
     margin: 0;
     パディング: 0 0 20px 10px;
     border-bottom: 1px ソリッド #696;
     }
     #minitabs li {
     マージン: 0;
     パディング: 0;
     表示: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: 左;
     行の高さ: 14px;
     フォントの太さ: 太字;
     マージン: 0 10px 4px 10px;
     テキスト装飾: なし;
     色: #9c9;
     }
     #minitabs a.active, #minitabs a:hover {
     border-bottom: 4px Solid #696;
     padding-bottom: 2px;
     color: #363;
     }
     #minitabs a:hover {
     color: #696;
     }
     リンクを強調するために、マウスを上に移動しますまたは、それを選択します。高さ 4 ピクセルの下枠を追加し、class="active" を追加することで、選択した タグを強調表示したままにすることもできます。
     
     • spaghetti
     >>
     このアクティブなカテゴリは、 a:hover は同じ CSS スタイルを共有します (図 1 - 7)
     

     図 1 - 7
     私はこの手法を自分の Web サイトと 2003 年 7 月のリファクタリングで使用しました。さらにサンプル コードが必要な場合は、両方の Web サイトにアクセスしてソース コードを参照してください。
     ページング タグと同様のさまざまな効果を実現するには、内側のパッチと境界線を追加するだけで済みます。これまでのところ、画像や JavaScript の文さえ使用していませんが、食料品リストを構成するのは基本的な xhtml 構造だけです。すごいです！
     ミニ ページネーション タグの外観
     通常の正方形の CSS 境界線とは異なる効果が必要な場合は、いくつかの小さな変更を加えるだけで、画像を使用して興味深いナビゲーションを作成できます。 以上です。
     以前とまったく同じ順序なしリストと非常によく似た CSS を使用します:
     #minitabs {
     margin: 0;
     パディング: 0 0 20px 10px;
     border-bottom: 1px ソリッド #9FB1BC;
     }
     #minitabs li {
     マージン: 0;
     パディング: 0;
     表示: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: 左;
     行の高さ: 14px;
     フォントの太さ: 太字;
     パディング: 0 12px 6px 12px;
     テキスト装飾: なし;
     色: #708491;
     }
     #minitabs a.active, #minitabs a:hover {
     color: #000;
     background: url(tab_pyra.gif) no-repeat bottom center;
     }
     この CSS は、おそらく前の例のものとほぼ同じに見えます。主な違いは、使用する CSS です。 背景画像は、マウスが元の高さ 4 ピクセルの下枠の上に移動または選択されたときに、リンクの下中央に表示される画像を定義します (図 1 - 8)
     

     図 1 ～ 8: 背景画像を使用したミニタブ ナビゲーション

     ここでのコツは、最も短いナビゲーション バー項目の下に収まる程度の幅の画像を選択することです。これにより、ナビゲーション リンクを強調するために必要な画像は 1 つだけになり、幅に応じて異なる画像を用意する必要がなくなります。独自のプロジェクトで使用するさまざまな画像を選択できます (写真 1 - 9):
     
     

     図 1 - 9: 他の画像の使用例