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


ピックアップ記事

[PHP]公開時間を設定

2022年12月08日 web関連php
[php] <?php date_default_timezone_set('Asia/Tokyo'); $datetime = date('Y-m-d H:i'); ?> <?php if($datetime >= '2022-12-08 12:00'): ?> ここに表示内容 <?php endif; ?> [/php]
「[PHP]公開時間を設定」をはてなブックマークに追加

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

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

fontawesomeでアイコンを反転させる方法

2022年11月12日 web関連
反転させたいアイコンに以下のクラスを追加する。 水平反転 [php]fa-flip-horizontal[/php] 垂直反転 [php]fa-flip-vertical[/php]
「fontawesomeでアイコンを反転させる方法」をはてなブックマークに追加

WordPressでログインユーザーのみに表示するための記述

2014年07月15日 web関連WordPress
使用頻度が高いので、自分用にメモ。 運営中のサイトに少し手を加えたい場合や、自作プログラムの実行結果を自分だけに表示させて確認したい場合などに役立ちます。 ログインユーザーのみに内容を表示させる場合 [php]<?php if (is_user_logged_in()) : ?> <!-- ログインユーザーのみに表示される箇所 --> <?p…
「WordPressでログインユーザーのみに表示するための記述」をはてなブックマークに追加

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

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