HTML,CSS 美容室HPでよく見かけるメニュー表作成

↑ご想像の通りこちらを作ります。

「記述リスト」であるdl要素を使います。
dt要素にサービス名、dd要素には価格を書いていきます。
価格が変動するサービス(¥4000~)にはfromクラスをつけておきます。

    <h2 class="page-title">Menu</h2>
    <div class="menu">
        <dl>
            <dt>Cut</dt>
            <dd>¥3300</dd>
        </dl>
        <dl>
            <dt>Color</dt>
            <dd class="from">¥4000</dd>
        </dl>
        <dl>
            <dt>Perm</dt>
            <dd class="from">¥3000</dd>
        </dl>
        <dl>
            <dt class="from">Straight Perm</dt>
            <dd>¥4500</dd>
        </dl>
        <dl>
            <dt>Shampoo</dt>
            <dd class="from">¥800</dd>
        </dl>
        <dl>
            <dt>Carbonic Shampoo</dt>
            <dd>¥500</dd>
        </dl>
        <dl>
            <dt>Treatment</dt>
            <dd class="from">¥2500</dd>
        </dl>
        <dl>
            <dt>Hair Up</dt>
            <dd class="from">¥4000</dd>
        </dl>
        <dl>
            <dt>Make</dt>
            <dd class="from">¥2000</dd>
        </dl>
        <dl>
            <dt>Dressing(着付け)</dt>
            <dd class="from">¥5000</dd>
        </dl>
        <div class="notes">
            <p>・表示価格は全て税込です。</p>
            <p>・詳細などお問い合わせはお電話にてご確認ください。</p>
        </div>
    </div><!--col-->

必要であれば注意書きの要素も書いておく。

あとはCSSの設定

.menu{
    max-width: 700px;
    margin: 0 auto;
    font-size: 1,125rem;
    padding: 40px 0;
}
.menu dl {
    display: table;
    width: 100%;
    border: solid #e4e4e4;
    border-width: 1px 0;
}
.menu dt{
    display: table-cell;
    padding:0.4rem;
}
.menu dd{
    text-align: right;
    display: table-cell;
    padding:0.4rem;
}
.menu dd:after{
    display: inline-block;
    content: "";
    width: 1em;
    font-size: 0.7em;
}
.menu dd.from:after {
    content: "〜";
}
.notes{
    font-size: 0.7rem;
    font-family:"Yu Mincho", "YuMincho";
}

dlをdisplay:tableにして、
dtとddをそれぞれdisplay:cellとすれば要素は横並びになります。
価格のddはtext-alignはrightにしておきましょう。

あとはdd:afterとdd.from:afterは何をしているのか。

まず:afterがあるCSSを使わずに価格の後に〜線を直接書いて見ます
するとこのような見た目になります↓

ちょっと見にくいですね。。。

これらをきれいに揃えようと、dd要素の中に空白文字を直接書き込んで行くのはめんどくさいし、コードの見ばえ的にはよくないです。

悪い例
(中略)
        <dl>
            <dt>Shampoo</dt>
            <dd class="from">¥800〜</dd>←〜を打ち込む
        </dl>
        <dl>
            <dt>Carbonic Shampoo</dt>
            <dd>¥500　</dd>←空白文字を打ち込む
        </dl>
(中略)

そこで:after擬似要素を使えば解決できます。これを使えば要素の直後に内容を挿入できます。

クラスがないdd要素には空文字を指定し、fromクラスがあるdd要素には〜線を指定します。
あとはそれぞれのプロパティをインライン要素にする、幅とフォントサイズを統一することで綺麗に表示させるようになります。
〜線や空白を直接打ち込む必要もなくなります。

これで最初に貼った画像のようになるはず。