CSS で適応型ディバイダーを巧みに実装する N 通りの方法

分割線はウェブページでよく使われるデザインです。例えば、Zhihuのその他の回答をご覧ください。

ここでの適応性とは、両側の水平線が親の文字数と幅に適応することを意味します。

私はこっそりと Zhihu の実装を見てみました。明らかに白い背景で覆われています。少し背景を追加すると秘密が明らかになります。

私は思いました：Zhihu のフロントエンドはそれほど良くないのでしょうか？おそらく他の人はこれらに焦点を当てていないのでしょう。

以下に、露出しないような実装方法をいくつか紹介します。

1. 疑似要素 + 変換: translateX(-100%);

主な原則は、テキストを中央の text-align: center; に設定し、それぞれ絶対位置にある 2 つの疑似要素を指定することです。このとき、疑似要素も水平方向に中央揃えになります。十分な幅を設定し、左側の要素を 100% 左にシフトします。制限を超える場合は、親を非表示にすることを忘れないでください。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">私は境界線です</div>

CSSスタイルは

。タイトル{
    位置: 相対的;
    テキスト配置: 中央;
    オーバーフロー: 非表示;
    フォントサイズ: 14px;
    色: #999;
}
.title::before、.title::after{
    コンテンツ： '';
    表示: インラインブロック;
    幅: 100%;
    高さ: 1px;
    位置: 絶対;
    背景: #ccc;
    上位: 50%;
}
.title::before{
    左マージン: -10px;
    変換: translateX(-100%);
}
.title::after{
    左マージン: 10px;
}

CSS 区切り線 (疑似要素 + 変換)

2. 疑似要素 + flex

これは理解しやすいでしょう。display:flex を設定すると、2 つの疑似要素が残りのスペースを埋めます。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">私は境界線です</div>

CSSスタイルは

。タイトル{
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    フォントサイズ: 14px;
    色: #999;
}
.title::before、.title::after{
    コンテンツ： '';
    フレックス: 1;
    高さ: 1px;
    背景: #ccc;
}
.title::before{
    右マージン: 10px;
}
.title::after{
    左マージン: 10px;
}

CSS 区切り線 (疑似要素 + flex)

3. 疑似要素 + ボックスシャドウ/アウトライン + クリップパス

また、text-align: center を使用してテキストと疑似要素を中央に配置し、十分な大きさのボックスシャドウまたはアウトラインを生成します。単一の方向をサポートしていないため、clip-path または clip で切り取られます。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">私は境界線です</div>

CSSスタイルは

。タイトル{
    テキスト配置: 中央;
    フォントサイズ: 14px;
    色: #999;
    オーバーフロー: 非表示;
}
.title::before、.title::after{
    コンテンツ： '';
    表示: インラインブロック;
    幅: 0;
    高さ: 1px;
    ボックスシャドウ: 0 0 0 9999px #ccc;
    垂直位置合わせ: 中央;
}
.title::before{
    右マージン: 10px;
    クリップパス: ポリゴン(0 0, -9999px 0, -9999px 100%, 0 100%);
}
.title::after{
    左マージン: 10px;
    クリップパス: ポリゴン(0 0, 9999px 0, 9999px 100%, 0 100%);
}

CSS セパレータライン (疑似要素 + box-shadow/outline + clip-path)

4. 疑似要素 + 右: 100%

この実装には、タグの追加レイヤーが必要です。外側の部分は、引き続き text-align: center です。絶対配置を使用して、内側のテキストに 2 つの疑似要素を追加します。左側の要素は、右側の要素の 100% に設定されます (テキストタグを基準として)。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">
    <span class="inner">私は境界線です</span>
</div>

CSSスタイルは

。タイトル{
    テキスト配置: 中央;
    フォントサイズ: 14px;
    色: #999;
    オーバーフロー: 非表示;
}
.インナー{
    位置: 相対的;
}
.inner::before、.inner::after{
    位置: 絶対;
    コンテンツ： '';
    幅: 9999ピクセル;
    高さ: 1px;
    背景: #ccc;
    上位: 50%;
}
.inner::before{
    右: 100%;
    右マージン: 10px;
}
.inner::after{
    左マージン: 10px;
}

