2014年11月15日 HTML5・CSS3web関連
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューに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>

ピックアップ記事

有名サイトのロゴ フォント

2011年07月27日 web関連
Twitter …… Pico Alphabet (Modified)Digg …… FFF Forward (Modified)Last.fm …… National (Modified)Flickr …… Frutiger BlackYouTube …… Alternate Gothic No. 2Facebook …… Klavika (Modified)Engadget …… Engadg…
「有名サイトのロゴ フォント」をはてなブックマークに追加

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

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

お名前.com VPSのメールサーバ設定

2011年06月11日 web関連
メール関連のサービスを起動お名前VPSのメモです。 とりあえず、メールの送受信を正常に行うには、以下のサービスを全部起動しておく。amavisdclamd.amavisddovecotpostfixメールクライアントの設定受信メールサーバメールサーバ:pop.ドメイン名アカウント:メールアドレスパスワード:メールアドレスのパスワード送信メールサーバメールサーバ:smtp.ドメイン名アカウント:メー…
「お名前.com VPSのメールサーバ設定」をはてなブックマークに追加

簡単なWordPressの投稿初期化方法とWP全体の初期化方法

2014年08月21日 web関連WordPress
簡単なWordPressの投稿初期化方法とWP全体の初期化方法
WordPressのテーマやプラグインのカスタマイズなどをしていると動作確認の目的でテスト投稿(記事、固定ページ)をすることがあります。私の場合は、テストが完了したら、テスト投稿を全て削除してまっさらなWPでスタートしたいと思うのですが、管理画面から投稿を削除しても記事IDは初期化されません。 WPのテーマやプラグイン、カテゴリ、WP設定などはそのままで投稿のみを初期化する方法と、サーバ上のファ…
「簡単なWordPressの投稿初期化方法とWP全体の初期化方法」をはてなブックマークに追加

HTML上に配置した画像に隙間が出来るときの対処法

2012年02月10日 web関連
配置した画像に余計な隙間(スペース)が出来る HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。 解決策 CSSファイルに以下の設定を記述する。 [php]img { vertical-align: top; }[/php] …
「HTML上に配置した画像に隙間が出来るときの対処法」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy