レスポンシブでテキスト画像とデバイスフォントを簡単に切り替える方法
レスポンシブデザインでコーディングをしていると、デザインによってはPCの時はテキスト画像、スマホの時はデバイスフォントで表示したい時があります。
例えば、次のようなデザインの場合です。
WEBフォントを使えば実現できそうですが、そこはまぁ、テキスト画像でコーディングする必要があったとしましょう。
さて、どうしようか。
まずは、画像とテキストをHTML記述しておいて、それぞれを表示を切り替えてみましょう。
その時は次のようになります。
HTML
|
1 2 3 4 |
<p> <span class="hidden-sm"><img src="./img/xxx.png" alt="こんにちは！元気ですか？"></span> <span class="visible-sm">こんにちは！元気ですか？</span> </p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@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
|
1 2 3 |
<p class="text01"> こんにちは！元気ですか？ </p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@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
|
1 2 3 |
<p class="label-sm" data-label="こんにちは！元気ですか？"> <img src="./img/xxx.png" alt="こんにちは！元気ですか？"> </p> |
CSS
|
1 2 3 4 5 6 7 8 |
@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を使うなど、他にも色々な方法がありますが、このパターンも便利かなと思います。
