質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

2回答

2384閲覧

background-image上のテキストがはみ出す

koko122102

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/02/14 05:43

background-image上のテキストが画面の幅を変えると下の画像のようにはみ出してしまいます。テキストを収める方法を知りたいです。

イメージ説明

html

1<body> 2 <header> 3 <div id="header-nav"> 4 <div id="header-left"> 5 <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="" width="115px" height="43px"> 6 <h3>バンコクのノマドエンジニア育成講座</h3> 7 </div> 8 <div id="header-right"> 9 <p>お問い合わせ / 資料請求はこちら</p> 10 </div> 11 <div id="header-right2"> 12 <span><img src="https://isara.life/wp-content/themes/isara_v2/img/form.png" alt="" width="20px" height="25px" ></span> 13 <p><a href="">資料請求</a></p> 14 </div> 15 </div> 16 </header> 17 <main> 18 <div id="main-image1"> 19 <div id="main-content1"> 20 <h2>プログラミングで<br>人生の安定を手にいれよう</h2> 21 <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="" width="317px" height="111px"> 22 <h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3> 23 </div> 24 </div> 25コード

css

1*{ 2 box-sizing: border-box; 3} 4 5#header-nav{ 6 padding:20px 50px; 7 display: flex; 8} 9 10#header-left{ 11 display: flex; 12 align-items:flex-end; 13} 14 15#header-left h3{ 16 color:#333333; 17 font-size: 14px; 18 margin-bottom: 5px; 19 margin-left: 5px; 20} 21 22#header-right{ 23 margin-left: auto; 24 /* border: 1px solid #333333; */ 25 background-color: #da6b64; 26 border-radius: 30px; 27 padding:10px 40px; 28 color:white; 29} 30 31#header-right2{ 32 display: none; 33} 34 35#header-right:hover{ 36 background-color: tomato; 37} 38 39#header-right p{ 40 margin-top: 5px; 41 font-size: 14px; 42} 43 44#main-image1{ 45 width: 100%; 46 height:500px; 47 background-image: url(https://isara.life/wp-content/themes/isara_v2/img/main.jpg); 48 background-repeat: no-repeat; 49 background-size: cover; 50 51 52} 53 54#main-content1{ 55 text-align: center; 56 padding-top: 100px; 57 58} 59 60 61#main-content1 h2{ 62 font-size: 28px; 63 line-height: 50px; 64 letter-spacing: 3px; 65 color:#333333; 66 67} 68 69#main-content1 h3{ 70 font-size: 20px; 71 margin-top: 30px; 72 letter-spacing:3px; 73 color: #333333; 74} 75

css

1@media (max-width:764px){ 2 3 #header-nav{ 4 padding:0px; 5 } 6 7 #header-left{ 8 flex-direction: column-reverse; 9 align-items: stretch; 10 padding:10px 10px; 11 } 12 13 #header-left h3{ 14 font-size: 10px; 15 } 16 17 #header-right{ 18 display: none; 19 } 20 21 #header-right2{ 22 display: block; 23 margin-left: auto; 24 width: 78px; 25 height: 65px; 26 background-color: #da6b64; 27 padding:5px; 28 padding-top:10px; 29 text-align: center; 30 } 31 32 #header-right2 p{ 33 font-size: 12px; 34 color: white; 35 letter-spacing: 2px; 36 } 37 38 #header-right2 p a{ 39 text-decoration: none; 40 color: white; 41 } 42 43 #main-image1{ 44 background-image: url(https://isara.life/wp-content/themes/isara_v2/img/mainsp.jpg); 45 background-size: cover; 46 height: 500px; 47 } 48 49 #main-content1{ 50 padding-top: 0px; 51 } 52コード

試したこと
・余計なmarginやpaddingがないか調べたがなかった。
・ちゃんと#main-image1のなかに#main-content1は収まっていた。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

sp用の背景画像の上縁に白い余白があるから
画像の余白を取り除くか、contentの上方に幅を持たせるかで直す。

投稿2020/02/14 05:53

zushi0905

総合スコア683

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koko122102

2020/02/14 06:36

迅速なご対応ありがとうございます。画像の余白の取り除き方の方法を知らずググってみたのですがでてきませんでした。しかし、レスポンシブ用のCSSの#main-image1の方にbackground-position:bottom;を設定すると、余白がなくなりました。これは正しいやり方と言えるのでしょうか。
zushi0905

2020/02/14 07:43

画像の余白を取り除くとはリソース画像の方を余白の無い物に差し変えるということです。 background-position:bottomは画像の下を基準として表示されるので下基準で背景に使う設計なら問題ないです。そもそもsp用の背景画像に余白が入っているのが何故なのか分からない為、正しいかはわかりません。
guest

0

はじめまして。
CSS拝見しましたが、メディアクエリの書き方が間違ってませんか?
このように書かれてますが、

css

1@media (max-width:764px){ 2

こうだと思います。

css

1@media screen and (max-width: 764px) {

一度試してみてください。

修正

ご指摘通り、メディアクエリの構文は間違っておりませんでした。

いい加減な投稿をしてしまい、失礼しました!

参考:https://developer.mozilla.org/ja/docs/Web/CSS/@media

投稿2020/02/14 06:56

編集2020/02/14 08:38
kei_01011

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zushi0905

2020/02/14 07:52

間違ってはないですよ。テレビとかプリンターとかでの表示も想定してるんじゃないですか? 寧ろ改修後のコードがpxのtypoしてるので動かないので修正してあげたほうがいいかもです。 確かにscreenは付けない方が見ないですけどね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問