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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

308閲覧

isaraのサイトを模写して勉強中です。background-imageの縮小の仕方について

knight1220

総合スコア23

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/22 06:39

編集2019/05/22 08:43

background-imageを、レスポンシブ対応したく自分なりに調べて試したのですが、isaraのサイトと違う縮小のしかたになりどうすればいいのかがわからず質問させていただきました。(携帯サイズのレスポンシブは違う画像を使うのでできるのですがパソコン画面サイズ~中間サイズに移行する時の縮小の仕方がわかりません)
自分が書いたコードを添付します。

html

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> 10 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 11 <link rel="stylesheet" href="./css/stylesheet.css"> 12 <link rel="stylesheet" href="./css/media.css"> 13 <title>iSara 模写</title> 14 </head> 15 <body> 16 <header> 17 <!--navigation--> 18 <nav> 19 <img class="img-pc" src="img/isaralogo.png" alt="" > 20 <p>バンコクのノマドエンジニア育成講座</p> 21 <div class="ml-auto nav-btn"> 22 <a href="#contact" class="btn-contact text-center"><span class="btn-text">お問い合わせ / </span>資料請求<span class="btn-text">はこちら</span></a> 23 <img class="img-sp" src="img/form.png" alt="" width="20px" height="24.5px"> 24 </div> 25 </nav> 26 </header> 27 <!--top--> 28 <section> 29 <div class="container-fulid"> 30 <div class="top "> 31 <div class="top-container text-center"> 32 <p class="top-text">プログラミングで</p> 33 <p class="top-a top-text">人生の安定を手にいれよう</p> 34 <img src="img/isaralogolarge.png" alt="" width="310px" height="110px"> 35 <p class="top-b">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p> 36 37 </div> 38 </div> 39 </div> 40 </section> 41 <!--intro--> 42 <section> 43 <div class="intro-container"> 44 <div class="intro text-center"> 45 <div class="text-a"> 46 <p>まずは20日間で、<br>月10万円稼げるスキルをてにいれよう</p> 47 <p><span class="text-span">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</span></p> 48 </div> 49 <a href="#contact" class="intro-btn">お問い合わせ&資料請求はこちら</a> 50 <div> 51 <div class="text-b"> 52 <p>第4期生:2018年12月3日~2018年12月22日 *締め切りました</p> 53 <p>第5期生:2019年4月8日~2019年4月27日 *締め切りました</p> 54 <p>第6期生:資料請求受付中です</p> 55 </div> 56 </div> 57 </div> 58 </div> 59 </section> 60<!--freedom--> 61 <section> 62 <div class="freedom"> 63 <div class="freedom-container text-center"> 64 <div class="box-wrapper"> 65 <div class="box1"></div><p class="free-1">エンジニアとして本当の自由を手に入れるためには?</p> 66 <div class="box2"></div> 67 </div> 68 <p class="free-2">エンジニア需要の高まりに伴い、プログラミングスクール 69 が増えています。<br>しかしそこでの学習の先は、提携して決められた就職先に就職すること。</p> 70 <p>これで本当にいいのですか?<br> 71 日本のエンジニアはアメリカと比べて給料が格段に低い。<br> 72 その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。</p> 73 <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br> 74 そこで必要なのが「稼ぐ力」です。</p> 75 </div> 76 </div> 77 </section> 78 79 80 <!-- Optional JavaScript --> 81 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 82 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 83 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 84 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 85 <script> 86 $(function(){ 87 'use strict'; 88 $('[data-toggle="tooltip"]').tooltip(); 89 }); 90 </script> 91 </body> 92</html>

css

