【備忘録：HTML/CSS】cssのストック集って持ってたほうがいいよね？-左右にボーダー編-

3562 ワード
HTML5 CSS3 CSS設計 HTML5 テキストリンク

よくある左右にボーダーつくやつ


上記のようによく左右にボーダーがつく見出しやデザインがあります。

これまで、positionとbefore、afterで配置していたのですが、、、
flexを使用して簡単に、そしてテキスト増減を考慮した左右ボーダー見出しが作成できます！

index.html
<h2 class="m-heading2-border">左右にボーダー</h2>
style.scss
.m-heading2-border{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  &:before{
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    margin-right: 10px;
  }
  &:after{
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    margin-left: 10px;
  }
}

見出し本体にflexをかけ、横、縦位置を中央にalign-items: center;、justify-content: center;をかけます。
そして見出しのbefore、afterでボーダーを表現します。
そ、それだけでできます。。

こんな感じにテキストが多く入っても大丈夫ですし、

こんな感じにテキストに改行が入ってもいけます！

これですと、cssも簡単ですし楽ですね！
みなさんぜひ使用してみてください。

参考元：
https://note.com/pulpstyle