-2

これを調べてみると、このシナリオを、多くの議論が交わされている画像置換の議論や議論から切り離すのは難しいと思いますが、私の場合は、画像とテキストの両方を使用したいと思います。

問題は、ロゴと画像の両方が必要なことですが、明らかにヘッダーはそれ自体の行に配置したいので、目的の効果を得るために画像を左にフロートさせました。私には問題ないようですが、以前にこの問題に遭遇したことを覚えていません。最初にこの問題を正しく解決する必要があるので、私の質問：この方法に何か問題がありますか、検討する価値のある代替方法はありますか？さらに考慮すべき点として、たとえば、フロートをクリアする必要はありませんでしたが、h1タグの後に行う必要があるかもしれません。

<html>
<head>
    <style>
    h1 {
    line-height:100px;
    font-size:75px;
    background:#eee;
    }

    img#logo {
    margin-right:20px;
    float:left;
    }
    </style>
</head>

<body>
    <img id="logo" src="http://placehold.it/100x100">
    <h1>Title</h1>
    <p>Page Content ...</p>
</body>
</html>

これがJSFiddlehttp : //jsfiddle.net/CAc3E/です。

4

3 に答える 3

2

十分ですが、タイトルとロゴを<header>タグで囲む方が理にかなっています。

<body>
    <header>
        <img id="logo" src="http://placehold.it/100x100">
        <h1>Title</h1>
    </header>

    <section role="main">
        ...
    </section>

    <footer>
        ...
    </footer>
</body>

また、CSSはセマンティクスに関係ありません。これを使用することも、clear省略することもできます。それはあなたの訪問者だけに重要であり、検索エンジンがあなたのウェブサイトをどのように見るかではありません。

于 2012-06-04T21:10:31.240 に答える
1

このアプローチに問題はありません。検索エンジンは画像を無視するだけで、誰もが満足しています。個人的には怠惰だからといってタグの中にロゴを入れてh1いますが、実際にはデメリットをテストしていないので、一粒の塩を使ってください。

clear見出しを画像と同じ高さにするように強制しているので、スタイルの欠落による問題も予測できません。ただし、もちろん、このようなものを出荷する前に、最悪の場合のブラウザー（特に、ターゲットユーザーが本当に悪い場合はIE7とIE6）でテストしてください。

于 2012-06-04T21:11:06.203 に答える
1

ロゴ画像自体がページに意味のあるコンテンツを提供しているのか、それとも純粋に視覚的な補助であるのかを自問する必要があります。たとえば、ロゴ画像の代替テキスト属性が「会社のロゴ」のようなものである場合、おそらく後者が当てはまります。テキストを完全に削除するために画像置換技術を使用したくないことは理解していますが、見出し要素の背景としてロゴ画像を使用することをお勧めします。

<head>
    <style>
    h1#logo {
        background:url("http://placehold.it/100x100") 0 0 no-repeat #eee;
        font-size:75px;
        height: 100px;
        line-height: 100px;
        text-indent: 120px;
    }
    </style>
</head>

<body>
    <h1 id="logo">Title</h1>
    <p>Page Content ...</p>
</body>
</html>

好みに合わせて調整する必要がありますが、それが一般的な考え方です。

于 2012-06-04T21:15:55.310 に答える