web-dev-qa-db-ja.com

CSSでテキストを非表示にする、ベストプラクティス？

ウェブサイトのロゴを表示するためのこの要素があるとしましょう：

_<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>
_

_#blog-title_はbackground:url(http://website.com/logohere.png)でスタイル設定されますが、テキスト_Website Name_を適切に非表示にする方法は？ここで見られるように cssを使用してテキストを隠す またはここで https://stackoverflow.com/a/2705328

_#web-title span { text-indent: -9999px; }
_

または

_#web-title span { font-size: -9999px; }
_

または

_#web-title span { position: absolute; top: -9999px; left: -9999px; }
_

また、これら3つの方法を組み合わせたものも見ました。しかし、実際には、テキストを効果的に隠すためのベストプラクティスはどれですか？

htmlcsshide
41
deathlock

実際、最近、新しい技術が登場しました。この記事はあなたの質問に答えます： http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

アクセス可能で、-99999pxよりもパフォーマンスが優れています。

Update：@deathlockがコメント領域で言及しているように、上記の修正の著者（ Scott Kellum ）は、 透明フォント ： http://scottkellum.com/2013/10/25/the-new-kellum-method.html .

76
coopersita

単純に透明にすることができます

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}
15
Yukulélé

display: none;のように単純に使用することはできません

HTML

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

CSS

.webname {
   display: none;
}

または、スペースを確保することに関心がある場合は、可視性で遊んでみてください

.webname {
   visibility: hidden;
}
6
Mr. Alien

ほとんどの開発者が行う方法は次のとおりです。

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

.webname {
   display: none;
}

あなたがデバイスのコンテンツを隠していることに気付くまで、私もそれをしていました。別名スクリーンリーダーなど。

渡すことで：

#web-title span {text-indent: -9000em;}

テキストがまだ読み取り可能であることを確認します。

3
Mark

テキストを含むスパンに.hide-textクラスを追加します

.hide-text{
display:none;
 }

またはテキストを透明にします

.hide-text{
 color:rgba(0,0,0,0);
 }

ユースケースに従って使用してください。

2
Dhruv Batheja

私はこのようにします：

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}
0
isapir

Google（検索ボット）が必要とするのは、ユーザーに配信されるのと同じコンテンツをボットに配信することです。テキスト（任意のテキスト）をインデント解除すると、ボットがスパムであるか、またはユーザーとボットに異なるコンテンツを提供していると判断します。

最善の方法は、アンカータグ内の画像としてロゴを直接使用することです。画像に「alt」を付けます。これはボットが読むのに最適であり、画像検索にも役立ちます。

これは馬の口からまっすぐです： http://www.youtube.com/watch?v=fBLvn_WkDJ4

0
Neeraj

2015年9月現在、最も一般的な方法は次のCSSを使用することです。

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
0
Joel Kinzel

（テキストを保持することに疑問があるので）マークアップでこれに対応する場合は、 CSSヘルパー でjQuery UIを使用します。

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

画像のコンテナに隠されるテキストに余分なマークアップを追加することを絶対に拒否する場合は、画像置換技術が適しています。

0
millimoose