• ベストアンサー

CSSでの画像表示、無効時でのテキスト表示

CSS有効時は画像表示、無効時はテキスト表示というようにしたいのですが、どのようなCSSをかけばよろしいのでしょうか? リストタグを使いメニューを作成しておりますが、画像のメニューを使い、CSS無効時は画像が消え、その代わりにテキストが表示されるようにしたいのです。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • edo_m18
  • ベストアンサー率75% (3/4)
回答No.2

方法としてはいくつかありますね。 言われたtext-indent: -9999pxやテキストをspanで覆うもの、などです。

tomo81tomo
質問者

お礼

まさに!ありがとうございました。 おかげで、デザインの幅が広がりました。 CSSって面倒くさいけど、あらためて面白いと感じます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

メニューの画像はCSSで背景画像として設定すれば、CSS無効時は画像が表示されません。

tomo81tomo
質問者

補足

ありがとうございます。 説明が足りずにすいません。 画像の上にテキストが乗っている状態ではなく、フォントを凝ったものにしたいので、画像自体をメニューとして使用したいのです。 text-indent: -9999px; という荒業以外に方法はないのでしょうか・・・? よろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでのテキストの下に画像などを配置したい。

    CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 (ヘッダーの下に、左のナビと右のメインエリアという構造) テキストの周囲をボーダーで囲んであります。 (TABLEは使っていません) テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ(縦幅)が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか? とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。

  • CSSにおいて、画像とテキストの配置(回り込み)について

    CSS+HTMLによって、HPを作成しております。 HP作成ソフトはDream Weaver8です。 画像をテキストの左に回りこませる技術。 (例) ■■■■ テキストテキスト ■画像■ テキストテキスト ■■■■ テキストテキスト はスタイルシートで、画像にスタイルシートの ボックスのfloat定義でleftをつけて <div class="header" id="pageName"> <div id = "left"></div> <span class="style3">テキスト</span><br/> </div> このように設定すればよいのかと思ったのですが (headerは外部スタイルシートで、読み込み) 十分に画像をおくスペースがないと、 画像に、テキストがかぶってしまう場合や、(レイヤーが働いてしまう。)うまく、回り込まないのですが、どの設定が足りないのでしょうか。 ちなみにたっぷりとスペースをとった、divですと、 回り込ませることができたりしましたが、メニューdivなど 小さいスペースや縦幅が足りないとだめなのでしょうか。 画像のレイヤーの解除指定などをした方がよろしいのでしょうか。 まだ、初心者ですが、もし、ヒントだけでも、教えていた だけますと幸いです。

    • ベストアンサー
    • HTML
  • cssでテキストを内容ごとに3つ横並びにしたいのですが、floatなど

    cssでテキストを内容ごとに3つ横並びにしたいのですが、floatなどではうまくいかずこまっています。 2カラムのレイアウトにしたあとに、テキストを横並びに3つしてみたいというような感じです。 リストタグを使ってレイアウトするべきでしょうか? この場合、<div>タグの中にIDを設定してもうまくいきません。 初心者なので、なにかよい方法があったら教えてください。 レイアウトのイメージは添付画像にしてあります。黒い四角のところがテキストのまとまりだと考えてください。

  • CSS マウスオーバーでテキストの上に画像を表示させるには?

    CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる(テキストが見えない状態にする)方法というのはありますか? background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像1→画像2 と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで画像表示のやり方を教えてください

    初めまして、CSSを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか? 今の状態はこんな感じです。 間違っていますか? HTMLファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。

  • CSSで動く画像ロールオーバーの利点について

    javascriptを使わずCSSのみで動かすロールオーバー画像の利点と欠点が↓以外にあれば教えて下さい。私の解釈が間違っていればご指摘願います。 ■利点 1.HTMLのソースが綺麗=ソースコードが軽くなる。 2.検索ロボットが余分なソースを読まなくてもよくなる為、SEO対策に有効。 3.listタグ(UL、LI)はSEOで重みづけが大きい?従ってlistタグで作成されたメニューはロボットに重要視される。 ■欠点 1.CSSファイルが複雑化。 javascriptでもできる事をあえてCSSでしようとする意図がイマイチ掴めません。 また、メニューの背景のみを画像にした場合(メニュー名はテキスト)、CSSもさほど複雑化しないと思いますが、もしメニューひとつひとつを画像にしていた場合はCSSが複雑化しないんでしょうか。

  • CSSで左に画像、右にテキストを並べたい。

    CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 (●=画像 ▲=テキスト) 現在の表示は ●▲ となっているのですが、これを ●     ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか? 色々試したのですが、どうしても下のように改行してしまいます。 ●       ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSで画像を隠すとSEO的にNGですか?

    通常時とマウスオーバー時の2枚の画像を使い、メニュー部分でCSSでロールオーバーを使っています。 この場合、マウスオーバー時に画像を読み込むため一瞬アイコンがちらつくようになるのを防ぐため、同じページにマウスオーバー時の画像を敷き詰め、display: noneで非表示にしています。 隠しテキストはSEO的にNGとわかりますが、隠し画像も同じ扱いなのでしょうか? ちなみに隠している画像にはaltは付けていません。 個人サイトですが、できるだけSEOに問題ないようにしたいので、どうかご教示ください。 また2枚の画像を使ったCSSロールオーバーで、このチラつきを防ぐいい方法があれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像の横にテキスト表示

    <dl> <dt>画像</dt> <dd>テキスト1</dd> <dd>テキスト2</dd> <dd>テキスト3</dd> </dl> 上記のhtmlで画像とテキストの表示をしたく思っております。画像を基準にテキストは全て 画像の右側に表示させたいのですがどのようなcssをかけば実現できるでしょうか? ********** テキスト1 *      * テキスト2 * 画像  * テキスト3 *      * ********** のようなイメージを想定しております。 ddが1つであればfloatで問題ないのですがddが複数ありddのみは縦に続けたいのですが方法がわからず つまずいている状態です。詳しい方いらっしゃいましたら宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでリンクの表示をテキストと画像で変えたい

    CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、  アンダーラインをださない  a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS