Skip to main content
編集済みの本文
ソース リンク
keitaro_so
  • 5,285
  • 2
  • 14
  • 24

ポイントとしては
dlのようにtableを並べるのではなくて、全体をtableとしてtrで段組みをする。
trのborder-bottomをつける。
tdの価格の幅についてはテーブルの20$の長さにしています。

またブラウザデフォルトのCSSが聞い効いているので見ているブラウザによってはthにboldが付いたりしているかもしれないですが、そのあたりはご自身で調整してみてください。

ポイントとしては
dlのようにtableを並べるのではなくて、全体をtableとしてtrで段組みをする。
trのborder-bottomをつける。
tdの価格の幅についてはテーブルの20$の長さにしています。

またブラウザデフォルトのCSSが聞いているので見ているブラウザによってはthにboldが付いたりしているかもしれないですが、そのあたりはご自身で調整してみてください。

ポイントとしては
dlのようにtableを並べるのではなくて、全体をtableとしてtrで段組みをする。
trのborder-bottomをつける。
tdの価格の幅についてはテーブルの20の長さにしています。

またブラウザデフォルトのCSSが効いているので見ているブラウザによってはthにboldが付いたりしているかもしれないですが、そのあたりはご自身で調整してみてください。

ソース リンク
keitaro_so
  • 5,285
  • 2
  • 14
  • 24

tableタグを用いて組んでみました。

ポイントとしては
dlのようにtableを並べるのではなくて、全体をtableとしてtrで段組みをする。
trのborder-bottomをつける。
tdの価格の幅についてはテーブルの20$の長さにしています。

またブラウザデフォルトのCSSが聞いているので見ているブラウザによってはthにboldが付いたりしているかもしれないですが、そのあたりはご自身で調整してみてください。

.menu{
    margin: 50px 60px;
}

.menu-box,.menu-box2{
    display: flex;
    width: 100%;
    position: relative;
}

.box, .box2{
    flex: 1;
    margin-bottom: 30px;
    padding-right: 110px;

}

.menu-item{
    width: 100%;
    border-collapse: collapse;
    text-align:left;
}

.menu-item tr {
    border-bottom: solid 1px #666;
}

.menu-item td {
    width: 20%;
}


.perm-text{
    background-color: azure;
    border-radius: 50px;
}
<section id="Menu" class="menu">
        <h1>Menu</h1>
        <div class="menu-box">
            <div class="box">   
                <div class="cut-menu">
                    <h2 class="menu-subtitle">Cut</h2>
                    <table class="menu-item">
                        <tr>
                          <th>カット</th>
                          <td>¥4,900-</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="box">
                <div class="color-menu">
                    <h2 class="menu-subtitle">Color</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸リタッチカラー</th>
                        <td>¥8,500-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸ワンメイクカラー</th>
                        <td>¥9,500-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りWカラー</th>
                        <td>¥15,000-</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box">
                <div class="perm-menu">
                    <h2 class="menu-subtitle">Perm</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸スピデジパーマ</th>
                        <td>¥14,000-</td>
                      </tr>
                      <tr>
                        <th>メンズデザインパーマ</th>
                        <td>¥9,800</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りコスメパーマ</th>
                        <td>¥12,000-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りポイントパーマ</th>
                        <td>¥8,000-</td>
                      </tr>
                      <tr>
                        <th>ニュアンスストレート</th>
                        <td>¥12,800-</td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="menu-box2">
            <div class="box2">
                <div class="straighting-menu">
                    <h2 class="menu-subtitle">Straghting</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸入り縮毛矯正</th>
                        <td>¥12,000-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りポイント矯正</th>
                        <td>¥4,500~</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box2">
                <div class="Other-menu">
                    <h2 class="menu-subtitle">Other</h2>
                    <table class="menu-item">
                      <tr>
                        <th>シャンプー&ブロー</th>
                        <td>¥2,700-</td>
                      </tr>
                      <tr>
                        <th>完熟トリートメントヘッドスパ</th>
                        <td>¥3,800-</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box2">
                <div class="parm-text">
                    <h2 class="text-title">~高濃度フルボ酸とは?~</h2>
                    <p class="text">フルボ酸とは土壌の中に存在する有機酸の一つで、自然界の中では植物にミネラルを補給する機能があります。<br>
                    人に対しては、美容や健康に対して効果があると期待されている成分です。<br>
                    Salon de bauteでは美容成分であるフルボ酸を高濃度で配合した製品を使用しています。</p>
                </div>
            </div>
        </div>
    </section>