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

L字型見出し

見出しの左端と下端だけを太線で囲みL字を描くスタイル。角に視線を集めたい会社案内や事業紹介の見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">サービス案内</h4>
        </div>

CSS

.d02-10-20 .wrap{ display:inline-block; padding:4px 18px 14px 18px; border-left:4px solid #0f766e; border-bottom:4px solid #0f766e; }
        .d02-10-20 .ttl{ all:unset; display:block; font-size:20px; font-weight:800; color:#1f2937; }

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