レスポンシブでテキスト画像とデバイスフォントを簡単に切り替える方法


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

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

01

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

さて、どうしようか。

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

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

HTML

CSS


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

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

HTML

CSS

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

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


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

というわけで本題です。

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

次のように記述します。

HTML

CSS

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

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

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

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

 

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

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン