62

Bootstrap CSS プロジェクト内では、見出しタグ (H1、H2、H3、H4、H5、H6) のスタイルが提供されていますが、見出しに基づく一連のクラス名 (.h1、.h2、.h3) もあります。 、.h4、.h5、.h6)。H1タグを適切に使用せずにH1のクラス名を使用することで得られる利点は何ですか? HTMLが視覚的な重要性を反映していることを常に確認したいと思うでしょう。

h1 タグを使用する代わりに .h1 を使用する正当な理由を説明する考えをいただければ幸いです。

4

7 に答える 7

59

あなたが尋ねる：

.h1実際の代わりにh1使用する理由

簡潔な答え：

目標は、両方を一緒に使用することです。

クラスの有用性は.h*、デザインのタイポグラフィのサイズが意味的に適切な見出しレベルと相関しない場合に発揮されます。問題を 2 つに分割することで、両方をきれいに解決できます。

最初のビットは要素/タグです。' <h*>' は、セマンティクス、アクセシビリティ、および SEO を処理します。

2 番目のビットはクラスです。' .h*' は、視覚的なセマンティクスとタイポグラフィの階層を処理します。

長い答え:

これらのクラスの起源は OOCSS プロジェクトにあると思います。

オブジェクト指向 CSS

OOCSS の最新のイテレーションは、私が最後に見たときから少し変更されていheading.cssますが、古いコミットからの関連ファイルを.h1次に示します。これには.h6、私がよく知っているクラスがあります。

6e481bc18f oocss / コア / 見出し /heading.css

コメントから:

.h1-.h6意味的に適切な見出しレベルを維持するためにクラスを使用する必要があります -見出し以外では使用しないで
ください ...
追加の見出しが必要な場合は、場所に依存するスタイリングではなく、追加のクラスを介して作成する必要があります

上記の強調に注意してください。

これらのクラスを使用する理由についての適切な説明については、以下を参照してください。

  1. stubbornella.org : HTML5 セクションを使用して見出しのスタイルを設定しない(この記事の著者であるニコールは OOCSS の作成者です)
  2. csswizardry.com : CSS での実用的で実用的なフォント サイズ設定
  3. Google グループ › オブジェクト指向 CSS › 見出しの質問: 基本的な概念/使用法? （'12年9月に私が尋ねた質問）

上記のリンクからの関連する引用:

1.stubbornella.org _

... [HTML5] セクション要素は、ブラウザが見出しが実際にどのレベルであるかを判断するのに役立つことを意図していますが、必ずしもスタイルを決定する方法を決定するわけではありません。

では、HTML5 の世界で見出しのスタイルを設定するにはどうすればよいでしょうか?

... スタイリングにセクショニング要素を使用するべきではありません。ドキュメント ツリーを分類するという設計された仕事を彼らに任せ、​​スタイリングの問題を別の方法で解決する必要があります。それらはセクショニングコンテンツに含まれている場合があります。

サイト全体の見出しをクラスに抽象化することをお勧めします。そうすれば、それらは移植可能で、予測可能で、乾燥しています。好きなように呼び出すことができます。

2.csswizardry.com _

[Nicole Sullivan が] 私たちに与えてくれたもう 1 つの非常に優れた知恵の塊は、私が二本鎖見出し階層と呼んでいるものです。これは、CSS で見出しを定義するたびにクラスを定義する慣例です。

... 各見出しスタイルと一緒にクラスを割り当てることで、これらのスタイルを、非常に具体的で移動できないものではなく、どこにでも移動できる非常に柔軟なセレクターに関連付けることができます。

3. groups.google.com

疑似 html5 の使用例を次に示します (h/t Jamund Ferguson ):

<body>
    <div class="main">
        <h1>Main Heading</h1>
        <section>
            <h1 class="h2">Section Header</h1>
        </section>
    </div>
    <aside class="side">
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
    </aside>
</body>

この質問/トピックに関連する詳細については、上記のリンクから記事全体 (およびスレッド) をお読みください。

于 2013-10-03T18:50:19.500 に答える
32

ほとんどのスタイルシートには、見出しスタイル 1 から 6 に対応するフォント サイズのセットがあります。Web デザイナーは、ページの他の場所で、実際の見出し要素の一部であってはならないテキストに同じフォント サイズを使用したい場合があります。理由。.size-12、.size-14、などのサイズごとに名前を付けるよりも.size-16、見出しに似たクラス名ですべての名前を付ける方が簡単です。そうすれば、実際には H1 要素でなくても、テキストが H1 要素と同じサイズになることがわかります。私はこれを自分で数回行いました。

于 2013-09-30T16:51:48.400 に答える
8

私が考えることができるいくつかの理由：

  • 適切なタグの代わりに div を使用して、SEO に影響を与えずにヘッダーのビジュアルを取得する
  • ブラウザの不一致による複雑さを回避するには
  • 理由 1 および 2 で同じことを選択する他のライブラリおよびフレームワークとの互換性
  • 設計の柔軟性 (コメントで @scrappedcola が指摘したように)
于 2013-09-30T16:48:52.153 に答える
5

これにより、視覚的階層から意味的階層への分離が可能になります。たとえば、視聴者には 1 つのことを伝え、コンピュータ (検索エンジン) には別のことを伝えたいとします。

<article>
    <h1 class="h1">Page Title</h1>
    <p>Some content</p>
    <section>
        <h1 class="h2">Section Heading</h1>
        <div class="h6">Sub Heading</div>
        <p>Some content</p>
    </section>
    <section>
        <h1 class="h2">Section Heading 2</h1>
        <div class="h6">Sub Heading 2</div>
        <p>Some content 2</p>
    </section>
</article>

見る：

于 2013-09-30T17:06:26.873 に答える
1

私がすぐに思いつくのは、検索エンジンのことだけです。多くの人は、実際の h1 タグをページのタイトルまたは件名として見て、それを検索などに使用します。複数の h1 タグを使用すると、検索エンジンのスパイダーが混乱し、サイトの結果を返す検索が台無しになる可能性があります (私はまた、Google などの一部のスパイダーで「悪いサイト」リストに登録される可能性があるとも聞きました）。

スタイルを使用すると、検索エンジンを台無しにすることなく、要素に同じ視覚的外観を持たせることができます。

于 2013-09-30T16:50:19.223 に答える
0

これは、SEO と Google クローラーの観点から、ページをよりよく理解するのに間違いなく役立ちます。h1を読み取ると、そこにあるものはすべてページの焦点であるに違いないと想定します。H2 は 2 番目のコンポーネントなどになります。このようにして、Google は、ページがコンテンツに関してカバーしているものの「範囲」を理解できます。

完全にはわかりませんが、私の意見では、大きな変数はページの「読み取り」モードです。これにより、特に視覚障害者が使用するデバイスで、デバイスとリーダーがコンテンツを整理できるようになります。

また、ページに構造と秩序感を与えます。

于 2018-09-21T07:09:56.783 に答える