【背景無地・柄ありOK】見出しの両端に水平ラインのスタイルをつける方法【CSS／jQuery】

CSS

2020年02月12日 8:00　

おはようございます、hgmです！

本日は背景を気にすることなく見出しの両端に水平ラインのスタイルを付加する方法をご紹介します。

見出しの装飾で両端に水平線を引くスタイルは一般的に使用されていますが、背景が無地のものと柄があるものではCSS・jQueryの書き方が少し異なります。

背景が無地の一色であればCSSのみでスタイルをつけることができます。

See the Pen ZEGGBJb by hgm (@hgm_universe) on CodePen.default

htmlは背景のdivと見出しのh2、その中にspanを入れ、なるべく少なめの記述にしました。

cssでは見出しh2に擬似要素:afterを指定し水平線を作り、プロパティpositionとtransform: translateY()で縦ラインの中心に位置を指定しています。

またspanにdivの背景色と同じ色を背景色にし、水平線を隠しています。

背景が柄ありの場合、cssに加えjQueryも使用していきます。

See the Pen yLNNgVM by hgm (@hgm_universe) on CodePen.default

htmlは背景のdivと見出しのh2、その中に左側と右側のボーダー用と文字の3つのspanを用意しています。

jQueryライブラリの読み込みをお忘れなく！！

cssのh2、spanタグの.ttlは先ほどとほぼ同じですが、背景divの.bgのbackgroundをimageに変更します。水平線用のspanタグのborderに対しpositionプロパティを指定し、左の水平線はleft、右はrightで端に寄せています。

jQueryでは2行目でウィンドサイズを取得しレスポンシブ対応。

また複数タイトルがあった場合を考えh2ごとに対し処理を行うeach()を入れています。

次にh2の横幅と.ttlのpaddingを含む横幅をそれぞれ別の変数に入れ、h2から.ttlの長さを引いた数を2で割ったものをさらに別の変数に入れ、最後にspanタグの.borderにインラインのスタイルでwidthを入れる、という処理を書いています。

背景が柄ありの場合は少し複雑になってしまいましたが、参考になると幸いです。

もう少し簡単にかけるような気がするので、より良い方法があればまた追記したいと思います。。

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。広い視野を持って日々邁進していきます！