パーツ番号 02-10-05 ・ CSSのみ

コーナーブラケット見出し

四隅にカメラのフォーカス枠のような線を配置し見出しを囲むスタイル。特集ページや注目コンテンツの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="frame">
          <span class="c c1"></span><span class="c c2"></span><span class="c c3"></span><span class="c c4"></span>
          <h4 class="ttl">FOCUS TITLE</h4>
        </div>

CSS

.d02-10-05 .frame{ position:relative; padding:26px 34px; text-align:center; }
        .d02-10-05 .c{ position:absolute; width:18px; height:18px; border-color:#0f766e; border-style:solid; }
        .d02-10-05 .c1{ top:0; left:0; border-width:3px 0 0 3px; }
        .d02-10-05 .c2{ top:0; right:0; border-width:3px 3px 0 0; }
        .d02-10-05 .c3{ bottom:0; left:0; border-width:0 0 3px 3px; }
        .d02-10-05 .c4{ bottom:0; right:0; border-width:0 3px 3px 0; }
        .d02-10-05 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#1f2937; letter-spacing:0.05em; }

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