実現したいこと
ウィンドウの大きさに関わらず「SPECIAL CONTENTS」というコンテンツのタイトル要素を固定したい
現状の問題点
「SPECIAL CONTENT」というテキストの位置を要素を囲んでいる枠線2本の中心に来るように固定したい
↓iPhone 6/7/8サイズで見た理想の配置レイアウト(「SPECIAL CONTENT」のが上下左右中心に配置されている)
↓iPhone5サイズでのレイアウト(少し上にずれてしまっている)
topの数値をcalcやvhで指定したりもしましたが、うまくいきませんでした。
スマホ、タブレットの画面サイズに関わらず理想のレイアウトのように固定するにはどうすれば良いかご教示いただけるととても助かります。
以下、該当箇所のコードになります。
HTML
1<div class="special_contents_wrap"> 2 <section class="special_contents"> 3 <div class="special_contents_title">SPECIAL CONTENTS</div> 4 <div class="outer_line"> 5 <div class="inner_line"> 6 <div class="swiper-container swiper2"> 7 <div class="special_contents_slider_wrap swiper-wrapper"> 8 <div class="sc sc01 swiper-slide"> 9 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 10 <div class="sc_img"> 11 <img src="image.jpg"> 12 </div> 13 <a href="#" class="cover" target="_blank"></a> 14 </div> 15 <div class="sc sc01 swiper-slide"> 16 <div class="sc_title">テキストテキストテキストテキストテキストテキスト</div> 17 <div class="sc_img"> 18 <img src="image.jpg"> 19 <a href="#" class="cover"></a> 20 </div> 21 </div> 22 </div> 23 </div> 24 </div> 25 </div> 26 </section> 27 <div class="swiper-pagination page2"></div> 28</div>
CSS
1.special_contents_wrap .special_contents { 2 position: relative; 3 height: auto; 4 padding: 30px 0 95px; 5 } 6 .special_contents_wrap .special_contents::before { 7 display: none; 8 } 9 .special_contents_wrap .special_contents .special_contents_title { 10 position: absolute; 11 top: calc(-2%); 12 left: 0; 13 right: 0; 14 margin: 0 auto; 15 width: 80vw; 16 text-align: center; 17 font-weight: 200; 18 letter-spacing: 1.5vw; 19 font-size: 5vw; 20 } 21 .special_contents_wrap .special_contents .outer_line { 22 width: 100%; 23 border: 2px solid #91d539; 24 padding: 5px; 25 } 26 .special_contents_wrap .special_contents .inner_line { 27 height: auto; 28 padding-bottom: 10px; 29 width: 100%; 30 border: 1px solid #91d539; 31 padding: 20px; 32 } 33 .special_contents_wrap .special_contents .swiper2 { 34 height: 100%; 35 width: 100%; 36 } 37 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc { 38 width: 100%; 39 height: 100%; 40 position: relative; 41 } 42 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_title { 43 position: static; 44 line-height: 3rem; 45 width: 100%; 46 font-size: 20px; 47 } 48 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_img { 49 position: static; 50 margin-top: 25px; 51 width: 100%; 52 background: #000; 53 } 54 .special_contents_wrap .special_contents .inner_line .special_contents_slider_wrap .sc .sc_img img { 55 max-width: 100%; 56 /* height: auto; */ 57 } 58 .special_contents_wrap .special_contents::after { 59 content: ''; 60 display: inline-block; 61 width: 100vw; 62 height: 40vw; 63 background-image: url(../images/top2/top_B.png); 64 background-size: contain; 65 background-repeat: no-repeat; 66 position: absolute; 67 left: 50%; 68 margin-left: -50vw; 69 bottom: 55px; 70 z-index: 10; 71 } 72 a.cover { 73 position: absolute; 74 width: 100%; 75 height: 100%; 76 top: 0; 77 left: 0; 78 text-indent: 100%; 79 white-space: nowrap; 80 overflow: hidden; 81 }
回答2件
あなたの回答
tips
プレビュー