https://qwerty.work/tags/overflow/ Recent content in Overflow on qwerty.work Hugo -- gohugo.io ja-JP Tue, 23 Aug 2022 14:57:27 +0900 https://qwerty.work/post/2022/08/css-text-indent-100-white-space-nowrap-overflow-hidden/ Tue, 23 Aug 2022 14:57:27 +0900 https://qwerty.work/post/2022/08/css-text-indent-100-white-space-nowrap-overflow-hidden/ <h2 id="text-indent-9999pxの代替手法">text-indent:-9999px;の代替手法 </h2><p>サイトのロゴのH1やトップに戻るボタンなど、テキストを表示させずに画像のみを表示させたときがあります。でも、SEO対策のチェックを受けたりすると、**「aタグに有効なテキストがありません」**みたいに指摘されることがあります。</p> <p>ちょっと古いやり方だと、<code>text-indent:-9999px;</code>を使って視覚エリアの外に文字を配置して、事実上みえなくする手法が取られていましたが、最近は以下の方法が流行っているみたいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">text-indent</span><span style="color:#f92672">:</span> <span style="color:#f92672">100</span><span style="color:#f92672">%;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">white-space</span><span style="color:#f92672">:</span> <span style="color:#f92672">nowrap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">overflow</span><span style="color:#f92672">:</span> <span style="color:#f92672">hidden</span><span style="color:#f92672">;</span> </span></span></code></pre></div><p>説明としたら、文字列を折り返さず、コンテンツの幅100%までずらし、はみ出ている部分は非表示にするといった感じです。ややこしいやり方ですが、でもこれでペナルティは回避できるので気にって使っています。</p>