Q&A
実現したいこと
justify-content: space-between;で要素を両端に寄せたいです。
発生している問題・分からないこと
justify-content: space-between;を指定していますが、要素が両端に寄りません。ご教示お願いします。
該当のソースコード
HTML
1<body> 2 <!-- ヘッダー --> 3 <header class="header"> 4 <div class="header_wrapper"> 5 <div class="header_shop_name"> 6 <p class="shop_subname">JAZZ & BAR</p> 7 <h1 class="shop_name">4Beat</h1> 8 </div> 9 <nav class="header_navigation"> 10 <ul class="header_nav_list"> 11 <li><a href="#"><h2>Concept</h2></a></li> 12 <li><a href="#"><h2>Menu</h2></a></li> 13 <li><a href="#"><h2>Live</h2></a></li> 14 <li><a href="#"><h2>Access</h2></a></li> 15 </ul> 16 <ul class="header_nav_sns"> 17 <li><a href="#"><i class="fa-brands fa-x-twitter icon"></i></a></li> 18 <li><a href="#"><i class="fa-brands fa-instagram icon"></i></a></li> 19 <li><a href="#"><i class="fa-brands fa-facebook-f icon"></i></a></li> 20 </ul> 21 </nav> 22 </div> 23 </header> 24 <!-- メイン --> 25 <main class="main"> 26 <div class="container"> 27 <!-- コンセプト --> 28 <div class="content_wrapper"> 29 <div class="concept"> 30 <h2 class="wrapper_title">Concept</h2> 31 <p class="concept_text text">多忙な日々の中で、音楽を愛する大人たちが集い<br> 32 美味しいお酒と食事を楽しみながらJAZZの調べに酔いしれる…<br> 33 そんな癒しの空間を、JAZZを愛する大人たちにお届けします</p> 34 </div> 35 <div class="concept_img"> 36 <img src="img/ash-edmonds-LVygXSuJ40Y-unsplash.png" alt=""> 37 </div> 38 <!-- 線（javascriptアニメーション） --> 39 <div class="line"></div> 40 </div> 41 <!-- メニュー --> 42 <div class="content_wrapper"> 43 <div class="menu_img"> 44 <img src="img/foods&drink_group.png" alt=""> 45 </div> 46 <div class="menu"> 47 <h2 class="wrapper_title">Menu</h2> 48 <button class="button"><a href="#">Drink →</a></button> 49 <button class="button"><a href="#">Foods →</a></button> 50 </div> 51 <!-- 線（javascriptアニメーション） --> 52 <div class="line2"></div> 53 </div> 54 <!-- ライブ --> 55 <div class="content_wrapper"> 56 <div class="live"> 57 <h2 class="wrapper_title">Live</h2> 58 <button class="button"><a href="#">Schedule →</a></button> 59 </div> 60 <div class="live_img"> 61 <img src="img/live_group.png" alt=""> 62 </div> 63 <!-- 線（javascriptアニメーション） --> 64 <div class="line3"></div> 65 </div> 66 <!-- アクセス --> 67 <div class="access"> 68 <h2 class="wrapper_title">Access</h2> 69 <p class="address_text"> 70 〒107-0062<br> 71 東京都港区青山6-3-XX<br> 72 営業時間 : 19:00～1:00<br> 73 定休日 : 日・月・祝<br> 74 TEL - FAX 0XX-XXX-XXXX</p> 75 <button class="button"><a href="#">Map →</a></button> 76 </div> 77 <!-- 線（javascriptアニメーション） --> 78 <div class="line4"></div> 79 </div> 80 </main> 81 <!-- フッター --> 82 <footer class="footer"> 83 <div class="footer_wrapper"> 84 <div class="footer_shop_name"> 85 <p class="shop_subname">JAZZ & BAR</p> 86 <h1 class="shop_name">4Beat</h1> 87 </div> 88 <nav class="footer_navigation"> 89 <ul class="footer_nav_list"> 90 <li><a href="#"><h2>Concept</h2></a></li> 91 <li><a href="#"><h2>Menu</h2></a></li> 92 <li><a href="#"><h2>Live</h2></a></li> 93 <li><a href="#"><h2>Access</h2></a></li> 94 </ul> 95 <ul class="footer_nav_sns"> 96 <li><a href="#"><i class="fa-brands fa-x-twitter icon"></i></a></li> 97 <li><a href="#"><i class="fa-brands fa-instagram icon"></i></a></li> 98 <li><a href="#"><i class="fa-brands fa-facebook-f icon"></i></a></li> 99 </ul> 100 </nav> 101 </div> 102 <p class="footer_copyright">©JAZZ & BAR 4Beat</p> 103 </footer> 104 <script src="script.js"></script> 105</body>
SASS
1.main { 2 // 全ページ共通部分 3 .container { 4 width: 1520px; 5 margin: auto; 6 // Topページ 7 .content_wrapper { 8 display: flex; 9 justify-content: space-between; 10 margin-bottom: 165px; 11 position: relative; 12 // コンセプト 13 .concept { 14 .wrapper_title { 15 font-size: 60px; 16 color: #fff; 17 margin: 121px 0 84px 128px; 18 } 19 .concept_text { 20 margin-left: 128px; 21 } 22 } 23 .concept_img { 24 margin-right: 128px; 25 } 26 // メニュー 27 .menu { 28 .wrapper_title { 29 font-size: 60px; 30 color: #fff; 31 margin: 285px 0 35px 0; 32 } 33 } 34 // ライブ 35 .live { 36 .wrapper_title { 37 font-size: 60px; 38 color: #fff; 39 margin: 285px 0 35px; 40 } 41 } 42 43 // 線（javascriptアニメーション） 44 .line { 45 position: absolute; 46 top: 0; 47 right: 0; 48 width: 0; 49 height: 3px; 50 background-color: #fff; 51 transform: rotate(-3deg); 52 transition: width 2s ease-out; 53 transform-origin: right center; 54 z-index: -99; 55 } 56 .line.is-visible { 57 width: 200%; 58 } 59 } 60 // アクセス 61 .access { 62 margin: auto; 63 .wrapper_title { 64 font-size: 60px; 65 color: #fff; 66 text-align: center; 67 margin-bottom: 100px; 68 } 69 .address_text { 70 font-size: 32px; 71 color: #fff; 72 text-align: center; 73 line-height: 68.5px; 74 margin-bottom: 50px; 75 } 76 .button { 77 text-align: center; 78 margin: auto; 79 } 80 }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
marginを消したりしてみましたが、うまくいきません。
補足
特になし
回答1件
0
ベストアンサー
<div class="line2"></div>が右端の要素とみなされていますから、この要素を別の場所に移動したり、絶対配置をしたりしてフレックスボックスのアイテムとみなされないようにすれば解決しそうです。
ご提示のコードを見る限り、空要素でスタイルも当たっていない様子ですから、何の役割もなさそうです。もし、提示されていない部分のコードでも使っていないのであれば、削除してしまってもいいのかもしれませんね。
投稿2025/01/10 00:44
総合スコア37040
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2025/01/11 02:00