wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。
上：マークアップ言語 - フォーム
元のソース第6章<strong>、<em>、その他のフレーズ要素
紹介と以前の章では、タグを使用してタグで表示効果を設定するのではなく、ファイルの意味を識別するために、セマンティックタグの概念がわずかに言及されています。セマンティックタグを完全に使用するWebページを設計することは良い考えです。しかし、この目標は理想的すぎると思います。もちろん、目標を完全に達成しないことは、努力プロセスが価値がないことを意味しません。少なくとも、この目標に向けて取り組むことは価値があります。
現実には、主に有名なブラウザが今日の標準を100％サポートできないため、特定の設計目標を達成するために非セマンチックなタグを追加する必要があることがよくあります。一部のCSSルールは、一部のブラウザで正しい効果を表示できません。残念ながら、特定の設計目標を達成するプロセスで追加のタグを使用する必要があります。
真剣に考えなければならない重要な概念があります。つまり、セマンティック構造を可能な限り書き込もうとすると、実際的な利点がもたらされます。同時に、標準のサポートは100％に達していませんが、重要なポイントを越えて、ネットワーク標準を満たす方法を使用してWebページを作成できるようになりました。時には犠牲を払わなければならないこともありますが、基準に準拠するラベルが多いほど、将来に向けて容易になります。表示効果と構造ラベル
この章では、ディスプレイ効果と構造ラベルの違い、またはむしろ<strong>の交換<b>を使用して<em>の交換<i>を使用することの違いについて説明します。この章の後半では、他のいくつかのフレーズ要素と、標準に準拠した構造化されたラベル文法内での重要性についても説明します。
大胆なテキストが必要なときに<strong>の交換<b>を使用することを提案する人もいると聞いたことがあるかもしれませんが、なぜそのような交換が必要なのかをさらに教えてくれません。理由を知らずに、他のWebデザイナーがタグを聞いたという理由だけで、タグの使用習慣を変えることを期待するのは本当に難しいです。なぜ<strong> <b> <i>よりも優れているのですか？
<b>および<i>タグを削除して<strong>および<em>に置き換えることの利点は何ですか？実際、これはすべて、効果を示すだけでなく、セマンティクスと構造を表現することです。この本のすべての例は、この概念に従うように努めています。専門家の言うことを見てください
まず、html4.01フレーズ要素の仕様（http://www.w3.org/tr/html4/struct/text.html#h-9.2.1）でw3cが<strong> and <em>をどのように説明するかを見てみましょう。
フレーズ要素は、テキストフラグメントに構造情報を追加できます。一般的なフレーズ要素には、次の意味があります。
<em>代表的なストレス<strong>はより強力な強調を表していますここで、2つの異なる程度の強調について議論しています。たとえば、それは一語またはフレーズです。発音される場合、それはより大きく、より高いトーン、より速い発音、または...まあ、一般的なテキストコンテンツよりも強調されているはずです。
W3Cは次の段落について説明します。
フレーズ要素の表示効果は、ブラウザによって異なります。一般的に言えば、ビジュアルブラウザは、斜体のテキストコンテンツと太字のテキストコンテンツを表示する必要があります。音声合成ソフトウェアは、ボリューム、トーン、速度など、コンテンツで合成パラメーターを変更できます。
ああ！最後の文は特に興味深いです。音声合成ソフトウェア（以前はスクリーンリーダーと呼んでいました）は、強調する必要があるテキストを正しく処理します。これは確かに良いことです。
対照的に、<b>または<i>は単純な表示効果タグです。私たちの目標が構造をディスプレイ効果から分離することである場合、<strong>と<em>を使用することが正しい選択です。 CSSを使用して大胆で斜体のテキストを表示したいだけです。この章の後半では、その他の例について説明します。
次に、2つの識別例を見て、それらの違いを理解するのに役立ちます。方法a
将来の参照の注文番号は次のとおりです。<b> 6474-82071 </b> .method b
将来の参照の注文番号は<strong> 6474-82071 </strong>。
この状況は、<strong>以上<b>を使用する完璧な例です。文の特定のテキストをより重要にするつもりです。太字の注文番号を表示することに加えて、スクリーンリーダーがこのコンテンツを表現する方法を変更することを願っています。ボリューム、変化トーン、または速度を上げます。方法Bは両方の目標を同時に達成できます。だから何？
同様に、<em>を<i>に置き換えることは、単にイタリック体のテキストコンテンツを表示するのではなく、同時に重要性を表現できます。これらの2つの例を見てみましょう：方法A
今朝私の私道をシャベルで絞るのに3時間は<i> <i> 3時間かかりました。MethodB
今朝私の私道をシャベルで絞るのに<em> 3時間は<em> <em> <em>時間がかかりました。
前の例（この本が書かれたときの実際の状況）では、私の目的は、この単語を大声で読むように、視覚的に大声で読んだように、ほとんどのブラウザでイタリックで表示され、スクリーンリーダーがトーン、速度、またはボリュームを適切に調整します。大胆または斜体である限り、それは大丈夫です
多くの場合、視覚的に表示するには太字と斜体のテキスト効果のみが必要であることに注意する必要があります。言い換えれば、サイドバーにリンクのリストがあり、すべてのリンクを同じ効果で表示したいとしているとします。つまり、太字（図6-1）
図6-1。サイドバーに配置された太字のリンクの例
視覚的な機能に加えて、リンクコンテンツを強調するつもりはありません。これは、CSSとのリンクの外観を変更するのに適した場所であるため、スクリーンリーダーやその他の非視覚的なブラウザーによって特に強調されません。
たとえば、大胆なリンクをより速く、より大きなトーンで読み取ることを本当に望んでいますか？おそらくそうではありませんが、ここの太字は単なるディスプレイ効果です。 font-weightは太字に相当します
図6-1のディスプレイ効果を実現するために、リンクバーをサイドバーに設定して<div>に配置されていると仮定します。これにより、CSSを使用して#sidebar内のリンクを太字で表示する必要があることを指定できます。
#sidebar a {
font-weight：bold;
}
非常に簡単ですが、言及すると少しばかげていると思いますが、これは確かに構造を分離して効果を表示するのに役立つ良い方法です。大胆です！
同様に、斜体のテキストについて考えるとき、同様のアイデアを適用できます。コンテンツを強調したくない場合、テキストを斜体で表示したい場合は、フォントスタイルの属性を使用して、CSSを通じてこれらの状況に再び対処できます。
例として同じ#sidebarを使用しましょう。たとえば、#sidebarのすべてのリンクを斜体で表示する場合は、これを書くことができます。
#sidebar a {
フォントスタイル：イタリック;
}
これはもう1つの単純な概念ですが、構造化されたマーキング文法の分野では、これらの状況について議論することが非常に重要だと思います - CSSを使用して効果ラベルを表示する代わりにCCTVを処理します。最も単純なソリューションが最も簡単に無視できる場合もあります。太字と斜体を共有します
テキストコンテンツを大胆なものとイタリックスのテキストコンテンツを同時に表示する予定がある場合、まず質問について考えなければならないと思います。どのような強調を伝える必要がありますか？この質問への回答に基づいて、適切なラベルを選択します：<em>（強調）または<強力な強調）を選択し、選択したラベルでテキストをマークします。
たとえば、次の例に関しては、もともと同時に太字とイタリック体で楽しみを展示することを計画していましたが、最終的には<em>を使用してこの単語を強調することにしました。
Web標準を備えたサイトの構築は、<em> fun </em>になる可能性があります！
ほとんどのブラウザは、この単語のみを斜体に表示します。太字と斜体の両方を使用するには、いくつかのオプションがあります。ああ、私はあなたが上記の文に同意することを本当に願っています。普通の<span>
1つの方法は、楽しみの外で通常の<Span>パッケージを使用し、CSSルールを指定してすべての<Span>を太字で表示することです。タグ構文は次のようになります：
Web標準を備えた建物のサイトは、<em> <span>楽しい</span> </em>です！
そして、CSSは次のように見えます：
em span {
font-weight：bold;
}
余分なタグを追加したため、明らかなセマンティック部分は良くありませんが、この方法は誰にとっても役立ちます。クラスで強調します
別の方法は、<em>タグのクラスを指定し、CSSに大胆な効果を追加することです。タグ構文は次のようになります：
Web標準を備えた建物のサイトは、<em class = bold> fun </em>にすることができます！
そして、CSSは次のように見えます：
em.bold {
font-weight：bold;
}
<em>を使用すると、斜体効果を実現できますが（テキストコンテンツを意味的に強調しますが）、太字のクラスを追加すると、内部のテキストが太字で表示されます。
同様の方法を使用して、<strong>を変更することもできます。この時点で、特定の段落を強調すると、イタリック性のクラスを斜体効果で設計してから、元の大胆な効果を一致させることができます。
マークアップ言語は次のようになります：
Web標準を備えた建物のサイトは、<strong class = italic> fun </strong>になる可能性があります！
CSSは次のようなものです。
strong.italic {
フォントスタイル：イタリック;
}
前のページ1 2 3 4 5次のページ全文を読む