HTML・CSS初心者です。
フレームワークでの作成がレスポンシブデザインには良いと聞き、作成予定のサイトもシンプルなデザインのためSkeletonをチョイスしました。
Skeleton base templateをそのまま利用し、適宜変更していく方法で作成しています。
トップのhero部分のsectionの高さを変えたいのですが、うまくいきません。
基本的には http://getskeleton.com/examples/landing/
と同じ構成で、ワンカラム、画面いっぱいに画像を表示させる縦に長いランディングページを作成します。
section heroの下にintro や他のsection4〜5個もあるのですが、それらの高さは変わりました。
css
1.section { 2 text-align: center; 3 height: 100vh; 4}
これだけはトップのsectionの高さは変わらないのでしょうか?
html
1 2・・・ 3 <div class="section hero"> 4 <div class="container"> 5 <div class="one-half column phone"> 6 <img class="phone" src="images/iphone.png"> 7 </div> 8 <div class ="right-contents"> 9 <div class="one-half column"> 10 <h1 class="hero-heading">ヘッドコピー</h1> 11 </div> 12 <div class="three columns left-message"> 13 <h6 class="hero-subcopy">テキストテキスト</h1> 14 <a class="button button-primary" href="#">利用はこちらから</a> 15 </div> 16 <div class="three columns right-message"> 17 <h4 class="hero-subcopy">サブコピー的なもの</h1> 18 <img class="qr" src="images/qr_sample.png"> 19 </div> 20 </div> 21 </div> 22 </div> 23・・・ 24
css
1 2 3/* NOTE 4ベースが10pxなので1.5rem =15px) */ 5 6/* Shared 7–––––––––––––––––––––––––––––––––––––––––––––––––– */ 8.button { 9 border-radius: 100px; 10} 11/* Sections 12–––––––––––––––––––––––––––––––––––––––––––––––––– */ 13.section { 14 text-align: center; 15 height: 100vh; 16} 17/* Hero 18–––––––––––––––––––––––––––––––––––––––––––––––––– */ 19.phone { 20 max-width: 80%; 21 margin: 3rem auto -12rem; 22} 23 24.hero { 25 background-image: url('../images/top_catch.png'); 26 no-repeat fixed; 27 background-size: cover; 28 color: #25C7AD; 29} 30 31.hero-subcopy { 32 top:10rem; 33} 34 35.hero-heading { 36 position: relative; 37} 38 39 40 41/* Intro 42–––––––––––––––––––––––––––––––––––––––––––––––––– */ 43 44 45 46 47/* Bus Position 48–––––––––––––––––––––––––––––––––––––––––––––––––– */ 49.bus-position{ 50 background-image: url('../images/buses.jpg'); 51 background-size: cover; 52} 53 54/* Bus Route 55–––––––––––––––––––––––––––––––––––––––––––––––––– */ 56 57 58 59/* Bus Operation Status 60–––––––––––––––––––––––––––––––––––––––––––––––––– */ 61.bus-operation-status{ 62 background-color: #AEFFEE; 63} 64 65/* Any Device 66–––––––––––––––––––––––––––––––––––––––––––––––––– */ 67.devices { 68 display:block; 69 margin-left: auto; 70 margin-right: auto; 71} 72 73.center { 74 text-align: center; 75} 76 77 78/* Footer 79–––––––––––––––––––––––––––––––––––––––––––––––––– */ 80.footer { 81 background-color: #17C0FF; 82 margin-bottom: 10px; 83 padding: 8rem 0 7rem; 84 text-align: center; 85} 86 87p.footer-operation{ 88 color:white; 89} 90p.footer-inquiry{ 91 color:white; 92} 93p.footer-mail{ 94 color:white; 95} 96 97 98 99/* Media 100–––––––––––––––––––––––––––––––––––––––––––––––––– */ 101 102@media (min-width: 400px) { 103 .phone { 104 position: absolute; 105 top: 0.5rem; 106 left: -1rem; 107 max-height: 362px; 108 z-index: 3; 109 } 110 111 .qr { 112 max-height:50px; 113 } 114 115} 116 117/* Bigger than 550 */ 118@media (min-width: 550px) { 119 .section { 120 padding: 12rem 0 11rem; 121 } 122 .hero { 123 padding-bottom: 12rem; 124 text-align: left; 125 height: 165px; 126 } 127 .phone { 128 position: absolute; 129 top: 0.5rem; 130 left: -1rem; 131 max-height: 362px; 132 z-index: 3; 133 } 134 .phone + .phone { 135 top: -6rem; 136 display: block; 137 max-width: 73.8%; 138 left:2rem; 139 z-index: -7; 140 max-height: 640px; 141 } 142 .hero-heading { 143 font-size: 3rem; 144 margin-top: 4rem; 145 } 146 147 .qr { 148 max-height:80px; 149 } 150} 151 152 153 154/* Bigger than 750 */ 155@media (min-width: 750px) { 156 .hero { 157 height: 190px; 158 } 159 .hero-heading { 160 font-size: 4.4rem; 161 } 162 .section { 163 padding: 14rem 0 15rem; 164 } 165 .hero { 166 padding: 16rem 0 14rem; 167 } 168 169 .phone { 170 top: -8rem; 171 left: 2rem; 172 max-height: 720px; 173 } 174 175 .qr { 176 max-height:120px; 177 } 178} 179 180/* Bigger than 1000 */ 181@media (min-width: 1000px) { 182 .section { 183 padding: 20rem 0 19rem; 184 } 185 .hero { 186 padding: 22rem 0; 187 } 188 .hero-heading { 189 font-size: 5.0rem; 190 right: -5rem; 191 } 192 .phone { 193 top: -11rem; 194 max-height: 990px; 195 left:5rem; 196 } 197 198 .qr { 199 max-height:140px; 200 } 201 202} 203
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/10 08:51 編集
2016/08/10 16:40