<em>で背景を入れる事について

質問

cssを勉強しております。
書籍を何冊か購入しチュートリアルをやり勉強しているのですが、
<ｈ2><em>○○○</em></h2>にcssで、em {visibility: hidden;}　として言葉を消してそこに背景画像を入れると言う技？がよく載っているのですが、有名なサイトのソースを見ると普通に画像（HTMLに<img～>）を挿入している所が多いのですが、どちらの方が推奨？されるのでしょうか？

あともう一つ質問なのですが、これまた書籍なんですがcssハックでmac版IEのハックがよく載っているのですが皆さん使われているのでしょうか？
今のところ私はwinのIE6、5.5、5は一応崩れないようハックしているのですが…

勉強を始めたばかりの為、質問内容が分かりづらくて申し訳ないのですが宜しくお願い致します。

回答No.2

noname#83877 · ベストアンサー

cssでの画像置換は今のところオススメしません。
普通の用途であればimg要素でされる方が良いと思います。
seo的に有利だというデータも比較したものを見たことがありません。
将来的には

h2 {
content:"テキスト";
}

のような方法で置換できるようになるかもしれませんが、今のところこれができるのはoperaだけだと思います。

macIEは多分@importのバグを利用してcssを読み込ませないようにしている人が多いんじゃないでしょうか。
もしもハックを使う場合は、ちゃんと現在存在する全ブラウザで検証したことが明記されているもの意外使わない方が良いと思います。
有名なハックでも対象外のブラウザに効いてしまうことがよくあるので。
私の場合ですが、

/* \*//*/
*+html:\66irst-child*.iefm_52:lang(ja), d:ummy, {
color:#f00;
}
/* */

という感じのハックが手元にありますが、正直使う気にはなれません(笑)

お礼

ご丁寧に分りやすいご回有難う御座いました！
＞seo的に有利だというデータも比較したものを見たことがありません。
↑そうですね、確かにその通りです。
img要素でいきます。

mac版IEは今、「@import'base.css';」と書き換えました。
これですとmacですとIE4、5.0、NN4.0は読み込まないようですのでw
winもIE4、5.0は読み込まないようになってしまいますが、4はともかく5もスタイルシート外した状態でいいですよね？＾＾；

回答No.5

noname#83877

これだとnetscape4.xとwinIE4とmacIE5をはじいてくれます。(macIE4はちょっとデータを取っていないのでわかりません)

@import 'style.css';

winのIE5はねばれば対応できる圏内だと思います。
4は無理なのではじいてしまっても良いでしょう。

お礼

再度アドバイス有難うございます！
このIE5.0は直し直しでやってきたのですが、はじく事にしました。
ご丁寧に有難うございました！

回答No.4

神崎 渉瑠（@taloo）

h2{
text-indent: -100000px;
background-image: url(title.gif);
}
というのが古くからありますが、
スパムサイトとして登録されてしまうことがある為、別の手段として考え出された方法です。
が、「文字を隠す」という意味は同じなので、text-indentでダメなサイトはvisibility:hiddenでもダメです。

<h2><img alt="タイトル"></h2>
画像を直接使用する方法は、
alt属性の内容は段落中のキーワードとしては登録されるようですが、
それを「タイトルとして登録する」ということは、現状ではないようです。

SEOを優先するのなら、画像置換がベストだと思います。
（ただし画像置換の方法は問わず。
一度スパムとして登録されたサイトは、画像置換を続ける限り何をやってもダメです）

ユーザビリティーという観点で言えば、文字サイズや色を「閲覧者が」ブラウザの設定で自由に変更できないので、どちらもＮＧです。

お礼

文字を隠したりするとスパムサイトとみなされる事があるという事は聞いた事あります。
頻繁に使わなければいいのでは？なんて思ってしまっていました＾＾；
何を優先するかを決めねばなりませんね。
貴重なご意見有難うございました！

回答No.3

ORUKA1951

No.1、ORUKA1951です。
了解しました。杞憂だったようで・・・申し訳ありません。
SEO--サーチエンジン最適化とはサーチエンジンが、ページに何が書かれているかをデータベース化するときに、適切に内容を理解できるかということですから、
【見出しは見出しとして適切にマークアップされていること】が必要です。
ですので、<h1～h6>で、それ以下の内容を示す適当な文字の見出しをマークアップすることは、極めて重要です。<em></em>は無意味です。

★ですので、画像で置き換えるのは望ましくありません。★

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
こうしたテクニックの例を挙げよう。
・・・【中略】・・・
* テキストを画像に置き換えて表現する。
・・・【中略】・・・
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　したがって、<h1>見出しテキスト</h1>とマークアップして、それをCSSで書き換えるほうが良いといえますね。
　<img>を使用するときは、alt属性に見出しを入れておくというのも、ありですが、サーチエンジンがそれを解釈してくれているかは判りません。
　たぶん、多くのサイトでaltで適切な語句が書かれていないので、混乱を招くため読まれていないと思います。---画像とか写真とかだとデータとして意味ないでしょ

例に挙げられたように、
<h2 id="maintenance"><span>メンテナンスについて</span></h2>
などと、マークアップしておいて、
h2#maintenance{
background:url([URL]) no-repeat 0% 0%;
width:160px;
height:80px;
}
h2#maintenance span{ visibility:hidden;/* or display:none; */}

が、断然・・よいでしょうね。

お礼

再度アドバイス有難うございます！
私の書き方が悪くて申し訳ございませんでした。
とても参考になります、有難うございました＾＾

回答No.1

ORUKA1951

いずれもおかしい。

≫書籍を何冊か購入しチュートリアルをやり勉強しているのですが、

　なぜ、CSSなのかの根本が書かれてなくて、単にＳＥＯとか、ウェブ標準とか、流行とかで、派手派手しいページの作り方。それもややこしいＨＴＭＬと複雑なＣＳＳのてんこ盛り・・・

　ついそういう本に手が伸びるのも判りますが・・・。違いますよ。

　HTMLが1.0→2.0→3.2と進んだ時点で、元もとのHTMLの理念からあまりにかけ離れたものになったから、HTML4で、基本に立ち返り、プレゼンテーションと文書構造が切り離された。
　どんな参考書を読むより、まず隅々まで読まないとならないのは
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　です。特に「HTMLの歴史」「HTML 4による文書の設計」や「スタイルシート」の項目。ここを何度も読めば、<ｈ2><em>○○○</em></h2>にcssで、em {visibility: hidden;}　が、なぜおかしいのか判ります。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
* ・・・【中略】・・・
* テキストを画像に置き換えて表現する。
*・・・【中略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

お礼

すいません、私の書き方が良くなかったようですね。
何故CSSを使うかと言いますと、
1.構造とデザインの分離ができる為メンテナンスが安易
2.アクセシビリティが高い
3.SEO対策になる
4.余計なタグが無いので表示が速い（jsファイル等も外部添付にしてます）
です。

私は決して派手派手しいページや複雑なＨＴＭＬ・ＣＳＳを学びたいとは思ってません。

教えて頂きましたサイトのページを印刷して隅々読んでみたいと思います。
有難うございました。