Q&A
CSSだけで対処するのは難しそうですが、HTMLの構造は変更していいですか？
実現したいこと
サロンのHPを作成しているのですが、メニュー部分でどうしても解消できない箇所があり、
もしご存知の方がいらっしゃいましたら
ご教示いただけると嬉しいです。
・メニュー全体を中央揃えにしたい→赤枠で囲っています。
・青枠で囲っている部分ですが、それぞれのメニューの横に
値段がくるようにしたいです。
発生している問題・分からないこと
・メニュー全体が左寄せになってしまっています。
・青枠で囲っている部分ですが、それぞれのメニューの横の値段が上揃えになっています
エラーメッセージ
error
1
該当のソースコード
html
1<div class="container contents" id="price"> <img src="img/A.png"> 2 <div class="flexbox"> 3 <div class="boxtitle"> 4 <h2>AAAAA</h2> 5 </div> 6 <div class="box"> 7 <h3> あああああ<br> 8 あああああ<br> 9 あああああ<br> 10 </h3> 11 </div> 12 <div class="box"> 13 <h3> ￥0,000<br> 14 ￥0,000<br> 15 ￥0,000<br> 16 </h3> 17 </div> 18 <div class="flexbox"> 19 <div class="boxtitle"> 20 <h2>CCCCC</h2> 21 </div> 22 <div class="box"> 23 <h3> あああああ<br> 24 あああああ<br> 25 あああああ<br> 26 </h3> 27 </div> 28 <div class="box"> 29 <h3> ￥0,000<br> 30 ￥0,000<br> 31 ￥0,000<br> 32 </h3> 33 </div> 34 </div> 35 </div> 36</div> 37<div class="container contents" id="price"> 38 <div class="flexbox"> 39 <div class="boxtitle"> 40 <h2>BBBB</h2> 41 </div> 42 <div class="box"> 43 <h4>いいいいい</h4> 44 <h3>あああああ<br> 45 </h3> 46 <h4>（ああああああああ）<br> 47 </h4> 48 <h5>いいいいいい</h5> 49 <h3>あああああ<br> 50 あああああ<br> 51 あああああ<br> 52 </h3> 53 </div> 54 <div class="box"> 55 <h3> ￥0,000</h3> 56 <h3> ￥0,000<br> 57 ￥0,000<br> 58 ￥0,000<br> 59 </h3> 60 </div> 61 </div> 62</div> 63
css
1 .container { 2 width: 100%; 3 margin: 0 auto; 4 text-align: center; 5 } 6 .contents { 7 padding: 100px 0 0 0; 8 } 9 #price { 10 width: 100%; 11 margin: 0 auto; 12 } 13 #price img { 14 width: 10%; 15 margin: auto 0; 16 padding: 150px 0 120px 0; 17 } 18 19 #price .flexbox { 20 display: flex; /* フレックスボックスにする */ 21 align-items: stretch; 22 justify-content: center; 23 } 24 #price .box { 25 width: 320px; 26 padding-left: 20px; 27 text-align: left; 28 } 29 #price .boxtitle { 30 width: 200px; 31 text-align: left; 32 } 33 34 35 #price h1 { 36 margin-bottom: 60px; 37 font-size: 5em; 38 font-weight: 100; 39 font-family: "Helvetica", "Arial", "Verdana", sans-serif; 40 color: #4D4D4D; 41 letter-spacing: 2px; 42 } 43 #price h2 { 44 line-height: 1.9; 45 font-size: 4.5em; 46 font-weight: 100; 47 font-family: "Helvetica", "Arial", "Verdana", sans-serif; 48 color: #4D4D4D; 49 letter-spacing: 1px; 50 } 51 #price h3 { 52 line-height: 1.9; 53 font-size: 3em; 54 font-weight: 100; 55 font-family: "Helvetica", "Arial", "Verdana", sans-serif; 56 color: #4D4D4D; 57 letter-spacing: 1px; 58 } 59 #price h4 { 60 padding: 7px 0 7px 0; 61 border: solid 1px #4D4D4D; 62 text-align: center; 63 line-height: 1.9; 64 font-size: 3em; 65 font-weight: 100; 66 font-family: "Helvetica", "Arial", "Verdana", sans-serif; 67 color: #4D4D4D; 68 letter-spacing: 1px; 69 margin: 0 0 20px 0; 70 } 71 72
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
flexboxとmargin、text-alignを試しましたがいずれも変化がないようです。
補足
特になし
回答1件
0
ベストアンサー
普通にテーブルでつくるか、グリッドレイアウトにするとよいでしょう
参考
ざっくりこんな感じでどうでしょう？
html
1<style> 2h2{margin:0} 3.flex{display:flex;} 4caption{text-align:left;} 5.wrap{ 6border:solid red; 7width:fit-content; 8margin:auto; 9} 10</style> 11<div class="wrap"> 12 <div class="flex"> 13 <h2>AAAA</h2> 14 <table border> 15 <tr> 16 <td>あああああ</td> 17 <td>¥0,000</td> 18 </tr> 19 <tr> 20 <td>あああああ</td> 21 <td>¥0,000</td> 22 </tr> 23 <tr> 24 <td>あああああ</td> 25 <td>¥0,000</td> 26 </tr> 27 </table> 28 <h2>CCCC</h2> 29 <table border> 30 <tr> 31 <td>あああああ</td> 32 <td>¥0,000</td> 33 </tr> 34 <tr> 35 <td>あああああ</td> 36 <td>¥0,000</td> 37 </tr> 38 <tr> 39 <td>あああああ</td> 40 <td>¥0,000</td> 41 </tr> 42 </table> 43 </div> 44 <div class="flex"> 45 <h2>BBBB</h2> 46 <div> 47 <table border> 48 <caption>いいいいい</caption> 49 <tr> 50 <td>あああああ<br>（ああああああああ）</td> 51 <td>¥0,000</td> 52 </tr> 53 </table> 54 <table border> 55 <caption>いいいいい</caption> 56 <tr> 57 <td>あああああ</td> 58 <td>¥0,000</td> 59 </tr> 60 <tr> 61 <td>あああああ</td> 62 <td>¥0,000</td> 63 </tr> 64 <tr> 65 <td>あああああ</td> 66 <td>¥0,000</td> 67 </tr> 68 </table> 69 </div> 70</div>
投稿2024/08/27 06:45
編集2024/08/27 07:36
総合スコア118400
あなたの回答
tips
プレビュー
