目的

テキストを画像にしたい。
拡張性、更新性、応用性が高い。
実用的、汎用的なのがいい。

タグの選定、記法。いろいろ試してみた。

まずタグ選びから、
巷で見かけるコードは、hタグにバックグラウンド指定する方法。
または、そのままimgタグを突っ込む方法の2パターンが主流かと見受けられる。

例えば、Yahooのトップでは、後者の「そのままimgタグを突っ込むパターン」が、
ロゴに適応されていて、altにYahoo...と記述されている。
その場合、
h1>a>img[src=./img/logo.jpg alt=yahoo]の順となっていることが多い。

さらにスマートにしたのが、前者のhタグなどの見出しに対して、
バックグラウンドで指定する方法がある。
これは、いろいろなタグへの用途が可能だ。
h1>a[href=# title=yahoo]{yahoo}と記述され、
よくaタグ適応の場合は、テキストまで囲っていることが多い。
(テキストは、-9999pxとかで、テキストを枠外へ飛ばしている)
SEO的には、どうなのかはわからない。

そこで、両者を組み合わせた方法を考えてみた。
バックグラウンドでの画像指定、そしてalt属性に変わるもの。
さらに、テキスト途中でも使える組み合わせ。

それは...spanタグだ。
spanタグは、主にpタグ配下などで利用されているケースが多い。
色をつけたり、太字に変えたり、テキスト専用のタグだ。
これを使って、画像に変えることはできないか...
そう簡単には、行かない。

まず、spanタグは特殊なタグで、marginやwidthなどのサイズ指定が効かない。
つまりは、素のspanだけだと、画像のサイズ変動についていけないというのが現実。

それを回避してくれるのが、display: inline-block;だ。
これを適応することで、通常のタグたちと同様に、各種指定が可能となる。
続いて、altに変わる属性を付与する。
それが、aria-labelこれを追加することで、
タグがテキストを囲っていなくても、存在価値が生まれ、命が吹き込まれる。
それにこれを利用しているのがあのGoogleさんなら、
さらに納得がいくし、SEO的にも特に問題はないと思う。
(そんな方法みたことないよって？どこで使われているのかって？それは...404エラーページで使用されていたよ。)

ただ、内心あの大手のGoogleさんと同じ考えをしていることにびっくりしたw

実際のCode

index.html

...
<div class="box">
  <div class="box01">
    <a href='javascript:void(0);' class="img_bg">
      <span class="logo" aria-label="Google"></span>
    </a>
  </div>

  <div class="box02">
      <a href='javascript:void(0);' class="img_bg">
        <span class="logo01" aria-label="Google"></span>
      </a>
  </div>
    <div class="box03">
      <a href='javascript:void(0);' class="img_bg">
        <span class="logo01" aria-label="Google"></span>
      </a>
  </div>
</div>
...

style.css

* {
  padding: 0;
  margin: 0;
}
body {
  margin-left: auto;
  margin-right: auto;
  width: 320px;
}

.box {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid ;
  height: 350px;
}

/* div.box$$ */
.box01 {
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 100px;
  border: 1px solid ;
}

.box02 {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 272px;
  height: 92px;
  border: 1px solid ;
}
.box03 {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 272px;
  height: 100px;
  border: 1px solid ;
}

/* span.logo$$ */
/* img-Size 544 x 184 / 2 */
span {
  display: inline-block;
}

.box01 a span.logo  {
  background:url(./img/googlelogo.png) no-repeat left; 
  background-position: -1px -1px;
    background-size:auto 100%;
    width: 272px;
    height: 92px;
}

.box02 a span.logo01,
.box03 a span.logo01 {
  background:url(./img/googlelogo.png) no-repeat left;
  background-position: -1px -1px;
  background-size:auto 100%;
  width: 100%;
  height: 100%;
}

実行結果

真ん中が本命。
上下は、比較用。

実行結果の軽い説明
上は、直でspanにサイズを指定してます。
その結果、div要素が変わっても変動はしません。
応用としては、要素固定での使用に向いています。

次に、真ん中と下について、
真ん中の場合は、みていただいている通り、意図した指定に従います。
直のdivタグだけに依存してるので、divタグのサイズを変更しない限り、
そのままimgタグみたいな操作が可能です。
また、応用として、バックグラウンド指定なので、
下のように画像を引き延ばしたりもできます。

グローバルナビなどで利用されることの多い、
一つの画像を要素分けで、表示させることも容易ですね。

その他にもこういう方法あるよってのがあれば、教えてください。

実行例 >>> codepen

きっかけ

考えるきっかけは、デザイン変更が発生した際に、
テキスト画像が多いページを含む、大幅な文字サイズアップがあったのがきっかけ。

通常ならaiでデザインされたテキストをスライスし画像にして、
切り出した画像を適応するだけの作業だから特に問題はない作業だが...
これが画像の数が多いと以外にも骨が折れる作業なのだ...文字数が一律じゃない場合、
サイズを合わせたりとか...いろいろ。
また人それぞれ、コードが異なるからimgで適応していたり、hにcssで指定していたりと...
手法がさまざま。(本来なら、統一すればいいだけの話だが...そうもいかない時もある。)

テキストも飛ばさず、さらにいろいろな用途に使える画期的なコードを書いてみた。

テキスト画像について、考える。

目的

タグの選定、記法。いろいろ試してみた。

実際のCode

実行結果

きっかけ