文字の左右に、水平線があるデザインってよくありますよね。
文字をspanで囲んだり、色々なやり方があるのですが…

htmlは触らずにするなら、flexboxを使うのがわかりやすいので紹介しますー！

水平線のひき方（flexboxを使った方法）

サンプル

サンプル

複数行になっても
大丈夫です

ソースコード

  <p class="sample">サンプルです</p>
  <p class="sample">複数行になっても<br>大丈夫です</p>
  

  <style>
    .sample{
      display: flex;  /* 横並びにする */
      align-items: center;  /* 垂直方向に中央 */
      text-align: center;  /* 文字のセンタリング(複数行になったとき用) */
    }


    /* 共通部分はまとめる */
    .sample::before,
    .sample::after{
      content:"";
      flex-grow: 1;  /* 線の伸び率 */
      border-bottom: 1px solid #333;
    }

    /* 左側の線 */
    .sample::before{
      margin-right: 10px;  /* 線と文字の間のスペース */
      padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }

    /* 右側の線 */
    .sample::after{
      margin-left: 10px;  /* 線と文字の間のスペース */
      padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }
  </style>
  

ポイント解説＆まとめ

左右の線の部分（::afterと::before）にflex-grow: 1;を記載する部分がポイントです！
これがないと、左右の線が伸縮してくれないので、忘れずにつけてくださいね。
↓※サンプルです

flex-growがないver

あとは、コード部分にコメントを入れているので、わかりづらいところは読んでみてください。

また、よく見るシリーズ（？）の紹介などもしていきますね。それでは、みなさん良いコーディングライフを〜(・ω・)ノ

参考記事

・flex-growプロパティの意味と使い方

まずは見出しデザインのバリエーションを知ろう

見出しデザインを取り扱っているデザインギャラリーサイトさんです

見出しデザイン.com

http://midashi-design.com/

100%見出しデザイン！デザイン別にカテゴリわけされています。
実際に見出しが使用されているサイトへジャンプして、
全体のデザインを見ることもできます。

ブブンデザインアーカイブ(見出しページ)

http://bubundesignarchive.jp/mid/

Webデザインをパーツ別に見ることができます
パーツ別、業界別で画像の閲覧ができるので便利！
見出しだけでなく、各パーツのデザインの参考に。

WEBサイトカッコイイ(見出しページ)

http://fukuoka-web.hustle.ne.jp/find/

かっこいいWEBサイトを集めたリンク集
関西的なニュアンスで言うと「シュっとした」感じの
スタイリッシュで洗練されたデザインのWEBサイトを紹介してくださっています。

便利なWebツールを使ってみよう

スタイルシート見出しメーカー

http://midashi-maker.v-colors.com/

好きな色を4色選ぶ⇒「作る！」を押すだけで
簡単見出しデザインを作ってくれるWebツールです
シンプルに素早く見出しを作りたいときにおすすめ！

画像で見出しを作ってみよう

Mdnデザイン

Webデザイン表現&技法の新・スタンダード」

http://www.mdn.co.jp/di/articles/2364/?page=6

Illustratorで作成する見出しバーの作り方がわかりやすく紹介されています
画像の見出しは装飾やグラデーションをふんだんに使えるところが魅力的ですね！

HTMLとCSSで作成してみよう

Webクリエイターボックスさん

「Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える」

http://www.webcreatorbox.com/tech/css-heading-list-blockquote/

サンプルとともにコピー＆ペーストで使える見出し・リスト・引用文が
紹介されています。シンプルで使いやすそうなデザインです。

3STREAMERさん

「コピペで出来るCSS3で見出しスタイリング」

http://blog.3streamer.net/html5-css3/css3-styling-231/

CSS3を使って見出しを作成する方法を紹介されています。
リボンやふきだしなど、コピー＆ペーストで使えるサンプルが豊富。

Webデザインのレシピさん

「手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選」
http://www.so-network.biz/css/css3_ui/

「作ってみたい！」と思うようなチュートリアルが22種類も紹介されています！
海外のサイトの紹介が多めです。「こんなこともできるんだ！」と、参考になるものが多いです。