ホームページ制作MATSUTE BLOG

この記事は「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．見出しの左右に線を太くしたい

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．文字が複数行になる場合にも対応したい

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

いれないでください

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

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;
}

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

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;
}

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;
}