-PR-
解決済み

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

  • 困ってます
  • 質問No.5685
  • 閲覧数2154
  • ありがとう数10
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 57% (41/71)

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

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

  • 回答No.3
レベル13

ベストアンサー率 26% (511/1924)

こんな感じでいけてると思うんですけど・・・
(→参考URL)

ソース見て参考にしてください。
お礼コメント
nobu3

お礼率 57% (41/71)

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

その他の回答 (全3件)

  • 回答No.1

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

 また、下記のページは俺の、ゲストさんのイラストを掲載するページですが、スタイルシートとJavaScriptをばりばり使いまくってますんで、参考にしてみてください。
補足コメント
nobu3

お礼率 57% (41/71)

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

ベストアンサー率 26% (511/1924)

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

それと font-family ですが、IEでは正しく反映され
るようですが、NNでは全滅みたいです。
スペースを含むフォント名の指定には二重引用符などで
囲みましょう。
補足コメント
nobu3

お礼率 57% (41/71)

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

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

お礼率 57% (41/71)

回答、有難うございました。実はアドバイスいただいた内容については一通りやって済ませているのです。しかし、今回はどうしてもスタイルシートでHPを作ってみたいと思いまして、一つ一つタグを書き込んでいるのですが、なかなかうまくいきませんでした。
「スタイルシートだけではうまくいかないのかな?」と考えていましたら、さきほどshigatsuさんからもアドバイスをいただきまして、なんとかうまくいくようになりました。
deagleさんからも、色々とアドバイスをいただきまして本当に有難うございました。今後の勉強の大いなる参考にさせていただきます。
投稿日時 - 0000-00-00 00:00:00
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


新大学生・新社会人のパソコンの悩みを解決!

いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