マークアップ言語 - フレーズ要素

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。
前:マークアップ言語 - フォーム 原典第6章 、およびその他のフレーズ要素序論と前の章では、セマンティックタグの概念について簡単に触れました。タグは、単にタグで表示効果を設定するのではなく、ファイルの意味を識別するために使用されます。すべてのセマンティックタグを使用するWebページを設計するのは良い考えです。ただし、この目標は理想的すぎると思います。もちろん、目標を完全に達成できないからといって、努力のプロセスが無価値になるわけではありません。少なくとも、この目標に向かって努力することは価値があります。
現実の世界では、特定のデザイン目標を達成するために、非セマンティックタグを追加する必要があることがよくあります。主な理由は、現在、よく知られているブラウザーのいずれも標準を 100% サポートしていないためです。一部の CSS ルールは一部のブラウザーでは正しい効果を表示しないため、残念ながら、特定のデザイン目標を達成するプロセスで追加のタグを使用する必要があります。
覚えておくべき重要な概念は、意味的に構造化されたコンテンツを書くことに真のメリットがあるということです。同時に、標準のサポートは、100% ではありませんが、今日では Web 標準に準拠した方法でページを書くことができる臨界質量を超えています。時には犠牲を払わなければなりませんが、標準に準拠したマークアップを多く書けば書くほど、将来の仕事は楽になります。表示タグと構造タグこの章では、表示タグと構造タグの違い、より具体的には、 の代わりに を使用することと、 の代わりに を使用することの違いについて説明します。この章の後半では、他のいくつかのフレーズ要素と、標準に準拠した構造マークアップの構文におけるそれらの重要性についても説明します。
太字のテキストが必要な場合、 ではなく を使用するべきだというアドバイスを聞いたことがあるかもしれませんが、なぜそうすべきなのかを詳しく説明した人はいません。 「なぜ」を知らなければ、そうすべきだと聞いたからといって、他の Web デザイナーがタグの使用習慣を変えることを期待するのは難しいでしょう。なぜ と は と よりも優れているのでしょうか。
 タグと タグを削除して タグと タグに置き換えることの利点は何でしょうか。実際、これはすべて、表示効果のためだけではなく、意味と構造を表現するためのものです。この本のすべての例も、この概念に従うように努めています。専門家の意見をご覧ください。まず、W3C が HTML4.01 フレーズ要素仕様 (http://www.w3.org/TR/html4/struct/text.html#h-9.2.1) で タグと タグをどのように説明しているかを見てみましょう。
フレーズ要素は、テキストセグメントに構造情報を追加できます。一般的なフレーズ要素には、次の意味があります。
代表者は強調した
はより強い強調を意味します。したがって、ここでは 2 つの異なるレベルの強調について説明しています。たとえば、1 つの単語またはフレーズは、通常のテキストよりも大きな音で、高いピッチで、より速く、または... より強調して読む必要があります。
W3C はさらに次のように述べています。
フレーズ要素の表示効果はブラウザによって異なります。一般的に、ビジュアルブラウザでは、 のテキストコンテンツは斜体で、 のテキストコンテンツは太字で表示されます。音声合成ソフトウェアは、音量、ピッチ、速度などの合成パラメータをコンテンツに応じて変更できます。
なるほど！最後の文は特に興味深いですね。音声合成ソフトウェア（以前はスクリーンリーダーと呼ばれていました）は、強調する必要がある単語を正しく処理します。これは確かに良いことです。
対照的に、 と は単なる表示タグです。構造と表示を分離することが目的であれば、 と を使用するのが正しい選択です。単に太字や斜体のテキストを表示したいだけであれば、CSS を使用できます。この章の後半で、さらに例を挙げて説明します。
違いを理解するために、2つの識別例を見てみましょう。方法A
今後の参照用の注文番号は 6474-82071 です。方法 B
今後の参照用の注文番号は、6474-82071 です。太字で美しいこれは、 が よりも適切な場合の完璧な例です。文中の特定のテキストをより重要なものにしたいとします。注文番号を太字にするだけでなく、スクリーンリーダーでこのテキストの表示方法を変更して、音量を上げたり、ピッチや速度を変更したりすることも必要です。方法 B は、両方の目的を同時に達成します。 はどうでしょうか。
同様に、単にテキストを斜体にするのではなく、 の代わりに を使用すると、重要性を伝えることができます。次の 2 つの例を見てみましょう。方法 A
今朝、私道を雪かきするのに 1 時間どころか、3 時間もかかりました。方法 B
今朝、私道を雪かきするのに 1 時間どころか 3 時間もかかりました。強調前の例では (この本が書かれた当時はそうでした)、私の目標は、あたかも私が声に出して言っているかのように、「three」という単語を強調して見せることでした。視覚的には、方法 B はほとんどのブラウザで斜体で表示され、スクリーンリーダーはトーン、速度、または音量を適切に調整します。太字または斜体のみ多くの場合、視覚的に太字または斜体のテキストを表示する必要があるだけであることに注意することが重要です。つまり、サイドバーにリンクのリストがあり、すべてのリンクを同じように太字で表示したいとします (図 6-1)。

図 6-1. サイドバーの太字リンクの例。リンクの見た目を強調する以外に、リンクの内容を強調するつもりはありません。スクリーンリーダーやその他の非視覚的ブラウザーによってリンクが強調されないように、CSS を使用してリンクの外観を変更するのに適した場所です。
たとえば、太字のリンクをもっと速く、もっと大きな音で、もっと高いピッチで読み上げたいと本当に思いますか? おそらくそうではないでしょう。ここでの太字は、単に表示目的のものです。font-weight は bold と同じです。図 6-1 の表示効果を実現するには、リンクバーが sidebar という id を持つ <div> 内に配置されていると仮定します。このように、CSS を使用して、#sidebar 内のリンクを太字で表示するように指定できます。
#サイドバー a{
フォントの太さ:太字;
}
非常に単純なので、これについて言及することさえ少し馬鹿げているように感じますが、これは構造とプレゼンテーションを切り離すのに役立つ優れた方法です。大胆ですね!
同様に、斜体のテキストを考えるときにも、同様の考え方を適用できます。コンテンツを強調するのではなく、単にテキストを斜体にしたい場合、やはり font-style プロパティを使用して CSS でこれを処理できます。同じ #sidebar を例として使用してみましょう。たとえば、#sidebar 内のすべてのリンクを斜体にしたい場合は、次のように記述できます。
#サイドバー a{
フォントスタイル:斜体;
}
これも非常に単純な概念ですが、構造化マークアップ構文の領域では、表示効果タグの代わりに CSS を使用して CCTV を処理するという状況について議論することが重要だと感じています。最も単純なソリューションは、最も見落とされやすい場合もあります。太字と斜体を同時に使用してテキストコンテンツを表示することを計画している場合、まず、どの程度の強調を伝えようとしているのかという質問について考える必要があると思います。この質問に対する回答に基づいて、適切なタグ (強調) または (より強い強調) を選択し、選択したタグでテキストをマークします。
たとえば、次の例では、当初は「fun」という単語を太字と斜体に同時にするつもりでしたが、最終的には を使用して単語を強調することにしました。
Web 標準を使用してサイトを構築するのは楽しいことです。
ほとんどのブラウザでは、この単語は斜体でのみ表示されます。太字と斜体の両方を使用するには、いくつかのオプションがあります。ああ、上記のステートメントに同意していただければ幸いです。通常の 
1 つの方法は、「fun」を通常の で囲み、CSS ルールを指定して 内のすべての を太字にすることです。マークアップ構文は次のようになります。
Web 標準を使用してサイトを構築するのは楽しいことです。
CSS は次のようになります。
スペース
フォントの太さ:太字;
}
余分なマークアップを追加しているため、明らかな意味的部分はそれほど良くありませんが、この方法は依然として誰にとっても有効です。クラスを使用して強調する別の方法は、 タグにクラスを割り当て、CSS で太字効果を追加することです。マークアップ構文は次のようになります。
Web 標準を使用してサイトを構築するのは楽しいことです。
CSS は次のようになります。
太字{
フォントの太さ:太字;
}
 を使用すると斜体効果が得られ (テキストコンテンツが意味的に強調されます)、それに bold クラスを追加すると 内のテキストが太字で表示されます。
同様の方法を使用して、 を変更することもできます。この場合、特定の段落を強調したいときに、斜体効果を追加する italic クラスを設計し、それを の元の太字効果と一致させることができます。
マークアップは次のようになります。
Web 標準を使用してサイトを構築するのは楽しいことです。
CSS は次のようになります。
強い斜体{
フォントスタイル:斜体;
}

前のページ1 2 3 4 5 次のページ続きを読む

<<: Alibaba Cloud Disk を無制限に有効化するための招待コードを 6 つ共有します。信じられないかもしれませんが、Alibaba Cloud Disk を有効化できます。

>>: Javascript の基礎: 演算子とフロー制御の詳細な説明