レスポンシブ化に便利！CSSで画像を文字に置き換える方法 | スターフィールド株式会社PC専用に作られたサイトをレスポンシブ対応させる場合、 画像で作られた見出しをどうするかということが問題になってくることがあります。 具体的には、 のように見出しがHTMLで組まれていた場合、 レスポンシブ化するときに、次のような方法では問題が出てきます。 画像を画面の横幅に合わせて拡大縮小する →横幅が小さくなったとき、文字が小さすぎて見えなくなる <h2>をoverflow:hiddenにして、画像をそのまま表示する →デザインによっては見え方が崩れる（一部が隠れて見えなくなるため） →文字が一部隠れてしまって見えなくなる →高解像度のデバイスで見たときに、画像がぼやけて見える <h2>の中をテキストにして（例：<h2>Title</h2>）、CSSの背景画像で置き換え、text-indent:-9999pxでテキストを隠しておき、 横幅の小さなデバイスで見たときに、背景画像を非表示
