KuzLog

KuzLog
2017/01/10 2018/01/13 Web制作

【CSS】テキストの左右にボーダーを入れる方法

タイトルの通り、テキストの左右にボーダーを入れるCSSの紹介です。主に見出しの装飾として使えるかと。

単色のボーダー

とりあえず単色ボーダーを左右に表示するコードを覚えましょう。これさえ理解出来れば、色や太さはすぐに変更出来ます。

HTML

CSS

表示結果

Dummy Text

解説

display: flex;(CSS:4行目)

p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。

align-items: center;(CSS:5行目)

flexアイテム(p要素内のテキストと、before,afterで生成された疑似要素)を上下中央に配置。

flex-grow: 1;(CSS:9行目)

左右の疑似要素(ボーダー)の幅を、空いているスペースいっぱいまで広げています。

height,background(CSS:10,11行目)

heightでボーダーの太さを、backgroundで色を指定しています。

display: block;(CSS:12行目)

疑似要素は、displayプロパティにblockinlineを指定しないとIEで表示されません

margin-○○: .4em;(CSS:15,18行目)

テキストとボーダーの間の余白です。

グラデーションを使ったボーダー

先程のコードを少しいじるだけでOK。

HTML

CSS

表示結果

Dummy Text

解説

background: linear-gradient~(CSS:15,19行目)

外側に向かって透明(transparent)になるように指定。こっちのほうがお洒落?

borderプロパティを使って点線や破線も使える

backgroundじゃなくてborderを使ってみる。

HTML

CSS

表示結果

Dummy Text

解説

border-top: 4px dotted #444;(CSS:10行目)

太さと線の種類、色を指定しています。


こんな感じで、割とシンプルな記述で色々なパターンのボーダーを設定可能です。background-imageを使えば画像を指定することも出来ますが、左右の幅がデバイスの表示領域によって変化するので、使う画像によってはスマホ対応がめんどくさそう…