2014年11月15日 web関連HTML5・CSS3
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。

cssの:before attr属性で解決

html

<ul id="nav">
<li><a data-text="ホーム"><img src="
nav_home.png" alt="ホーム"></a></li>

<li><a data-text ="店舗案内・アクセス"><img src="nav_shop.png" alt="店舗案内"></a></li>

<li><a data-text ="お問い合わせ"><img src="nav_contact.png" alt="お問い合わせ"></a></li>

</ul>

htmlファイルのaタグにdate-◯◯を設定。 ◯◯は自由に設定可能。

css

@media (max-width: 767px) {
  #nav li a:before {
    content: attr(data-text);
  }
  #nav li img {
    display: none;
  }
}

画面サイズが767px以下の場合は、aタグのdata-textの文字を取得して、a要素に追加。 元の画像はdisplay:noneで非表示に。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

IE9でcss3のtransformが効かない時の解決策

2014年10月30日 web関連HTML5・CSS3
CSS3が使えるようになって、メニューボタンの背景に矢印を表示させることなどが出来るようになりましたが、IEでは効かないものもあります。 背景に矢印を入れる時は、transform: rotate(45deg);のようにborderを回転させるのですが、このtransformがIE9では使えません。 …
「IE9でcss3のtransformが効かない時の解決策」をはてなブックマークに追加

WordPress ウィジェットに個別のid,classを設定する

2014年08月11日 web関連WordPress
WordPressのウィジェットに個別のid,classを設定して、違うデザインを適用したい場合は、functions.php内でサイドウィジェットを有効にする設定項目の「before_widget」の箇所を以下のように変更します。 [php]register_sidebar(array( 'name' => 'side-widget', 'before_wid…
「WordPress ウィジェットに個別のid,classを設定する」をはてなブックマークに追加

IE6をHTML5に対応させる

2012年02月14日 HTML5・CSS3jQuery・javascript
IEのHTML5対応状況 IE6だけでなく、IE8以下は全てHTML5に対応していません。 それを対応させるために「html5.js」というjavascriptを読み込ませます。 使い方は簡単で以下のコードをタグの前の内に記述します。 [php] <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/…
「IE6をHTML5に対応させる」をはてなブックマークに追加

TwitterのプロフィールウィジェットのデザインをCSSで調整する

2012年02月07日 web関連twitter API
ツイッターのプロフィールウィジェットを入れているサイトで、CSSでデザインしていたら、h3やh4の設定がTwitterのウィジェットにまで反映されて、困ることが時々あります。(私は・・・) 今回はそれを直したかったので、調べて見ました。 Twitterのウィジェット 当サイトでは、Twitterが提供しているコードをそのまま設置していますが、以下のようなコードです。 [php] <s…
「TwitterのプロフィールウィジェットのデザインをCSSで調整する」をはてなブックマークに追加

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 web関連jQuery・javascript
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy