レスポンシブデザインでコーディングをしていると、デザインによってはPCの時はテキスト画像、スマホの時はデバイスフォントで表示したい時があります。

例えば、次のようなデザインの場合です。

WEBフォントを使えば実現できそうですが、そこはまぁ、テキスト画像でコーディングする必要があったとしましょう。

さて、どうしようか。

まずは、画像とテキストをHTML記述しておいて、それぞれを表示を切り替えてみましょう。

その時は次のようになります。

HTML

<p>
    <span class="hidden-sm"><img src="./img/xxx.png" alt="こんにちは！元気ですか？"></span>
    <span class="visible-sm">こんにちは！元気ですか？</span>    
</p>

CSS

@media only screen and (max-width: 767px) {
    .hidden-sm{
        display:none;
    }   
    .visible-sm{
        display:block;
    }
} 
@media only screen and (min-width: 768px) {
    .hidden-sm{
        display:block;
    }   
    .visible-sm{
        display:none;
    }
}

やりたい事は実現できましたが、HTMLの方が画像altとテキストが被ってしまいました。

では、テキストだけにして、背景画像として表示するようにしてみましょう。

HTML

<p class="text01">
    こんにちは！元気ですか？ 
</p>

CSS

@media only screen and (max-width: 767px) {
    .text01{
        background:none;
        width:auto;
        height:auto;
        font-size: 14px;
        text-indent: 0;        
    }
} 
@media only screen and (min-width: 768px) {
    .text01{
        background:url("./img/xxx.png") no-repeat left top;
        width:100px;
        height:40px;
        font-size: 1px;
        text-indent: -9999px;
    }
}

この方法でも実現が出来ましたがCSSが大きくなってしまいました。

これではその都度、CSSに画像のパスを書かないといけないので大変です。

data属性と:before擬似要素でテキストを切り分ける

というわけで本題です。

HTML5のdata属性とCSSの:before擬似要素を使って実現してみましょう。

次のように記述します。

HTML

<p class="label-sm" data-label="こんにちは！元気ですか？">
    <img src="./img/xxx.png" alt="こんにちは！元気ですか？">
</p>

CSS

@media only screen and (max-width: 767px) {
    .label-sm:before{
        content:attr(data-label);
    }
    .label-sm img {
        display:none;
    }    
}

ブレイクポイントになったら、label-sm クラスがついた中のimgを非表示します。

同時にdata-labelの中のテキストを:before擬似要素をつかって、デバイスフォントで表示しています。

こうすることで、CSSクラスの使い回しが可能となり管理がしやすくなります。

altとdata属性に同じテキストを書かないといけませんが、考え方によってはテキストがコントロールできるとも見れます。

他にもJavaScriptを使うなど、他にも色々な方法がありますが、このパターンも便利かなと思います。