スマホ用の見出しが表示されなくなる不具合
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
はじまして、質問させていただきます。
現在、あるサイトをレスポンシブにて運営しているのですが、スマホで観覧したときに、左端の見出し画像が途切れてしまいます。
もし原因がわかるのでしたら、教えて頂けると幸いです。
下記が、タグになります。
HTMLタグ
<h3 class="spam">見出し</h3>
CSSタグ
h3.spam {
background: url(画像URL)no-repeat bottom ;
padding:0px 0px 3px 25px;
}
よろしくお願い申し上げます。
みく
現在、あるサイトをレスポンシブにて運営しているのですが、スマホで観覧したときに、左端の見出し画像が途切れてしまいます。
もし原因がわかるのでしたら、教えて頂けると幸いです。
下記が、タグになります。
HTMLタグ
<h3 class="spam">見出し</h3>
CSSタグ
h3.spam {
background: url(画像URL)no-repeat bottom ;
padding:0px 0px 3px 25px;
}
よろしくお願い申し上げます。
みく
みく さん
10月12日 06時27分
みくさん、こんにちは。
ご記載いただいたコード以外の部分が影響している可能性も０ではありませんが、
おそらくは、背景画像が現在中央に配置させるような設定になっており、画面に表示しきれない部分が切れている可能性が高いように思います。
（スマホの画面よりも、大きな画像ではないでしょうか）
その場合、下記のようにbackgroundにleftを足し、左揃えにすることで、左側が切れなくなると思います。
上記で右側が切れてしまって困る場合は、
h3.spamに下記を入れる手もあります。
このようにすると、画像の全てがボックスの中に収まります。
ただ、画像の大きさによってはかなり小さくなることもあるので、全ての状況で適切ではないこともあります。
ご記載いただいたコード以外の部分が影響している可能性も０ではありませんが、
おそらくは、背景画像が現在中央に配置させるような設定になっており、画面に表示しきれない部分が切れている可能性が高いように思います。
（スマホの画面よりも、大きな画像ではないでしょうか）
その場合、下記のようにbackgroundにleftを足し、左揃えにすることで、左側が切れなくなると思います。
h3.spam {
background: url(img/column_bg.gif) no-repeat bottom left;
padding:0px 0px 3px 25px;
}
background: url(img/column_bg.gif) no-repeat bottom left;
padding:0px 0px 3px 25px;
}
上記で右側が切れてしまって困る場合は、
h3.spamに下記を入れる手もあります。
background-size: contain;
このようにすると、画像の全てがボックスの中に収まります。
ただ、画像の大きさによってはかなり小さくなることもあるので、全ての状況で適切ではないこともあります。
馬場誠 さん
10月12日 11時22分
馬場誠さん
お忙しい中、ご回答ありがとうございます！
無事に表示されました！！
助かりました<m(__)m>
お忙しい中、ご回答ありがとうございます！
無事に表示されました！！
助かりました<m(__)m>
みく さん
10月14日 03時47分
