

左右に線を引く
よく見かけますね。
線を引いて、背景白のテキストを乗せるって感じですね。
HTML
1 | < h1 >< span >【CSS】見出しデザイン(左右に線を引く)</ span ></ h1 > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | h 1 { position : relative ; color : #333 ; font-size : 22px ; font-weight : bold ; text-align : center ; } h 1: :before { content : '' ; position : absolute ; top : 48% ; left : 0 ; right : 0 ; border-top : 1px solid #333 ; } h 1 > span { position : relative ; display : inline-block ; padding : 0 8px ; background-color : #fff ; } |
左右に線を引く(flexboxを使ってみる)
HTML
1 | < h1 >【CSS】flexboxを使った見出しデザイン(左右に線を引く)</ h1 > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | h 1 { display : flex ; justify-content : center ; align-items : center ; color : #333 ; font-size : 22px ; font-weight : bold ; } h 1: :before, h 1: :after { content : '' ; width : 60px ; height : 1px ; background-color : #333 ; } h 1: :before { margin-right : 30px ; } h 1: :after { margin-left : 30px ; } |
さいごに

