[CSS]ラベルとセパレータ

HTMLの構造を崩さず、CSSのみで <hr> の左側に <strong> のラベルを綺麗に並べるには、親要素の <div> に Flexbox（フレックスボックス） を適用するのが最も簡単でスマートな方法です。

等速や倍速の学習効率の解説でも触れた「構造をパッと見て直感的に理解できるデザイン」にするためのCSS設計を提示します。

実装方法
1. 1. HTML（ご提示のイメージ通り）
2. 2. CSS
ワンポイント解説

実装方法

1. HTML（ご提示のイメージ通り）

HTMLは変更する必要はありません。

<div class="labeled-separator">
    <strong>tag</strong>
    <hr>
</div>

2. CSS

以下のCSSを style.css などのスタイルシートに追加してください。

.labeled-separator {
    display: flex;       /* 子要素（strongとhr）を横並びにする */
    align-items: center; /* 上下の中心位置を揃える */
    gap: 10px;           /* ラベルと線の間のすき間（お好みで調整） */
    width: 100%;         /* 横幅いっぱいに広げる */
}

.labeled-separator strong {
    flex-shrink: 0;      /* 画面が狭くなってもラベルの文字が潰れないようにする */
    color: #fff;         /* ポータルのデザインに合わせた文字色（お好みで変更） */
}

.labeled-separator hr {
    flex-grow: 1;        /* 線を右端までいっぱいに伸ばす */
    border: none;        /* デフォルトの立体的な枠線を消す */
    border-top: 1px dashed #444; /* 点線（- - - -）にする。実線なら solid に変更 */
    margin: 0;           /* 上下の余計な余白をリセット */
}

ワンポイント解説

フロントエンドのコンポーネントを分離した今の綺麗なコードベースであれば、このクラスを当てるだけでどこでも安全にラベル付きセパレータが使い回せるようになります。ぜひ試してみてください！

線のデザインアレンジ:上記のコードでは dashed（点線）にしていますが、ポータルの他の区切り線と合わせる場合は、以下のように変更可能です。
- 1px solid #444; ➔ 綺麗な直線（─）になります。
- 2px double #444; ➔ 二重線（＝）になります。
flex-shrink: 0; の重要性:これを入れておかないと、iPhone 15 Proなどの画面幅が狭いスマホで見た時に、線に押されて「tag」という文字が縦に改行されたり、潰れて見えなくなったりするバグが発生します。これを防ぐためのプロの必須設定です。