タイトルの通り、テキストの左右にボーダーを入れるCSSの紹介です。主に見出しの装飾として使えるかと。
とりあえず単色ボーダーを左右に表示するコードを覚えましょう。これさえ理解出来れば、色や太さはすぐに変更出来ます。
|
1 |
<p class="s1">Dummy Text</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.s1 { color: #444; font-size: 24px; display: flex; align-items: center; } .s1:before, .s1:after { content: ""; flex-grow: 1; height: 1px; background: #444; display: block; } .s1:before { margin-right: .4em; } .s1:after { margin-left: .4em; } |
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プロパティにblockやinlineを指定しないとIEで表示されません。
margin-○○: .4em;(CSS:15,18行目)
テキストとボーダーの間の余白です。
先程のコードを少しいじるだけでOK。
|
1 |
<p class="s2">Dummy Text</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.s2 { color: #444; font-size: 24px; display: flex; align-items: center; } .s2:before, .s2:after { content: ""; flex-grow: 1; height: 1px; display: block; } .s2:before { margin-right: .4em; background: linear-gradient(-90deg, #888, transparent); } .s2:after { margin-left: .4em; background: linear-gradient(90deg, #888, transparent); } |
Dummy Text
background: linear-gradient～(CSS:15,19行目)
外側に向かって透明（transparent）になるように指定。こっちのほうがお洒落？
backgroundじゃなくてborderを使ってみる。
|
1 |
<p class="s3">Dummy Text</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.s3 { color: #444; font-size: 24px; display: flex; align-items: center; } .s3:before, .s3:after { content: ""; flex-grow: 1; border-top: 4px dotted #444; display: block; } .s3:before { margin-right: .4em; } .s3:after { margin-left: .4em; } |
Dummy Text
border-top: 4px dotted #444;(CSS:10行目)
太さと線の種類、色を指定しています。
こんな感じで、割とシンプルな記述で色々なパターンのボーダーを設定可能です。background-imageを使えば画像を指定することも出来ますが、左右の幅がデバイスの表示領域によって変化するので、使う画像によってはスマホ対応がめんどくさそう…