1/*navigationbar*/ 2body{ 3 font-family: "Meiryo"; 4 margin: 0; 5 padding: 0; 6} 7 8header{ 9 width:100%; 10 height:76px; 11 display:flex; 12 position: fixed; 13 top:0; 14 z-index: 10; 15 background-color: #fff; 16} 17 18nav{ 19 width:1170px; 20 margin: 0 auto; 21 display:inline-flex; 22 line-height: 76px; 23 24 background-color: #fff; 25} 26 27.img-pc{ 28 margin-top:14px; 29 width:128px; 30 height:45px; 31} 32 33.btn-contact{ 34 background-color: #d84940; 35 border-radius: 50px; 36 padding:11px 45px; 37 color: white; 38 opacity: 0.8; 39 text-decoration: none; 40 font-size: 14px; 41 font-weight: 300; 42 letter-spacing:1px; 43} 44 45.btn-contact:hover{ 46 opacity:1.0; 47 text-decoration: none; 48 color: white; 49} 50 51nav p{ 52 font-size: 14px; 53 font-weight: 600; 54 padding-top: 8px; 55 letter-spacing:1.5px; 56 padding-left: 8px; 57} 58 59.img-sp{ 60 display: none; 61} 62 63/*top*/ 64.top{ 65 background-image: url(../img/main.jpg); 66 background-size: cover; 67 background-position:center; 68 width: 100%; 69 70} 71 72.top-container{ 73 margin:0 auto; 74 width:100%; 75 letter-spacing: 0.5px; 76 padding:170px 0px 90px 0px; 77} 78 79.top-a{ 80 padding-top: 10px; 81} 82 83.top-container img{ 84 margin-top: 10px; 85 margin-bottom:40px; 86} 87 88.top-text{ 89 font-size: 28px; 90 font-weight: 600; 91 margin:0; 92} 93 94.top-b{ 95 font-size: 20px; 96 font-weight: 600; 97 98} 99 100/*intro*/ 101.intro-container{ 102 background-color: #ebb94d; 103 color: #fff; 104 font-weight: 600; 105} 106 107.text-span{ 108 color: #c7254e; 109 background-color: #fff; 110 border-radius: 5px; 111 padding: 1px; 112 letter-spacing:0; 113 font-family: "Consolas"; 114} 115 116.intro-btn{ 117 background-color: #d84940; 118 border-radius: 50px; 119 padding: 33px 300px; 120 font-size: 1.8vw; 121 color: #fff; 122 opacity: 0.7; 123} 124.intro-btn:hover{ 125 text-decoration:none; 126 color: #fff; 127 opacity: 1.0; 128} 129 130.text-a{ 131 padding-top: 30px; 132 padding-bottom: 70px; 133 font-size: 1.25vw; 134 letter-spacing:3px; 135} 136 137.text-b{ 138 padding-bottom: 40px; 139 padding-top: 100px; 140 font-size: 1.3vw; 141} 142 143.text-b p{ 144 padding-bottom: 20px; 145 font-size: 21px; 146 letter-spacing:3px; 147} 148 149/*freedom*/ 150.freedom{ 151 background-image: url("../img/introbottom.jpg"); 152 background-size: cover; 153 padding-top: 40px; 154 155 height:1000px; 156} 157 158 159 160.box-wrapper{ 161 position:relative; 162 padding: 15px 0px; 163 margin: 0 auto; 164 width:800px; 165 max-width: 80%; 166 167} 168 169.free-1{ 170 font-size: 28px; 171 font-weight: 600; 172 padding-top: 25px; 173 margin-left:20px; 174 margin-right:20px; 175} 176 177.box1{ 178 height:50px; 179 width:50px; 180 border-left:4px solid #ebb94d; 181 border-top:4px solid #ebb94d; 182 position: absolute; 183 left:0px; 184 185} 186 187.box2{ 188 height:50px; 189 width:50px; 190 border-right:4px solid #ebb94d; 191 border-bottom:4px solid #ebb94d; 192 position:absolute; 193 right:1%; 194 top:44%; 195} 196 197.freedom-container{ 198 font-weight: 300; 199 font-size: 20px; 200 letter-spacing: 1px; 201 202} 203 204.free2{ 205 padding-top: 20px; 206} 207 208 209 210@media(max-width: 790px){ 211 .box-wrapper{ 212 position:relative; 213 padding: 5px 20px; 214 margin: 0 auto; 215 width:80%; 216 max-width: 80%; 217 218 } 219 .top { 220 background-image: url(../img/mainsp.jpg); 221 height: 312px; 222 } 223 .top-container p { 224 font-weight: normal; 225 font-size: 10px; 226 } 227 228 .free-1{ 229 font-size: 18px; 230 font-weight: 600; 231 padding: 25px 0; 232 margin:0 auto; 233 width: 60%; 234 235 } 236 237 .box1{ 238 height:50px; 239 width:50px; 240 border-left:4px solid #ebb94d; 241 border-top:4px solid #ebb94d; 242 position: absolute; 243 left:0px; 244 245 } 246 247 .box2{ 248 height:50px; 249 width:50px; 250 border-right:4px solid #ebb94d; 251 border-bottom:4px solid #ebb94d; 252 position:absolute; 253 right:1%; 254 top:44%; 255 } 256}

イメージ説明isaraのサイトの一番最初の

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

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

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

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

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

masshu

2019/05/22 07:37 編集

どう違うのかがイメージできていないのでなんともですが… .topにheightの値を指定してもダメでしょうか?
knight1220

2019/05/22 08:13

すみません。情報不足過ぎました。 説明が難しいのですが、見本の画像と自分のを見比べると画像の始まりの位置高さがちがうと言いますか、パソコンが写ってる画像なのですが見本はパソコンがすべて写っているのですが、自分で作成した方ではパソコンの上部が少しきれているっといった感じです。説明へたですみません。 googleの拡張機能のルーラー(目分量)で見本のheightをはかり、入力したのですが変わりませんでした。
masshu

2019/05/22 08:27 編集

スクショ等を追加していただくと情報が伝わりやすいかなーと思います。 container-fulid にヘッダーで被る分のpadding-topを入れるのはいかがでしょう?
masshu

2019/05/22 09:02 編集

スクショの追加ありがとうございます。ちょっと見切れているのはスルーするとして やっぱりヘッダー分上に上がってる気がするのでpadding-topを試してみてはいかがでしょうか?
knight1220

2019/05/22 18:03

ご指摘の通りcontainer-fulidにpadding-topを指定してheightをしてあげることで無事に解決できました。 また、最大サイズの時は見た目は一緒なのですが、縮小した際に途中で高さだけずれるという症状もあったのですが、max-heightを指定することで解決できました。 background-size:cover;の考え方が間違ていることが原因でした。 masshuさん、情報不足でわかりにくい質問、初歩的な質問にも関わらず親身になって答えてくださりありがとうございました。
masshu

2019/05/23 00:23

解決できたようで良かったですー! したら回答欄に入れときますね〜
guest

回答1

0

ベストアンサー

container-fulid にヘッダーで被る分のpadding-topを入れるのはいかがでしょう?

投稿2019/05/23 00:23

masshu

総合スコア83

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問