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>

ピックアップ記事

WordPressのテーマをウィジェットに対応させる

2013年10月06日 phpweb関連WordPress
WordPressのテーマをウィジェットに対応させる
Wordpressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;) 今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ!ってことで、ウィジェ…
「WordPressのテーマをウィジェットに対応させる」をはてなブックマークに追加

重複しないWordPressのdescription設定

2014年08月14日 phpSEO対策web関連WordPress
重複しないWordPressのdescriptionのコードを書いてみました。 おおまかな確認はしていますが、細かいチェックは出来てません・・・m(_ _)m Gistはこちら [php]<?php //descriptionの設定 function set_description(){ global $post; $content = $post->…
「重複しないWordPressのdescription設定」をはてなブックマークに追加

photoshopでfavicon(icoファイル)作成

2012年01月23日 web関連
icoformatICO Formatプラグインを追加 Photoshopでは、icoファイルを扱うことができないので、以下のプラグインをインストールして、icoを作成・保存出来るようにします。 Photoshop icoformatICO (Windows Icon) Format Plugin プラグインをダウンロード、解凍したら、ICOFormat pluginというファイルを、「Ap…
「photoshopでfavicon(icoファイル)作成」をはてなブックマークに追加

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

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

Dreamweaverで「既に別のドキュメントタイプに関連付けられているためです。」エラー頻発

2014年11月13日 HTML5・CSS3web関連
DreamweaverでSCSSファイルの編集をするためにDWの設定を触ったのですが、起動のたびに「ドキュメントタイプ”◯◯◯”は追加されません。使用するファイル拡張子が、既に別のドキュメントタイプに関連付けられているためです。」のエラーが連発するようになりました。 原因 調べてみると、Dreamweaverで編集可能にするために、「MMDocumentTypes.xml」というファイ…
「Dreamweaverで「既に別のドキュメントタイプに関連付けられているためです。」エラー頻発」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy