エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【HTML・CSS】見出しの左右両端に線を入れる方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【HTML・CSS】見出しの左右両端に線を入れる方法
.head-border { display: flex; align-items: center; } .head-border:before, .head-border:after { co... .head-border { display: flex; align-items: center; } .head-border:before, .head-border:after { content: ""; height: 1px; flex-grow: 1; background-color: #666; } .head-border:before { margin-right: 1rem; } .head-border:after { margin-left: 1rem; } 解説 .head-border display:flex; …「Flexbox」コンテナーとして定義。 align-items:center; … 垂直方向の揃え方です。今回は真ん中で揃えたいのでcenter;としています。 .head-border:擬似要素 flex-grow: 1; … フレックス