実践で使える見出しのデザイン:左右の ― 線 ― 編

よく見かけるようになりました。タイトルの左右についた線。
一昔前はこの設定を入れるのに結構苦労していた時期がありました。お客さんが記事を入力するとなると、やれこのクラスを設定してくださいなどハードルがあったのですが、今はそれほど難しくなくなりました。

この記事は「2021年01月10日」に書かれた記事です

この記事では下記の見出しデザインをご紹介します。

  1. 見出しの左右に線を付けたい
  2. 見出しの左右の線を太くしたい
  3. 文字が複数行になる場合にも対応したい
  4. 見出しに二重の線を付ける
  5. 見出しの下に線を付ける(左右先端丸)

1.見出しの左右に線を付けたい

見出しの左右に線を付けたい

HTML

<h1>見出しの左右に線を付けたい</h1>

CSS

h1 {
display : flex ;
align-items : center;
}

h1::before {
content :"";
display: block;
flex : 1;
margin-right: 10px;
border-top: 1px solid #000;
}

h1::after {
content :"";
display: block;
flex : 1;
margin-left: 10px;
border-top: 1px solid #000;
}

2.見出しの左右に線を太くしたい

見出しの左右に線(3px)を付けたい
h1 {
display : flex ;
align-items : center;
}

h1::before {
content :"";
display: block;
flex : 1;
margin-right: 10px;
border-top: 3px solid #000;
}

h1::after {
content :"";
display: block;
flex : 1;
margin-left: 10px;
border-top: 3px solid #000;
}

言わずもがなですが・・・1のパターンのborder-topが3pxになっただけです。

3.文字が複数行になる場合にも対応したい

短いタイトルが入っているときは良いのですが、お客さんはときおり、ものすごい長い見出しを入力してしまうことがあります。

いれないでください

と言えるはずもなく、決まったルールもなく複数行になってしまう場合は、複数行になることも想定した設定をしておきましょう。

見出しの左右に線(3px)を付けたいが、
文章が複数行

HTML

<h1>見出しの左右に線(3px)を付けたいが、<br>文章が複数行</h1>

CSS

h1 {
display : flex ;
align-items : center;
}

h1::before {
content :"";
display: block;
flex : 1 0 40px;
margin-right: 10px;
border-top: 1px solid #000;
}

h1::after {
content :"";
display: block;
flex : 1 0 40px;
margin-left: 10px;
border-top: 1px solid #000;
}

上記の設定であれば、下記のように3行になったとしても問題ありません。

見出しの左右に線(3px)を付けたいが、
文章が複数行。
3行になっても大丈夫

4.見出しに二重の線を付ける

見出しのデザイン

HTML

<h1>見出しのデザイン</h1>

CSS

h1  {
position: relative;
display: inline-block;
padding: 0 4em;
text-align: center;
}

h1::before {
content: "";
position: absolute;
top: calc(50% - 3px);
left: 0;
width: 50px;
height: 6px;
border-top: solid 2px #000;
border-bottom: solid 2px #000;
}

h1::after {
content: "";
position: absolute;
top: calc(50% - 3px);
right: 0;
width: 50px;
height: 6px;
border-top: solid 2px #000;
border-bottom: solid 2px #000;
}

5.見出しの下に線を付ける(左右先端丸)

見出しのデザイン

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
position: relative;
padding: 0 0 0.5em;
margin: 0 0 1em 0;
text-align: center;
}

h1::before {
content: "";
position: absolute;
bottom: -10px;
left: calc(50% - 30px);
width: 60px;
height: 5px;
border-radius: 2.5px;
background-color: #000;
}
「before」「after」の設定でいろんなバリエーションができます。
ここでは実践でも使うことのある5つをご紹介しました。
次回は「4-14 実践で使える見出しのデザイン:どこかで使いたい編」です。
松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > 実践で使える見出しのデザイン:左右の ― 線 ― 編

ページトップへ