プラカンブログSTAFF BLOG

2016.09.09

レスポンシブに便利!画像をテキストに置き換える実装方法

こんにちは。デザイナーのSUZUKIです。

レスポンシブ対応するのが一般化してきましたが、
まだ画像などの処理には悩むことがあります。

スマホの場合、端末の幅に合わせ画像を対応することが多く、
特にグローバルナビゲーションなどは、対応が面倒なことがあります。

そこで今回はCSSとJavascriptを使った、
画像をテキストに置き換える実装方法を紹介します。

簡単にいうと、PCの場合はimgが表示され、
スマホの場合はimgタグ内のaltの内容がテキスト表示される仕組みです。

htmlの記述例

<ul id="gnav" >
<li><a href="#"><img src="gnav01.png" alt="ナビゲーション1" /></a></li>
<li><a href="#"><img src="gnav02.png" alt="ナビゲーション2" /></a></li>
<li><a href="#"><img src="gnav03.png" alt="ナビゲーション3" /></a></li>
</ul>

CSSの記述例

@media screen and (max-width: 640px) {
#gnav li a:after {
    content:attr(data-label);
}
#gnav li img {
    display:none;
}
}

after擬似要素を使ってテキストを挿入します。
テキストは「content」プロパティで指定しています。

Javascript記述例

$(function(){
  $('#gnav li').each(function(){
    $('a',   this).attr({ 
    'data-label': $('img',   this).attr('alt')
    });
  });
});

jQueryを使用して、altの内容を
「content」プロパティの「data-label」として自動的に設定しています。

以上がCSSとJavascriptを使った画像をテキストに置き換える実装方法になります。

別の2つの方法も紹介しますが、デメリットもあるので、
状況に応じて使い分けてください。
基本的にはCSSとJavascriptを使った方法をオススメします。

別の方法1:PC用とスマホ用のhtmlを2つ記述

htmlの記述例

<ul id="gnav-pc" >
<li><a href="#"><img src="gnav01.png" alt="ナビゲーション1" /></a></li>
<li><a href="#"><img src="gnav02.png" alt="ナビゲーション2" /></a></li>
<li><a href="#"><img src="gnav03.png" alt="ナビゲーション3" /></a></li>
</ul>
<ul id="gnav-sp" >
<li><a href="#">ナビゲーション1</a></li>
<li><a href="#">ナビゲーション2</a></li>
<li><a href="#">ナビゲーション3</a></li>
</ul>

CSSの記述例

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

デメリット

ワンソースではないので、googleの推奨する方法ではない。
無駄な記述が増える。
更新する際に修正箇所が増える。

メリット

PC用とスマホ用でデザインが異なる時には有効な方法。
Javascriptを使用しなくても対応可能。

別の方法2:CSSで切り替える

テキストはhtmlで記述し、画像をCSSで背景処理し、PC、スマホで表示、非表示を切り替える。

htmlの記述例

<ul id="gnav" >
<li class="nav01"><a href="#">ナビゲーション1</a></li>
<li class="nav02"><a href="#">ナビゲーション2</a></li>
<li class="nav03"><a href="#">ナビゲーション3</a></li>
</ul>

CSSの記述例

#gnav li {
    text-indent:-9999px;
}
#gnav .nav01 {
    background:url(gnav01.png) no-repeat center center;
}
#gnav .nav02 {
    background:url(gnav02.png) no-repeat center center;
}
#gnav .nav03 {
    background:url(gnav03.png) no-repeat center center;
}

@media screen and (max-width: 640px) {
#gnav li {
    text-indent:0;
}
#gnav .nav01,  
#gnav .nav02,  
#gnav .nav03 {
    background:transparent;
}
}

デメリット

テキストを非表示にすることが、スパム扱いされる可能性がある。
CSSで画像の指定をする必要があり、記述が増える。

メリット

htmlが簡潔な記述になる。
Javascriptを使用しなくても対応可能。

まとめ

やはりCSSとJavascriptを使った方法が一番いいと思います。
imgタグのaltの内容をそのまま表示してくれますし、
実装も簡単で、htmlもCSSも無駄がありません。
覚えておくととても便利な方法なので、ぜひ試してみてください。

参考リンク

下記サイトは参考にしたサイトになります。
他の方法なども説明しており、詳しく知りたい方はどうぞ。

http://webdesign-dackel.com/2014/12/24/rwd-image-to-text/
http://www.webopixel.net/javascript/658.html

 

 

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc (鈴)

この記事は、SUZUKI が書きました。