PC専用に作られたサイトをレスポンシブ対応させる場合、

画像で作られた見出しをどうするかということが問題になってくることがあります。

具体的には、

のように見出しがHTMLで組まれていた場合、

レスポンシブ化するときに、次のような方法では問題が出てきます。

 

• 画像を画面の横幅に合わせて拡大縮小する

→横幅が小さくなったとき、文字が小さすぎて見えなくなる

• <h2>をoverflow:hiddenにして、画像をそのまま表示する

→デザインによっては見え方が崩れる（一部が隠れて見えなくなるため）

→文字が一部隠れてしまって見えなくなる

→高解像度のデバイスで見たときに、画像がぼやけて見える

• <h2>の中をテキストにして（例：<h2>Title</h2>）、CSSの背景画像で置き換え、text-indent:-9999pxでテキストを隠しておき、
  横幅の小さなデバイスで見たときに、背景画像を非表示にして、text-indentを元に戻してテキストを表示する方法に置き換え、CSS3で装飾。

→表示の問題は少なくなるが、見出しがたくさんある場合、HTMLとCSSの書き換えが大変（特にCSSの背景画像の設定）

→SEOでペナルティを受ける可能性あり（hタグでtext-indent:-9999px等で文字を隠すと、スパム扱いになることがある）

 

画像はそのままに、でもCSS3の高い装飾性の特性を活かしてテキストに置き換える方法はないかと探していて、

CSSの::after擬似要素セレクタと、contentプロパティ、そしてHTMLのdata属性を利用した文字の置き換え方法がありましたので、ご紹介いたします。

 

::after擬似要素セレクタでは、contentプロパティと合わせて使うことで、指定の要素の最後にcontentプロパティで指定したコンテンツを挿入することができます。

contentプロパティでは、attr(属性名)によって、指定の要素の属性をテキストとして挿入することができます。

ここでまず考えたのは、<img>のalt属性をこの方法で書き込めるのではないかとういことでしたが、

::after擬似要素セレクタで挿入される場所は、指定の要素の後ではなく、要素内の最後であるため、

要素の中がそれ以上ない要素である<img>にafter::を使っても、何も変化がありません（詳しくはコチラ→http://jeffreyfrancesco.org/weblog/2011051101）。

そのため、今回の場合、<img>の親要素である<h2>の属性を使うことができます。

とはいっても、<h2>にはalt属性は定義されておらず、かといって適当に何かの属性にテキストを書き込むのも、HTMLの規格的にあまりよくありません。

この場合<h2>一番適当な属性はtitle属性になるでしょうが、PC表示の際はツールチップが表示され、それまでの状態と若干表示が異なるため、場合によっては使えないかもしれません。

 

そこで見つけたのが、自由に属性を付けることができるdata-属性です。

data-属性はすべてのHTML要素につけることができ、値も自由につけることができる属性です。

data-*（*は半角英字の文字列）で指定します。

 

今回はdata-labelというデータ属性を<h2>に付け、それを::after擬似要素セレクタで表示することにしました。

 

HTML

 

CSS

 

↓コチラがデモです。windowを縮めて表示することで、レスポンシブでの表示の切り替えが確認できます。

DEMO

スマートフォンなどで確認していただくと、表示の違いが分かりやすいと思います。

 

ただ、data-属性は基本的にはHTML5の属性なので、表示上は問題ないと思いますが、XHTML1.0などで使うのはなんとなく気持ち悪いという場合はtitle属性を使ったほうがいいかもしれません。

 

この方法でも、<h2>にdata-属性でひとつずつテキストを入力していく作業が必要なため、やはり多少手間はかかってしまうので、状況に応じていろいろな方法を試してみるのがいいと思います。