レスポンシブグローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。css画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述してます。</ul></nav>cssは600pxをブレークポイントにしています適当に調節してください。attr(data-label);」で設定したテキストを表示します。}}これでとりあえず完成です。「attr(alt)」とかできればdata属性いらないのでスマートになりそうですが、imgにはテキストを配置できないですよね。いうことでこんな感じになりました。jQueryでdata-labelを自動で設定するさきほどはリストに「data-label」と属性を書きましたがaltと同じのを書くのはめんどくさいという場合jQueryを使用すれば自動で設定できます。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。