Q&Aブラウザ表示を100％にすると右側がはみ出て見えなくなってしまいます。
widthは100％で、max-width:1600px;で指定しています。
positionを使っているからだろうか？と思うのですが…なぜなのでしょう。。。
ご教授お願いします！
※幅の指定に関係なさそうな部分は割愛しました。リセットCSS使用しています。
↓これを作ろうとしています。
HTML
1<body> 2 3 <header> 4 <nav> 5 <ul> 6 <li><a href="#">NEW IN</a></li> 7 <li><a href="#">COLLECTION</a></li> 8 <li><a href="#">LOOKBOOK</a></li> 9 <li><a href="#" class="title">LAMINA</a></li> 10 <li><a href="#">OUR STORY</a></li> 11 <li><a href="#">NEWS</a></li> 12 <li><a href="#">STORES</a></li> 13 14 </ul> 15 </nav> 16 </header> 17 18 <div class="main_image"> 19 <div class="main_word"> 20 <h1>Primitive</h1> 21 <p class="sub_message">太古の誇りを</p> 22 <h3 class="mission"><a href="#">Discover the Collection</a></h3> 23 </div> 24 <div class="egg"></div> 25 <a href="#" class="slide_left"><img src="img/slide_left.png" alt="slide left"></a> 26 <a href="#" class="slide_right"><img src="img/slide_right.png" alt="slide right"></a> 27 </div> 28 29 <div class="slide"> 30 <ul> 31 <li><a href="#"></a></li> 32 <li><a href="#"></a></li> 33 <li><a href="#"></a></li> 34 </ul> 35 </div> 36 37 <section class="contents"> 38 39 <div class="box"></div> 40 41 <div> 42 <p class="word_top">2020 SS Collection</p> 43 <h2>Primitive</h2> 44 <p class="word_bottom">太古の誇りを</p> 45 46 <p class="word_discover"><a href="#">Discover</a></p> 47 </div> 48 49 </section> 50 51</body>
CSS
1 2/*---------------------- 3 header 4----------------------*/ 5header{ 6 width: 100%; 7 max-width: 1600px; 8 height: 95px; 9} 10header ul{ 11 text-align: center; 12} 13 14/*---------------------- 15 main image 16----------------------*/ 17.main_image{ 18 width: 100%; 19 max-width: 1600px; 20 height: 710px; 21 background: #F1DFC8; 22 position: relative; 23 left: 0; 24 overflow: hidden; 25} 26 27.main_image .main_word{ 28 position: absolute; 29 left: 220px; 30 top: 220px; 31} 32.main_image .egg{ 33 width: 400px; 34 height: 900px; 35 background: #F4F4F4; 36 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 37 position: absolute; 38 left: 977px; 39 top: 50px; 40} 41.slide_left{ 42 display: block; 43 position: absolute; 44 left: 38px; 45 top: 335px; 46} 47.slide_right{ 48 display: block; 49 position: absolute; 50 top: 335px; 51 left: 1530px; 52} 53 54.slide{ 55 width: 100%; 56 max-width: 1600px; 57 height: 123px; 58 background: #FFF; 59 text-align: center; 60} 61 62 63/*---------------------- 64 contents 65----------------------*/ 66.contents{ 67 width: 100%; 68 max-width: 1600px; 69 display: flex; 70 justify-content: center; 71} 72.contents .box{ 73 width: 700px; 74 height: 570px; 75 background: #E2E2E2; 76 box-shadow: -30px 50px #F5F0E9; 77 margin-right: 80px; 78} 79
回答1件
0
自己解決
positionの位置指定をleftからrightに変えたらできました。
CSS
1.slide_right{ 2 display: block; 3 position: absolute; 4 top: 335px; 5 right: 38px; /*leftからrightの指定へ変更*/ 6}
投稿2021/06/29 06:33
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。