CSS 区切り線 (疑似要素 + 右: 100%)

5. 境界線+変形

このアイデアでは疑似要素は必要ありませんが、内部テキストの左右に 1px の境界線を付けるための追加タグが必要です。このとき、line-height: 1px を設定する必要があります。内部テキストは十分に大きい (親よりも大きい) ため、絶対配置と transform: translateX(-50%) を使用して中央に配置できます。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">
    <span class="inner">私は境界線です</span>
</div>

CSSスタイルは

。タイトル{
    位置: 相対的;
    テキスト配置: 中央;
    フォントサイズ: 14px;
    色: #999;
    オーバーフロー: 非表示;
    padding: .6em 0;/**高さを増やす**/
}
.インナー{
    位置: 絶対;
    左: 50%;
    変換: translateX(-50%);
    空白: ラップなし;
    行の高さ: 1px;
    左境界線: 9999px 実線 #ccc;
    右境界線: 9999px 実線 #ccc;
    パディング: 0 10px;
}

CSS 区切り線 (境界線 + 変換)

6. 疑似要素 + 境界線 + 左/右

このアイデアでは、テキスト内に生成される疑似要素のみが必要であり、十分に大きな境界線と同じ負の値（絶対位置+左/右）を使用して位置が復元されます。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">
    <span class="inner">私は境界線です</span>
</div>

CSSスタイルは

。タイトル{
    テキスト配置: 中央;
    フォントサイズ: 14px;
    色: #999;
    オーバーフロー: 非表示;
}
.インナー{
    位置: 相対的;
    パディング: 0 10px;
}
.inner::before{
    コンテンツ： '';
    位置: 絶対;
    高さ: 1px;
    上位: 50%;
    左境界線: 9999px 実線 #ccc;
    右境界線: 9999px 実線 #ccc;
    右: -9999px;
    左: -9999px;
}

CSS 区切り線 (疑似要素 + 境界線 + 左/右)

7. 疑似要素 + テーブルセル

主なアイデアは、親に display:table を設定し、疑似要素に display:table-cell を設定し、十分な幅を設定することです。

具体的な実装は以下のとおりです

HTML構造は

<div class="title">
    <span class="inner">私は境界線です</span>
</div>

CSSスタイルは

。タイトル{
    表示: テーブル;
    フォントサイズ: 14px;
    色: #999;
}
.インナー{
    表示: テーブルセル;
    空白: ラップなし;
    パディング: 0 10px;
}
.title::before、.title::after{
    コンテンツ： '';
    表示: テーブルセル;
    幅: 9999ピクセル;
    オーバーフロー: 非表示;
    background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**これは線形グラデーションを使用して生成されますが、他の方法も使用できます**/
    背景サイズ: 100% 1px;
}

CSS 区切り線 (疑似要素 + テーブルセル)

8.フィールドセット+凡例

fieldsetタグとlegendタグを組み合わせることで、セパレータ線の効果を自然に実現できます。Zhang Xinxuの記事を参照してください。

具体的な実装は以下のとおりです

HTML構造は

<フィールドセットクラス="タイトル">
    <legend class="inner">私は境界線だ</legend>
</フィールドセット>

CSSスタイルは

。タイトル{
    フォントサイズ: 14px;
    色: #999;
    境界線: 0;
    上境界線: 1px 実線 #ccc;
    パディング: 0;
}
.インナー{
    マージン: 0 自動;;
    パディング: 0 10px;
}

CSS セパレーター (フィールドセット + 凡例)

まとめ

上に挙げた区切り線の効果を実現するには 8 つの方法があります。それぞれの方法には異なる考え方があります。重要なのは想像力を働かせることです。おそらくこれが CSS を他の言語と異なるものにしているのでしょう。

ここで整理しました。全体的な効果は次のとおりです。ここをクリックして確認できます。実際のプロジェクトで必要な方法を選択できます。

要約する

上記は、CSS を使用してアダプティブディバイダーを巧みに実装するために私が紹介した N 個の方法です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: MySQLはbinlogを通じてデータを復元する

>>: Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現