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


ピックアップ記事

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

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

Dreamweaverのソース検索で正規表現を使う

2012年01月23日 web関連
今回は、wordpressからエクスポートした記事のxmlデータを、他のwordpressに入れる際に、xmlにカテゴリやタグが入っていると、新しいwordpressにもカテゴリが全部追加されて、不要なカテゴリが増えてしまったので、それを防ぐために、インポート前のxmlデータからカテゴリやタグにあたる箇所を削除してから、インポートするためにdreamweaverで正規表現を使いました。 Word…
「Dreamweaverのソース検索で正規表現を使う」をはてなブックマークに追加

レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示

2014年11月15日 web関連HTML5・CSS3
レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示
レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。 cssのdisplay:table-cellで解決 html [php]<ul id="nav"> <li><a href="#"><…
「レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示」をはてなブックマークに追加

Twitter API の利用回数制限を確認する

2011年07月29日 web関連twitter API
Twitter API (GET送信のみ?) には利用回数上限があります。Twitter APIを利用してサービスを作る際に、試行錯誤していると、いつの間にかAPIの利用回数上限にひっかかってしまいます。利用回数上限にひっかかると,一定時間(およそ1時間らしいです)そのアカウントまたはそのIPアドレスからアクセスできなくなります。 …
「Twitter API の利用回数制限を確認する」をはてなブックマークに追加

[xserver]サブドメイン設定時の注意点

2014年08月23日 web関連
xserverのマニュアルにもありますが、サブドメインを設定すると、異なるURLで同じサイト(ページ)へアクセス可能になってしまうので、Googleに重複サイトと思われないように以下のように設定した.htaccessを設置します。 …
「[xserver]サブドメイン設定時の注意点」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy