• ベストアンサー
  • 困ってます

CSSで画像の裏にテキストの文字が隠れてしまいます

スタイルシートを使って、画像の位置を固定したあと、テキストを書いていくと画像の裏に文字が隠れてしまいます。 HTMLの表を使ってやると正常に表記されるんです。 スタイルシートでは、画像h1,h2,h3に対して   h1,h2,h3{float:left} と、<head>の後に記入しているのですがさっぱり反映されません。この他に、インラインでもやってみたのですが、  <span style="text-align:left>~</span> なんともなりません。この他にも試してみたのですが、うまくいきません。 文字のスタイルなどについては一気に指定してうまく制御できているのですが・・・ あー、font-familyの指定もうまくいっていません。 MS ゴシック と MS 明朝 の指定が全く変化しません。 上のように、半角でスペースを入れているのですが、・・・ ご存知の人がいらっしゃいましたらどうかご教授くださいますようお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数3010
  • ありがとう数11

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

  • ベストアンサー
  • 回答No.3

こんな感じでいけてると思うんですけど・・・ (→参考URL) ソース見て参考にしてください。

参考URL:
http://members.tripod.co.jp/shigatsu/float.html

共感・感謝の気持ちを伝えよう!

質問者からのお礼

すばらしい回答を有難うございました。 教えていただいたURLでソースを参考にしてやってみたら見事に制御できました。これまで散々悩まされていたのがうそのようにうまくいったので思わず拍手をしてしまいました。私にとってはそれぐらい感激的だったのです。 これで大きな山を越せたような気がして今は最高の気分です。なんだか今日はとてもいいことがありそうです。 今回はお世話になりまして、まことに有難うございました。

その他の回答 (3)

  • 回答No.4
noname#25358
noname#25358

 補足見ました。  そういうことなら、スタイルシートと言わず<IMG>タグに ALIGN=LEFT オプションを付けてみては?  駄目ですか?  あと、あのページの表のような感じでいいのであれば、<TABLE>タグに BORDER オプションを付けなければ表は線が消えます。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答、有難うございました。実はアドバイスいただいた内容については一通りやって済ませているのです。しかし、今回はどうしてもスタイルシートでHPを作ってみたいと思いまして、一つ一つタグを書き込んでいるのですが、なかなかうまくいきませんでした。 「スタイルシートだけではうまくいかないのかな?」と考えていましたら、さきほどshigatsuさんからもアドバイスをいただきまして、なんとかうまくいくようになりました。 deagleさんからも、色々とアドバイスをいただきまして本当に有難うございました。今後の勉強の大いなる参考にさせていただきます。

  • 回答No.2

z-index という属性があります。これは重ね合わせ時の 前後関係を指定するもので、レイヤーごとに前後関係を 指定できます。 z-index:number 数が大きいほど前になります。 それと font-family ですが、IEでは正しく反映され るようですが、NNでは全滅みたいです。 スペースを含むフォント名の指定には二重引用符などで 囲みましょう。

共感・感謝の気持ちを伝えよう!

質問者からの補足

画像が黒っぽいので気が付かなかったのですが、テキストが画像の裏に隠れるのではなく、重ね合わさっているようです。z-indexを使っても、重なった状態は一緒のようです。 画像を左において、テキストの開始位置を指定してやれば、スタイルシートで出来るのですが、どうしても、画像を右において、テキストが画像の手前で折り返すように配置できないものでしょうか? font-familyも、どうしても反映されておりません。使っているのはIE5です。二重引用符で囲ってみたのですが・・・ どこかでタグの記入が悪かったのでしょうか?

  • 回答No.1
noname#25358
noname#25358

 表示する順番を変えてみてください。  スタイルシートでは、重なる物に関しては上から順に処理しますので、当然、HTMLファイルの「上に書いてある物が優先順位が低く」なります。  z-indexプロパティを変更する手もあるんですが、これはNNが対応できないのでおすすめできません。  また、下記のページは俺の、ゲストさんのイラストを掲載するページですが、スタイルシートとJavaScriptをばりばり使いまくってますんで、参考にしてみてください。

参考URL:
http://www.edit.ne.jp/~deagle/tidings/

共感・感謝の気持ちを伝えよう!

質問者からの補足

いまだ解決には至っておらず、悪戦苦闘中です。 教えていただいたURLにも行って見たのですが、スタイルシートがやっと分かり始めた程度で、JavaScriptについてはまだまだ理解の範囲を超えております。 ただURLのページの最後にあるような「表」を使えば一応はテキストと画像を配置できるのですが、どうしても今回はスタイルシートを使って画像を右に固定し、テキストはその手前で折り返すように配置したいのです。出来れば、更なるアドバイスをいただけたら幸いです。

関連するQ&A

  • cssで一部の文字や画像を中央に寄せる方法

    よろしくお願いします。 まずhtmlに以下の記述をしております。 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネット プリンター </p> レッスンブックについてのみ文字色を変えたいため<span>を使用しております。 <p class="font">~</p>にはtext-align:leftを;適用しており 当然ですが、左に寄ります。 ですが一部の文字や画像のみを中央揃えにしたいのですが、きっとclass名を入れれば良いのだと思うのですが、具体的にどこに記述したら良いのか分かりません。 上記のimgと「レッスンブックのみを中央揃えにしたいと思っております。 ご指導よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLファイルのフォント指定

    こんにちは。HTMLファイルの編集についてです。 スタイルシートによるフォントの指定について、 お尋ねします。 ヘッダ部分に、 h1{color:blue;font-size:18pt} とか、 .type { font-family:"MS 明朝"; font-size:20px; color:blue; } と書きますと、 <h1> </h1>、<SPAN CLASS="type"> </SPAN> で、文字を挟んで、フォントの指定が可能ですが、 HTMLファイルすべてのフォントについて、フォントサイズを13pxにしたい場合は、 どうしたらいいのでしょう。 ヘッダに書き込むことで、どうにか出来ないでしょうか? それで、なおかつ、部分的に<SPAN CLASS="type"> </SPAN>を 使いたいというような場合は、どうしたらいいのでしょう。

  • 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による見出し1(H1)の文字サイズについて

    いつもお世話になっております。 今回、以下のように見出し1(H1)にスタイルシートで文字サイズを設定しました。 h1{ font-size:12px; line-height:135%; letter-spacing: 0.05em; font-weight:normal; margin:0; text-align:left; display: inline; } IE6では文字のサイズは小さくなったのですが、Netscape 7.1とFirefoxでは大きいままで小さくなりません。 小さくする方法をご存知でしたら教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS:文字の上下の中央揃え

    h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか? 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "MS ゴシック"; background-color: #88ceff;}

    • ベストアンサー
    • HTML
  • css 各divの内容を上に揃えたいです。

    こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"MS 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }

    • ベストアンサー
    • HTML
  • box の左端と右端に書いた文字の下端を揃えるにはどうすれば

    box の左端と右端に書いた文字の下端を揃えるにはどうすれば よいでしょうか。 <div style="width:200px;"> <span style="float:left;font-size:80%;">左端</span> <span style="float:right;font-size:150%;">右端</span> </div> float を指定しなければ下端は揃っているのですが、 float をつけると下端ではなく上端が揃います。

    • ベストアンサー
    • CSS
  • cssで見出しの両側に文字を表示したい

    css+htmlでWebページを作成しています。 その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。 (完成イメージは画像参照)。 ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。 見出しの両側に表示させるにはどうしたらよいですか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.heading h3 { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; font-size: 100%; line-height: 100%; text-align: center; } span { float: left; width: 100px; text-align: center; } span.back { float: left; } span.next { float: right; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSS適用時に背景画像をテキストの上に上書きする

    XHTMLでテキストで入力したものを、CSS適用時に背景画像をテキストの上に上書きして画像に置き換えたのですが、そこがリンクしてる場合オンマウスしてもマウスカーソルが、リンク用のアイコンに切り替わらず困ってます。 ---XHTMLのソース--- <div id="logo"> <h1> <a href="index.html"> <span></span>テキスト部分</a> </h1> </div> ---CSSのソース--- #logo{width:106px;float:left;margin:0;padding:0;} #logo h1{font-size:10px;position:relative;width:106px;height:43px;} #logo span{background:url("../img/logo.gif") no-repeat;width:100%;height:100%;position:absolute;} (購入した本に載っていたテクニックなんで、 h1とspanに対して何でpositionでrelativeとabsoluteを入れる必要があるのかも正直分からない状態です。) ご指導宜しくお願いします。

    • ベストアンサー
    • CSS
  • css のH1である文字を設定するには

    外部スタイルシートにH1,H2,H3...を定義したいのですが、たとえば、 ◎~~~ となるように、最初の◎をCSSに書き込んでおくにはどうすればいいのでしょうか?文字が無理なら画像でもかまいませんが、その場合はどのように書くのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML