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


ピックアップ記事

twitter API からプロフィール画像を取得・表示

2011年07月28日 web関連twitter API
twitter API からプロフィール画像を取得・表示する方法です。 リクエストURL [php]http://api.twitter.com/1/users/profile_image?screen_name=apr_20&size=bigger[/php] 画像として表示 [php]<img src="http://api.twitter.com/1/users/…
「twitter API からプロフィール画像を取得・表示」をはてなブックマークに追加

IE6で透過pngを表示させる。DD_belatedPNG

2012年02月14日 web関連jQuery・javascript
DD_belatedPNG 先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。 DD_belatedPNGの入手 以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
「IE6で透過pngを表示させる。DD_belatedPNG」をはてなブックマークに追加

FacebookアプリをFacebookページ(ファンページ)に追加する

2012年01月27日 web関連Facebook
[php]https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL [/php] この「YOUR_APP_ID」はApp ID/API Keyに、「YOUR_URL」はアプリのURLに書き換えて、ブラウザからアクセスしてください。 アプリのApp ID/API K…
「FacebookアプリをFacebookページ(ファンページ)に追加する」をはてなブックマークに追加

Gumroadに登録&テスト販売してみました

2012年02月17日 web関連
さきほど、Gumroadにユーザー登録してみました。 どうやって活用していくか全然考えてないのですが、どんな感じなのか知りたかったので、登録&販売商品を登録してみました。 ユーザー登録から販売までが数クリックで完了するので、実に簡単でした(・∀・) WEBの知識が無い方でも簡単にネット上でダウンロード販売出来る感じです。 ユーザー登録 メールアドレス、パスワードを入力し、登録をするだけです。登…
「Gumroadに登録&テスト販売してみました」をはてなブックマークに追加

Twitter for Mac’s developer consoleの設定

2014年07月18日 web関連twitter API
Twitter for Mac’s developer consoleの設定
ちょうど設定してみたので、メモ。 まだ触ってないので詳しく分かりませんが、Twitter for Mac's developer consoleというのは、Twitter APIのテストが可能なのようです。 WEB版のコンソールもありますが、Twitter for Mac's developer consoleの方がサクサク動くらしいです。 DEVサイトにログイン、APP登録 まず…
「Twitter for Mac’s developer consoleの設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy