両端に斜め線が入った見出しのつくり方
こんにちは。本題に入る前に少し余談ですが、今回の記事で120記事めになります。
色々記事を書いたのですが、実はなかには検索1位になる記事もあって驚いています(°_°)
記事を見てもらうとわかるのですが、それほど文字数が多いわけでもないですし、内容も他の方と比べると薄っぺらいですし汗、今では週1投稿ですがこんなブログでも検索上位に行くことがあるのだな〜と!
やはりブログは継続力が大事なんだなぁと身をもって実感しました。
そんな感じで余談は終わりまして、本題に入りますね!
今日はメモがてら「両端に斜め線が入った見出しのつくり方」について書きます!
イメージとしてはこんな感じです^^
ちょっとポップな感じ?になりますね٩( ‘ω’ )و
ではさっそくコードをのせます〜!
コード
HTML編
<section class="contSect"> <div class="inner"> <h2 class="sectTit">斜め線がついた見出し</h2> </div> <!-- / .inner --> </section> <!-- /.contSect -->
CSS編
.sectTit { position: relative; text-align: center; font-weight: bold; line-height: 1.3; font-size: 2.5rem; } .sectTit:before, .sectTit:after { position: relative; display: inline-block; content: ""; background: #faa94d;//斜め線の色 width: 2px;//斜め線の太さ height: 2em;//斜め線の長さ margin: 0 1em;//テキストとの間に左右余白をつくる margin-top: -.2em;//斜め線の位置調整 vertical-align: middle; } .sectTit:before { transform: rotate(-35deg);//角度調整 } .sectTit:after { transform: rotate(35deg);//角度調整 }
斜め線の部分は毎度お馴染み擬似要素で作ります。
いくつかポイントを書きますね^^
1.擬似要素は今回、絶対配置ではなくrelativeで相対配置に
2.擬似要素をインラインブロック要素にする→テキストと横並びになる&幅指定できる
3.この方法だとテキストが折り返すとデザイン的に微妙かも
2.擬似要素をインラインブロック要素にする→テキストと横並びになる&幅指定できる
3.この方法だとテキストが折り返すとデザイン的に微妙かも
こんな感じです!
参考になれば幸いです。
では今日はここまで〜〜
コメント