CSSで記事の区切り線のスタイルを実装するさまざまな方法のまとめ

この記事では、CSS で記事の区切り線を実装するさまざまな方法をまとめています。区切り線はページを美しく見せることができるので、CSS を使用して区切り線のスタイルを実装するさまざまな方法を見てみましょう。効果は以下のとおりです。

方法 1: 単一のラベルを使用して区切り線を実装する:

html:

<div class="line_01">小さな区切り線の単一ラベル実装</div>

css:

.demo_line_01{  
    パディング: 0 20px 0;  
    マージン: 20px 0;  
    行の高さ: 1px;  
    左境界線: 190px 実線 #ddd;  
    右境界線: 190px 実線 #ddd;  
    テキスト配置: 中央;  
}

利点: 簡潔なコード

方法 2: 背景色を使用して区切り線を作成する:

html:

<div class="line_02"><span>色を使って巧みに表現された小さな区切り線</span></div>

css:

.demo_line_02{  
    高さ: 1px;  
    上境界線: 1px 実線 #ddd;  
    テキスト配置: 中央;  
}  
.demo_line_02 スパン{  
    位置: 相対的;  
    上: -8px;  
    背景: #fff;  
    パディング: 0 20px;  
}

利点: 簡潔なコード、適応幅

方法3: 区切り線を実装するためのインラインブロック:

html:

<div class="line_03"><b></b><span>小さな区切り線のインラインブロック実装</span><b></b></div>

css:

.demo_line_03{  
    幅:600ピクセル;  
}  
.demo_line_03 b{  
    背景: #ddd;  
    上マージン: 4px;  
    表示: インラインブロック;  
    幅: 180ピクセル;  
    高さ: 1px;  
    _オーバーフロー:非表示;  
    垂直位置合わせ: 中央;  
}  
.demo_line_03 スパン{  
    表示: インラインブロック;  
    幅: 220ピクセル;  
    垂直位置合わせ: 中央;  
}

方法4: フローティングで区切り線を実現する:

html:

<div class="line_04"><b></b><span>小さな区切り線が浮かび上がり、</span><b></b></div>

css:

.demo_line_04{  
    幅:600ピクセル;  
}  
.demo_line_04{  
    オーバーフロー: 非表示;  
    _ズーム: 1;  
}  
.demo_line_04 b{  
    背景: #ddd;  
    上マージン: 8px;  
    フロート: 左;  
    幅: 26%;  
    高さ: 1px;  
    _オーバーフロー:非表示;  
}

方法 5: 文字を使用して区切り文字を実装する:

html:

<div class="line_05">———————————<span>達成するための小さな区切り文字</span>————————————</div>

css:

.demo_line_05{  
    文字間隔: -1px;  
    色: #ddd;  
}  
.demo_line_05 スパン{  
    文字間隔: 0;  
    色: #222;  
    マージン:0 20px;  
}

利点: コードが簡潔です。上記ではセパレータの書き方を簡単に紹介しました。環境によっては、より適切な書き方があるかもしれません。

以上で、CSS で記事の区切り線スタイルを実装するさまざまな方法についての説明は終了です。CSS 区切り線スタイルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Angular Cookie の読み取りおよび書き込み操作コード

>>: HTMLボタンを中央に配置する方法