web-dev-qa-db-ja.com

CSSでロゴを表示する適切な方法は何ですか？

私は最近CSSを学んでいます。私が見ているチュートリアルシリーズでは、ロゴ画像を表示する最良の方法は、テキストをH1タグで囲み、そのタグのCSSスタイルをテキスト付きの背景画像に設定することです-99999または同様に大きな数のインデント。

これは信じられないほどハックでエレガントではないようです。また、CSSを使用してテキストを非表示にすることは、SEOの目的には大きな問題になるようです（CSSを介してテキストを非表示にすることは不快なため）。

ロゴ自体は実際にはコンテンツではないので、imgの使用は避けてください。そのため、コーディング（つまりCSS）のデザイン側に委ねるべきです。

これに関する現在のコンセンサスは何ですか？

cssgraphical-logo
11
Mike Manfrin

ロゴを表示する正しい方法は、<img>要素を使用することです。 logos and logotype を学習していない場合、ロゴに独自のセマンティクスがあり、非常に具体的な方法で提示する必要があることに気付かない可能性があります。また、必要な解釈がある場合があります。これは、[alt]属性で使用する必要があります。

その必要な解釈が正当にページの見出しである場合、それを<h#>要素に追加することは意味的に正しいでしょう：

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常、ロゴはリンクとして使用されるため、よく見られるものは次のとおりです。

<a href="/">
    <img src="logo.png"... />
</a>

さらに、ロゴを強調することができます（程度に応じて<strong>または<em>のいずれかになります）：

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

ロゴの意味を理解する。 Coca-cola会社を参照している場合、ブランドのロゴは変更されません。また、スタイルシートを交換したり削除したりしても、ロゴは変更されません。ほとんどの人は意味的に理解しています

the Coca-Cola logo

とは違う

the Pepsi logo

15
zzzzBov

私は常に画像の周りにアンカータグをラップします：

<a href=""><img src=""></a>

または、アンカータグをブロックとして作成し、背景画像を設定します

<a class="logo" href="">Logo</a>

.logo { 
         background: url("/path") no-repeat; 
         width: 100px; 
         height: 100px; 
         display: block; 
         text-indent: -9999px;
}
7
chadpeppers

ロゴを表示するには、常にimgを使用する必要があります。 h1を使用し、ロゴを背景として使用することは非常に悪い習慣であり、避ける必要があります。ロゴはコンテンツであり、h1ではありません。

ハリーロバーツは彼の投稿でそれを明確に説明しました- あなたのロゴは画像であり、<h1>ではありません

4
apnerve

私はそれは本当に重要ではないだと思います。これにはさまざまな方法があり、それらはすべてサポートされています。それらはすべて機能します。それらのほとんどは、検索エンジンフレンドリーで完全にアクセス可能です。

私はこのようなことをします：

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

検索エンジン、テキストモードブラウザ、スクリーンリーダーには代替テキストが表示され、他のユーザーにはロゴ画像が表示されます。

2
Wander Nauta