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

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

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

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

632閲覧

レスポンシブデザインで背景画像をちゃんと表示したい

kyohaya

総合スコア20

CSS3

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/10/20 06:18

背景画像をレスポンシブデザインに対応させたくてbackgroundプロパティを指定したのですがうまくいきません。
そうすればちゃんと表示できるのでしょうか?
表示させたい画像
イメージ説明
イメージ説明

私のパソコンの画面
イメージ説明
イメージ説明

コード

<!doctype html> <html lang="ja"> <head> <!--メディアクエリ--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--reset.css--> <link rel="stylesheet" href="reset.css"> <!--css--> <link rel="stylesheet" href="css/stylesheet.css"> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <!--fontawesome--> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="no2.js"></script> <!--webフォント--> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet"> <title>Airbnbの模写</title> </head> <body> <header> <div class="header-btn"> <div class="search"> <i class="fas fa-search"></i> <p>探す</p> </div><!--/.search--> </div><!--/.header-btn--> <div class="nav"> <ul> <li>ホストをはじめる</li> <li>ヘルプ</li> <li>登録する</li> <li>ログイン</li> </ul> </div><!--/.nav--> </header> <div class="top-content" id="top"> <p class="fixed-bar"> <i class="far fa-comment-dots fa-2x"></i> <span>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。 アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </span> </p><!--/.fixed-bar--> <div class="container"> <h1>旅を贈ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <a href="#">ギフトカードを登録</a> </div><!--/.container--> </div><!--/.top-content--> <div class="main"> <div class="container"> <h1>いつも完璧な贈りもの</h2> <div class="menu"> <div class="gift"> <i class="far fa-envelope fa-3x"></i> <p>簡単に使える</p> <p>ギフトカードはメールで届きます。Airbnbア<br>カウントへのギフト登録も超かんたん。</p> </div><!--/.gift--> <div class="stopwatch"> <i class="fas fa-stopwatch fa-3x"></i> <p>有効期限なし</p> <p>Airbnbギフトカードは無期限。だから友達も<br>時間をかけて旅をプランできます。</p> </div><!--/.stopwatch--> <div class="globe"> <i class="fas fa-globe fa-3x"></i> <p>忘れられない旅</p> <p>お家は100万件以上あるので、ずっと住みた<br>いと憧れていた街の暮らしも叶います。</p> </div><!--/.globe--> </div><!--/.menu--> </div><!--/.container--> </div><!--/.main--> <footer> <div class="container"> <div class="top-contents"> <div class="airbnb"> <p>Airbnb</p> <ul> <li><a href="#">採用情報</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">ポリシー</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">ダイバーシティ&ビロンギング</a></li> <li><a href="#">アクセシビリティ対応<span>新着</span></a></li> <li><a href="#">企業情報</a></li> </ul> </div><!--/.airbnb--> <div class="recommend"> <p>スタッフのおすすめ</p> <ul> <li><a href="#">信頼&安全</a></li> <li><a href="#">お友達紹介クーポン</a></li> <li><a href="#">Airbnb Citizen</a></li> <li><a href="#">出張</a></li> <li><a href="#">アクティビティ<span>新着</span></a></li> <li><a href="#">Airbnbmag</a></li> </ul> </div><!--/.recommend--> <div class="hosting"> <p>ホスティング</p> <ul> <li><a href="#">ホストになる理由</a></li> <li><a href="#">おもてなしの心</a></li> <li><a href="#">ホストの責任</a></li> <li><a href="#">コミニュニティセンター</a></li> <li><a href="#">体験を掲載<span>新着</span></a></li> <li><a href="#">オープンホーム</a></li> </ul> </div><!--/.hosting--> <div class="sns"> <div class="logo"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div><!--/.logo--> <ul> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!--/.sns--> </div><!--/.top-contents--> <div class="bottom-contents"> <div class="footer-left"> <a href="#">Airbnb Grobal Services Limited</a> <a href="#">観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> <a href="#">© 2019 Airbnb, Inc. All rights reserved.</a> </div><!--/.footer-left--> <div class="footer-right"> <div class="btn">日本語</div><!--/.btn--> <div class="btn">JPY-¥</div><!--/.btn--> </div> </div><!--/.bottom-contents--> </div><!--/.container--> </footer> </body> </html>
/*共通部分*/ a{ text-decoration:none; } li{ list-style:none; } body { margin: 0px; } /*ヘッダー*/ header{ height:60px; padding:25px 20px 0 80px; display:flex; justify-content:space-between; } .search{ width:458px; height:46px; border:1px solid #EBEBEB; box-shadow:0 2px 4px #EBEBEB; } .search .fas{ padding:15px 0 15px 20px; } .search p{ display:inline; color:#767676; } .nav ul{ display:flex; } .nav li{ margin-left:20px; color:#484848; font-size:14px; font-weight:bold; } /*固定されたバーがある所*/ #top { background-image:url(img1.jpg); background-size:contain; min-height:100vh; } .fixed-bar{ position:fixed; z-index:16; margin-top:0; width:100%; font-size:14px; height:50px; padding-top:20px; background-color:#C2E4E6; color:#484848; text-align:center; } .fixed-bar .far{ display:inline-block; margin-right:10px; vertical-align:middle; } .fixed-bar span{ vertical-align:top; } .top-content h1{ padding-top:220px; font-size:46px; font-weight:bold; color:#fff; } .top-content>.container>p{ font-size:18px; color:#fff; } .top-content>.container>a{ font-size:16px; color:#484848; background-color:#fff; padding:10px 20px; display:inline-block; border-radius:5px; } /*「いつも完璧なおくりものの所」*/ .main{ padding-top:20px; } .menu{ display:flex; justify-content:space-around; } .main h1{ text-align:center; } .gift,.stopwatch,.globe{ text-align:center; } .gift .far,.stopwatch .fas,.globe .fas{ color:#307B87; } .gift>p:nth-child(2),.stopwatch>p:nth-child(2),.globe>p:nth-child(2){ font-size:18px; color:#484848; font-weight:bold; } .gift>p:nth-child(3),.stopwatch>p:nth-child(3),.globe>p:nth-child(3){ font-size:16px; color:#767676; } /*フッター*/ .container{ max-width:1032px; margin:0 auto; } .top-contents{ display:flex; border-bottom:1px solid #EBEBEB; } .top-contents ul{ padding-left:0; font-size:14px; } .top-contents>.sns{ padding-top:10px; } .airbnb{ margin-right:80px; } .recommend,.hosting{ margin-right:120px; } .airbnb>p,.recommend>p,.hosting>p{ font-weight:bold; } .airbnb ul>p{ display:inline-block; } .airbnb>ul>li>a,.recommend>ul>li>a,.hosting>ul>li>a{ color:#767676; display:block; } .airbnb span,.recommend span,.hosting span{ display:inline-block; padding:0 2px; border-radius:6px; background-color:#2A6A70; font-size:12px; color:#fff; margin-left:10px; } .sns a{ color:#767676; margin-right:20px; } .sns li{ color:#767676; } .bottom-contents{ display:flex; justify-content:space-between; padding:20px 0 40px 0; } .footer-left{ font-size:14px; } .footer-left a{ display:block; color:#767676; } .footer-right{ color:#767676; font-size:14px; } .footer-right .btn{ display:inline-block; padding:7px; border:1px solid #F2F2F2; margin-top:10px; margin-left:10px; } .footer-right .btn:hover{ background-color:#767676; } /*メディアクエリ*/ @media(max-width:559px){ /*ヘッダー*/ header{ padding-left:10px; } header>.nav{ display:none; } .fixed-bar{ height:100px; } .fixed-bar span{ } /*フッター*/ .top-contents{ display:none; } }

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

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

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

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

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

naomi3

2019/10/20 08:55

「no2.js」というJavaScriptを用いられているようですが、JavaScriptがありません。
kyohaya

2019/10/20 09:00

解答ありがとうございます、まだjQueryを実装していないので記述はありません。
naomi3

2019/10/20 09:06

わかりました。 cssへのリンク(3本)が切れているのも、未使用でしょうか?
kyohaya

2019/10/20 09:09

stylesheet.cssのみ使っていて質問で貼ってあるコードです。
naomi3

2019/10/20 09:17

わかりました。 background-size:contain; ではなく、固定長にすればできそうですが、「ちゃんと表示」したことにならないのですか?
退会済みユーザー

退会済みユーザー

2019/10/20 14:24

まだ、解決済みになってはいなかったのですが、まだ問題点があるという事でしょうか? 高評価だけを押すのではなく、試した所どのようになったのかや〜を試してみたなど、コメントしてくださると、解決済みへの近道になるのではないでしょうか? 今、あなたが何をしたく。どのような問題が発生しているかは、問題提示してくれなければわかりません。
guest

回答3

0

CSS

1#top { 2 background:url(img1.jpg) no-repeat; 3 background-size:cover; 4 min-height:100vh; 5}

backgrouns-sizeの「contain」は、指定した範囲に背景画像をおさめる指定です。
background-sizeの「cover」は、指定した範囲をカバーするように背景画像を伸縮させる指定です。

投稿2019/10/21 09:40

m_o

総合スコア107

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

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

0

直接の回答ではありませんが、、

まず、コードの掲載は、Mark downでの表記が推奨されていますので、そちらを使用してみるとより見やすい質問となり、回答がえやすいと思います。

回答

掲載してもらった画像を見る限り、何回も背景画像が表示していますね。これは、以下のコードで繰り返しを禁止することができます。

css

1background-repeat: no-repeat;

background-repeatプロパティは、背景画像のリピートの仕方を指定する際に使用します。

投稿2019/10/20 09:24

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

レスポンシブデザインの場合、画像のうまく表示されないミスは高さの指定だと思います。
少なくとも私の経験上はそうでした・・。
なのでheightの指定をやめてpadding-topの計算式を使うと良いですよ。
スマホにもいろんな横幅がありますが、この計算式ならどんな横幅にもぴったりはまります。

なんでそうなるの?って考えるよりかは、まずはおまじないのように使ってみるのが良いと思います^^

css

1 height: 0 2 background: url(画像パス) no-repeat 3 background-size: contain 4 padding-top: (表示画像の高さの数値 / 表示画像の幅の数値)*100% ←を計算した数値(%)を入力

投稿2019/10/21 09:35

takamiii_158cm

総合スコア84

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

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

kyohaya

2019/10/22 05:54 編集

回答ありがとうございます。 試したら画像がなくなったのですがどうすればいいでしょうか? 記述はこうしました。 #top { height: 0; background: url(img1.jpg) no-repeat; background-size: contain; padding-top: (900px/1480px)*100%; }
退会済みユーザー

退会済みユーザー

2019/10/22 06:33 編集

()内は数値のみとtakamiii_158cmさんは書いています。 よって、900pxなら900と数値のみを書くべきです。 よって、padding-top: (900/1480)*100%;  にしてはどうでしょうか? --- 合わせて) 画像パスは的確なものでしょうか?  -画像パスが違うと勿論表示されません。
takamiii_158cm

2019/10/23 07:16

わかりにくくですみません; 計算した「答え」を書くので、 padding-top: (900px/1480px)*100%; ↓ padding-top: 60.81%; と記述します。 あとは画像パスが合っているかご確認をお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問