WebDesign Dackel

レスポンシブ化に使える、画像をテキストに置き換える方法まとめ

レスポンシブ化に使える、画像をテキストに置き換える方法まとめ

Hatena0
Google+0
Pocket0
Feedly0

サイト制作を行う上でレスポンシブ化は当たり前、という流れになって随分と経った気がします。
だからといって、まだまだレスポンシブ化は簡単では無く、実際作業に入ると沢山の事に頭を悩まされてしまいます。
その中でも、画像周りの扱いは非常に面倒に感じます。

そこで今回はレスポンシブ化に使えるテクニックとして、画像からテキストへの置き換える方法を幾つかまとめてみました。
それぞれ、サンプルとメリット・デメリットを書いたので参考になればと思います。

画像をテキストに置き換える

それぞれサンプルを用意しています。共通して画面幅が640pxよりも大きい場合は、緑色の画像テキストが表示されて、それ以下の場合は、青色のテキストが表示されています。スマホを使ってDEMOを見てもなんのこっちゃわからないかと思いますので、是非PCでご確認頂けたらと思います。

方法1. 背景画像を使用

マークアップ上はテキスト入れておき、CSSで背景画像を使用します。

HTML

<p class="demo-txt01">WebDesign Dackel</p>

CSS

.demo-txt01 {
    width:100%;
    height:77px;
    text-indent:-9999px;
    background:url(images/txt.png) no-repeat center center;
}

@media screen and (max-width:640px) {
    .demo-txt01 {
        width:auto;
        height:auto;
        text-indent:0;
        background:transparent;
    }
}

メリット

  • HTMLがクリーンに保てる

デメリット

  • 画像表示に必要なサイズをCSSで指定しなければいけない
  • CSSの記述が増える

DEMO

方法2. after, before擬似要素でテキストを描画

after, before擬似要素を使ってテキストを描画する方法です。一つひとつセレクタのcontentプロパティに指定しても良いのですが、方法1と同様にCSSが無駄に長くなってしまいます。
contentプロパティに指定出来る、attr()を上手く使うことで解決出来ます。サンプルでは独自のdata-label属性を用意して、そこに入れたテキストが画像に変わって表示されています。

HTML

<p class="demo-txt02" data-label="WebDesign Dackel"><img src="images/txt.png" alt="WebDesign Dackel" /></p>

CSS

@media screen and (max-width:640px) {
    .demo-txt02 {
        content:attr(data-label);
    }
    .demo-txt02 img {
        display:none;
    }
}

メリット

  • CSSがクリーンに保てる
  • 汎用性が高い

デメリット

  • alt属性と同じ内容を2度書かなければならない為、修正漏れが出そう

DEMO

方法3. 方法2の発展系、JSで自動化

方法2のcontentプロパティ使用を発展させた方法です。手動で設定していたdata-label属性をJSを使って自動で設定することで、デメリットになっていた「HTMLの記述が増える」を解消出来ます。
※サンプルではjQueryを使用しています。

また、下記サンプルコードではクラス名をdemo-txt03の様にしていますが、rwd-txtなどの様に設定しておけば、汎用的に使えるかと思います。

HTML

<p class="demo-txt03"><img src="images/txt.png" alt="WebDesign Dackel" /></p>

CSS

@media screen and (max-width:640px) {
    .demo-txt03:after {
        content:attr(data-label);
    }
    .demo-txt03 img {
        display:none;
    }
}

JS

$(".demo-txt03").each(function(i){
    var txt = $("img",this).attr("alt");
    $(this).attr("data-label", txt);
});

メリット

  • CSSがクリーンに保てる
  • HTMLがクリーンに保てる
  • 汎用性が高い

デメリット

  • JSを使って属性を指定する為、DOM構築が完了するまで何も表示されない場合がある

DEMO

方法4. マークアップを分ける

640px以下、以上で完全にHTMLを分ける、という方法です。あくまでもこの方法は、方法1〜3のどれでも解決出来ない場合の最終手段として使いたいところです。SEOには詳しくないのですが、重複したコンテンツが出来てしまうのは良しとされない気がします。

HTML

<p class="demo-txt05-pc"><img src="images/txt.png" alt="WebDesign Dackel" /></p>
<p class="demo-txt05-sp">WebDesign Dackel</p>

CSS

.demo-txt05-sp {
    display:none;
}

@media screen and (max-width:640px) {
    .demo-txt05-pc {
        display:none;
    }
    .demo-txt05-sp {
        display:block;
    }
}

メリット

  • レイアウトの制約がなくなる

デメリット

  • HTMLが記述が増える
  • 重複したコンテンツが発生する
  • 修正漏れが出そう

DEMO

参考サイト

下記のサイトが非常に参考になりました。ありがとうございます。

まとめ

参考サイトに挙げた様に、多くのブログで紹介されているテクニックですが、一度自分なりにまとめてみようと思い記事にしてみました。
間違っている箇所などありましたらご指摘頂けたらと思います。