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

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

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

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

HTML5

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

1911閲覧

Skeltonでトップのキャッチ画像を画面いっぱいにひょうじするには?

masaakitsuyoshi

総合スコア102

CSS3

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

HTML5

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/08/15 05:36

Skeletonを使用してランディングぺージを作成しています。
トップのキャッチ画像部分で、元画像を画面いっぱいに表示したいのですが、サイズがうまく合いません。

background-size:cover;
ではだめなのでしょうか。

変えたい部分

section heroの img "phone"

やったこと

coverしたり
width,height100%にしたりした

上記試しましたがサイズ、下と右の方が切れていて、うまくあっていません。

ウィンドウサイズを横750以下にすると、縦はちょうどいい感じに表示されているようです。

原因わかる方お教え頂けますと幸いです。

css

1.hero { 2 background-image: url('../images/top_catch.png'); 3 background-repeat: no-repeat; 4 background-size: cover; 5 display: block; 6 width: 100%; 7 height: 100%; 8 color: #25C7AD; 9}

参考

html

1・・・ 2 <div class="section hero"> 3 <div class="container"> 4 <div class="one-half column phone"> 5 <img class="phone" src="images/iphone.png"> 6 </div> 7 <div class ="right-contents"> 8 <div class="one-half column"> 9 <h1 class="hero-heading">ヘッドコピー</h1> 10 </div> 11 <div class="three columns left-message"> 12 <h6 class="hero-subcopy">テキストテキスト</h1> 13 <a class="button button-primary" href="#">利用はこちらから</a> 14 </div> 15 <div class="three columns right-message"> 16 <h4 class="hero-subcopy">サブコピー的なもの</h1> 17 <img class="qr" src="images/qr_sample.png"> 18 </div> 19 </div> 20 </div> 21 </div> 22・・・ 23

css

1/* NOTE 2ベースが10pxなので1.5rem =15px) */ 3 4/* Shared 5–––––––––––––––––––––––––––––––––––––––––––––––––– */ 6.button { 7 border-radius: 100px; 8} 9/* Sections 10–––––––––––––––––––––––––––––––––––––––––––––––––– */ 11.section { 12 text-align: center; 13 height: 70vh; 14} 15.section.hero { 16 box-sizing: border-box; 17 height:60vh 18} 19/* Hero 20–––––––––––––––––––––––––––––––––––––––––––––––––– */ 21 22.hero { 23 background-image: url('../images/top_catch.png'); 24 background-repeat: no-repeat; 25 background-size: cover; 26 display: block; 27 width: 100%; 28 height: 100%; 29 color: #25C7AD; 30} 31 32.hero.hero-subcopy { 33 top:10rem; 34} 35 36.hero.hero-heading { 37 top:10rem; 38} 39 40 41 42/* Intro 43–––––––––––––––––––––––––––––––––––––––––––––––––– */ 44 45 46 47 48/* Bus Position 49–––––––––––––––––––––––––––––––––––––––––––––––––– */ 50.bus−position { 51 display: block; 52 background-image: url('../images/buses.png'); 53 background-size: cover; 54} 55.big-phone { 56 display: block; 57 float: right; 58 59} 60.bus-position.contents { 61 display: block; 62 float: left; 63 64} 65 66/* Bus Route 67–––––––––––––––––––––––––––––––––––––––––––––––––– */ 68 69 70/* Bus Operation Status 71–––––––––––––––––––––––––––––––––––––––––––––––––– */ 72.bus-operation-status{ 73 background-color: #AEFFEE; 74} 75 76/* Any Device 77–––––––––––––––––––––––––––––––––––––––––––––––––– */ 78 79.any-device { 80 background-image: url('../images/any_device.png'); 81 background-size: cover; 82} 83.devices { 84 display: block; 85 box-sizing: border-box; 86 top: 0; 87 left: 0; 88 width: 100%; 89 height: 100%; 90 91} 92 93 94/* Footer 95–––––––––––––––––––––––––––––––––––––––––––––––––– */ 96.footer { 97 background-color: #17C0FF; 98 margin-bottom: 10px; 99 padding: 8rem 0 7rem; 100 text-align: center; 101} 102 103p.footer-operation{ 104 color:white; 105} 106p.footer-inquiry{ 107 color:white; 108} 109p.footer-mail{ 110 color:white; 111} 112 113 114 115/* Media 116–––––––––––––––––––––––––––––––––––––––––––––––––– */ 117 118@media (min-width: 400px) { 119 .phone { 120 position: absolute; 121 top: 0.5rem; 122 left: -1rem; 123 max-height: 362px; 124 z-index: 3; 125 } 126 127 .qr { 128 max-height:50px; 129 } 130 131} 132 133/* Bigger than 550 */ 134@media (min-width: 550px) { 135 .section { 136 padding: 12rem 0 11rem; 137 } 138 .hero { 139 padding-bottom: 12rem; 140 text-align: left; 141 height: 165px; 142 } 143 .phone { 144 position: absolute; 145 top: 0.5rem; 146 left: -1rem; 147 max-height: 362px; 148 z-index: 3; 149 } 150 .phone + .phone { 151 top: -6rem; 152 display: block; 153 max-width: 73.8%; 154 left:2rem; 155 z-index: -7; 156 max-height: 640px; 157 } 158 .hero-heading { 159 font-size: 3rem; 160 margin-top: 4rem; 161 } 162 163 .qr { 164 max-height:80px; 165 } 166} 167 168 169 170/* Bigger than 750 */ 171@media (min-width: 750px) { 172 .hero { 173 height: 190px; 174 } 175 .hero-heading { 176 font-size: 4.4rem; 177 } 178 .section { 179 padding: 14rem 0 15rem; 180 } 181 .hero { 182 padding: 16rem 0 14rem; 183 } 184 185 .phone { 186 top: -8rem; 187 left: 2rem; 188 max-height: 720px; 189 } 190 191 .qr { 192 max-height:120px; 193 } 194} 195 196/* Bigger than 1000 */ 197@media (min-width: 1000px) { 198 .section { 199 padding: 20rem 0 19rem; 200 } 201 .hero { 202 padding: 22rem 0; 203 } 204 .hero-heading { 205 font-size: 5.0rem; 206 right: -5rem; 207 } 208 .phone { 209 top: -11rem; 210 max-height: 990px; 211 max-width: 468px; 212 left:5rem; 213 } 214 215 .qr { 216 max-height:140px; 217 } 218 .big-phone { 219 max-height:1091px; 220 221 222 } 223 224}

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

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

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

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

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

guest

回答2

0

↓最後のセミコロンが足りません。

.section.hero { box-sizing: border-box; height:60vh }

↓このセレクタの書き方だと、.hero-subcopyのclassを持った.heroになってしまうので、スタイルが効きません。

.hero.hero-subcopy { top:10rem; } .hero.hero-heading { top:10rem; }

全体的によくチェックしないと、組み方が悪いのか、ケアレスミスで効いていないだけなのかわからないので、まずは正確に記述できるようにしたほうが良いですよ。

投稿2016/08/15 07:12

NatsumiOki

総合スコア1298

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

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

masaakitsuyoshi

2016/08/18 05:46

ご回答ありがとうございます。 ケアレスミス多いですね。。。
guest

0

自己解決

下記でできた。

/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;

入れるか入れないかお好み

CSS

1.hero { 2 /* 画像ファイルの指定 */ 3 background-image: url(images/background-photo.jpg); 4 5 /* 画像を常に天地左右の中央に配置 */ 6 background-position: center center; 7 8 /* 画像をタイル状に繰り返し表示しない */ 9 background-repeat: no-repeat; 10 11 /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ 12 background-attachment: fixed; 13 14 /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ 15 background-size: cover; 16 17 /* 背景画像が読み込まれる前に表示される背景のカラー */ 18 background-color: #464646; 19}

リンク内容

投稿2016/08/18 05:48

編集2016/08/18 05:49
masaakitsuyoshi

総合スコア102

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問