見出しの両サイドにボーダーを付ける

CSS で、見出しのテキストの両サイドにボーダーを付ける。

デモページを表示

CSS

補足

• side-border が基本のクラスで、これを h2 要素などに設定すると、見出しの両サイドに実線のボーダーが表示される。
• ボーダーは疑似要素で表示している。
• side-border クラスに加えて、double・dotted・dashed・sakura などのクラスを設定すると、ボーダーのスタイルが変えられる。
• ボーダーの長さはウィンドウ幅に連動する（レスポンシブ対応）。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• このサンプルでは h2 要素に、あらかじめ用意した side-border クラス等を設定している。