- ベストアンサー
CSSで画像の裏にテキストの文字が隠れてしまいます
スタイルシートを使って､画像の位置を固定したあと､テキストを書いていくと画像の裏に文字が隠れてしまいます。 HTMLの表を使ってやると正常に表記されるんです。 スタイルシートでは､画像h1,h2,h3に対して ｈ1,h2,h3{float:left} と、<head>の後に記入しているのですがさっぱり反映されません｡この他に、インラインでもやってみたのですが、 <span style="text-align:left>～</span> なんともなりません。この他にも試してみたのですが､うまくいきません。 文字のスタイルなどについては一気に指定してうまく制御できているのですが・・・ あー、font-familyの指定もうまくいっていません。 MS ゴシック と MS 明朝 の指定が全く変化しません。 上のように､半角でスペースを入れているのですが、・・・ ご存知の人がいらっしゃいましたらどうかご教授くださいますようお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいけてると思うんですけど・・・ （→参考URL） ソース見て参考にしてください。
その他の回答 (3)
補足見ました。 そういうことなら、スタイルシートと言わず＜ＩＭＧ＞タグに ALIGN=LEFT オプションを付けてみては？ 駄目ですか？ あと、あのページの表のような感じでいいのであれば、＜ＴＡＢＬＥ＞タグに BORDER オプションを付けなければ表は線が消えます。
お礼
回答､有難うございました。実はアドバイスいただいた内容については一通りやって済ませているのです。しかし､今回はどうしてもスタイルシートでHPを作ってみたいと思いまして､一つ一つタグを書き込んでいるのですが､なかなかうまくいきませんでした。 「スタイルシートだけではうまくいかないのかな？」と考えていましたら、さきほどshigatsuさんからもアドバイスをいただきまして､なんとかうまくいくようになりました。 deagleさんからも、色々とアドバイスをいただきまして本当に有難うございました。今後の勉強の大いなる参考にさせていただきます。
- shigatsu
- ベストアンサー率26% (511/1924)
z-index という属性があります。これは重ね合わせ時の 前後関係を指定するもので、レイヤーごとに前後関係を 指定できます。 z-index:number 数が大きいほど前になります。 それと font-family ですが、ＩＥでは正しく反映され るようですが、ＮＮでは全滅みたいです。 スペースを含むフォント名の指定には二重引用符などで 囲みましょう。
補足
画像が黒っぽいので気が付かなかったのですが､テキストが画像の裏に隠れるのではなく､重ね合わさっているようです。z-indexを使っても､重なった状態は一緒のようです。 画像を左において､テキストの開始位置を指定してやれば､スタイルシートで出来るのですが、どうしても､画像を右において､テキストが画像の手前で折り返すように配置できないものでしょうか？ font-familyも､どうしても反映されておりません。使っているのはIE5です。二重引用符で囲ってみたのですが・・・ どこかでタグの記入が悪かったのでしょうか？
表示する順番を変えてみてください。 スタイルシートでは、重なる物に関しては上から順に処理しますので、当然、ＨＴＭＬファイルの「上に書いてある物が優先順位が低く」なります。 z-indexプロパティを変更する手もあるんですが、これはＮＮが対応できないのでおすすめできません。 また、下記のページは俺の、ゲストさんのイラストを掲載するページですが、スタイルシートとJavaScriptをばりばり使いまくってますんで、参考にしてみてください。
補足
いまだ解決には至っておらず､悪戦苦闘中です。 教えていただいたURLにも行って見たのですが､スタイルシートがやっと分かり始めた程度で、JavaScriptについてはまだまだ理解の範囲を超えております。 ただURLのページの最後にあるような｢表」を使えば一応はテキストと画像を配置できるのですが､どうしても今回はスタイルシートを使って画像を右に固定し､テキストはその手前で折り返すように配置したいのです。出来れば､更なるアドバイスをいただけたら幸いです。
お礼
すばらしい回答を有難うございました。 教えていただいたURLでソースを参考にしてやってみたら見事に制御できました｡これまで散々悩まされていたのがうそのようにうまくいったので思わず拍手をしてしまいました。私にとってはそれぐらい感激的だったのです。 これで大きな山を越せたような気がして今は最高の気分です｡なんだか今日はとてもいいことがありそうです。 今回はお世話になりまして､まことに有難うございました。