パーツ番号 02-07-04 ・ CSSのみ

括弧装飾見出し(【】風)

和文の隅付き括弧を模した装飾を左右に配置する見出し。和風・和文サイトのお知らせタイトルに合う。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl">重要なお知らせ</h4>

CSS

.d02-07-04 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1f2937; }
        .d02-07-04 .ttl::before{ content:"【"; color:#0f766e; margin-right:2px; }
        .d02-07-04 .ttl::after{ content:"】"; color:#0f766e; margin-left:2px; }

クラス名 .d02-07-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。