• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:【CSS】画像を重ねたいのですが動きません)

CSSで画像重ねをする際、影の画像が動かない問題

このQ&Aのポイント
  • ウェブサイトでpositionを使って、画像を重ねたいが、影の画像が動かない問題に遭遇しています。
  • 他のスタイルは読み込めているため、CSSのインポートエラーではないと思われます。
  • 解決策がわからず、二時間ほど困っています。助けていただけると幸いです。

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

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.3

kyabochaさんのcssは、考え方はある意味間違っていますが、記述はほぼ合っています。 cssの余分なスペースを取ると、思った通りになると存じます。つまり、プロパティの前のスペースに、余計な物が入り込んでいるため解釈されていないだけです。スペースは削除するかtabか「半角スペース」に置き換えてみてください。それと、その記述だと、影が上に乗る気が。透明gifで問題ないのですかね? 次に間違っている部分ですが、html+cssでは、装飾的なことはcssを使い、htmlには入れないという基本理念があります。ですので、影をhtmlに入れるのは、間違いだと思います。私ならこんな感じで影を付けると思います。こっちだと、影はgifでなくても、jpgでも問題なく使用できます。 <div class="staffphoto"> <img src="写真.jpg" width="160" border="0"> </div> .staffphoto img{ background:url(影.gif) no-repeat 5px 5px; padding:0 5px 5px 0; }

kyabocha
質問者

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。 丁寧なご案内ありがとうございます。なるほど~、そういう影の付け方もあるんですね!ちょっとやってみます。とても勉強になりました!!BAにさせて頂きます。

その他の回答 (2)

  • totomac
  • ベストアンサー率53% (53/99)
回答No.2

CSSで影を付けるという方法もありますよ。 例えば、 http://www.htmq.com/css3/box-shadow.shtml

参考URL:
http://www.htmq.com/css3/box-shadow.shtml
kyabocha
質問者

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。 ご案内ありがとうございます。CSSで影をつけられると楽ちんですね!ただ、CSS3はIE8以下だと対応できない(?)と書いてあるサイトもあり、そこらへんの対応は素人の私には難しそうです・・・・。早く古いバージョンのブラウザーがなくなってくれるといいのですが。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) の[DATA]でHTMLを W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) でスタイルシートをチェックしてみる。 Firebug( https://addons.mozilla.jp/firefox/details/1843 )で、適用状況を確認する。

kyabocha
質問者

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。 ご案内ありがとうございます。いろんなチェックサービスがあるんですね。勉強になります。

関連するQ&A

専門家に質問してみよう