【CSS】テキスト(見出し,タイトル)に横線をつける方法

最終更新日: 公開日: 2019年03月

HTMLのコーディングで必要になり,ちょっと調べたので備忘録.

見出しなどの文字列の両側(両端,左右)に横線(ハイフン・横棒)をつけて,中央にもっていきたい場合がある.
- を使うと ------ のように切れ切れになってしまう.

テキストの真横に線を入れる

すなわち,以下のようなデザイン.

見出し

CSS の書き方

そこで css を使って行う方法を紹介します.(サンプルコード)
HTML は

CSS は

ポイントは display:flex

ポイントは flex を使って,

  • 線を引くのに border を使い,
  • 上下の真ん中に持ってこれる align-item:center を使い,
  • 左右の真ん中に持ってこれる justify-content: center を使う

ことです.

参考にさせていただいたサイト)
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
こちらは flex-grow で全体に線を引くようになっている.
ありがとうございます.

 タグ: ,  
 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
Apache Chrome Chrome 拡張機能 CSS Git Google HTML javascript Page Speed Insights PHP python SEO Windows WordPress Youtube z-index アナリティクス エディタ サーチコンソール サーバー管理 スライダー タグマネージャー テレワーク デザイン データベース ネットワーク フォーム ページ閲覧解析 マーケティング リッチリザルト レスポンシブ レスポンシブ対応 ログ解析 ローカル環境構築 営業 実装
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop