実践で使える見出しのデザイン:ちょっと目を引く編

の2つを見てきましたが、

んーちょっと目を引くデザインにしたいな

というときもあるかもしれません。全体のバランスも必要かと思いますが、こんなデザインはいかがでしょうか。

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

  1. 仕切りがわかりやすい見出し
  2. まるポチタイプの見出し
  3. ワンポイントタイプの見出し
  4. カッコタイプの見出し
  5. ステップ、フローなどで使える見出し
  6. POINT!CHECK! POINT! などで目立たせる見出し

1.仕切りがわかりやすい見出し

仕切りがわかりやすい見出し

HTML

<h1>こんな見出しはいかが?</h1>

CSS

h1 {
position: relative;
padding: 0.5em 1em 0.5em 2em;
border: 1px solid #ccc;
border-top: 3px solid #3498db;
background: -webkit-linear-gradient(top, #FFF 0%, #F0F0F0 100%);
background: linear-gradient(to bottom, #FFF 0%, #F0F0F0 100%);
box-shadow: 0 -1px 0 #FFF inset;
}

h1::after {
content:"";
position: absolute;
top: 1em;
left: .6em;
width: 10px;
height: 10px;
border: 3px solid #3498db;
border-radius: 100%;
z-index: 2;
}

2.まるポチタイプの見出し

まるポチタイプの見出し

HTML

<div class="samp-h1-title13">まるポチタイプの見出し</div>

CSS

.samp-h1-title13 {
font-size: 1.2rem;
font-weight: 700;
position: relative;
padding: 0em 2em 0em 3em;
margin: 0 0 1em 0;
color: #FFF;
text-align:center;
border-radius: 100vh;
background: #fa4141;
}

.samp-h1-title13::before {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 14px;
height: 14px;
background-color: #FFF;
border-radius: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.samp-h1-title13::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 14px;
height: 14px;
background-color: #FFF;
border-radius: 50%;
-webkit-transform:transform: translateY(-50%);
transform: translateY(-50%);
}

3.ワンポイントタイプの見出し

ワンポイントタイプの見出し

HTML

<div class="samp-h1-title14"><strong>★</strong>ワンポイントタイプの見出し</div>

<span>タグではなく<strong>タグを使っているのは、wordpressでは<span>にclassなどが入っていない場合、無視されてしまうためです。

wordpressで<span>タグを利用する場合は、classを付与するか、もしくはfunctionに無視されないよう設定を入れる必要があります。

CSS

.samp-h1-title14 {
font-size:1.2rem;
font-weight:700;
position: relative;
padding: 0.7em 2em 0 5em;
margin:0 0 1em 0;
border-top: 1px solid #fa4141;
}

.samp-h1-title14 strong {
display: inline-block;
position: absolute;
top: -10px;
left: 14px;
width: 60px;
height: 50px;
padding-top: 10px;
text-align: center;
color:#FFF;
background-color: #fa4141;
}

.samp-h1-title14 strong::before {
content: "";
position: absolute;
top:0;
right: -10px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid #d90606;
}

.samp-h1-title14 strong::after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 0;
height: 0;
border: 30px solid #fa4141;
border-bottom-width: 15px;
border-bottom-color: transparent;
z-index:-1;
}

4.カッコタイプの見出し

カッコタイプの見出し

HTML

<div class="samp-h1-title15">カッコタイプの見出し</div>

CSS

.samp-h1-title15 {
font-size:1.2rem;
font-weight:700;
position: relative;
padding: 1em 2em;
margin: 0 0 1em 0;
text-align: center;
}

.samp-h1-title15::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}

.samp-h1-title15::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-top: 3px solid #000;
border-left: 3px solid #000;
}

5.ステップ、フローなどで使える見出し

STEP 1ステップ、フローなどで使える見出し

HTML

<div class="samp-h1-title16"><span class="samp-h1-title16-1">STEP 1</span>
<span class="samp-h1-title16-2">ステップ、フローなどで使える見出し</span></div>

CSS

.samp-h1-title16 {
position: relative;
overflow: hidden;
height: 40px;
margin: 0 0 1em 0;
border-bottom: 3px solid #fa4141;
}

.samp-h1-title16::before {
content: "";
position: absolute;
top: -100%;
left: -60px;
width: 200px;
height: 200px;
-webkit-transform: rotate(25deg);
transform: rotate(45deg);
background-color: #fa4141;
}

.samp-h1-title16-1 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.0;
position: absolute;
display: block;
top: 0.6em;
left: 1.6em;
color: #FFF;
z-index: 1;
}

.samp-h1-title16-2 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.0;
position: relative;
display: block;
top: 0.5em;
left: 160px;
z-index: 1;
}

6.CHECK! POINT! などで目立たせる見出し

POINT!CHECK! POINT! などで目立たせる見出し

HTML

<div class="samp-h1-title17">CHECK! POINT! などで目立たせる見出し</div>

CSS

.samp-h1-title17 {
position: relative;
padding: 1rem 2rem;
margin:0 0 1em 0;
border: 3px solid #fa4141;
background-color: #FFF;
}

.samp-h1-title17::before {
content: "";
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
position: absolute;
top: -28px;
left: -3px;
height: 24px;
padding: 0 1em;
color: #FFF;
background-color: #fa4141;
border: 3px solid #fa4141;
border-bottom:none;
border-top-right-radius: 6px;
}

実際にサイト制作で使用したものもあれば、いつか使用してみたいなと思っているものもあります。また、見出しがたまったらご紹介したいと思います。

松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > 実践で使える見出しのデザイン:ちょっと目を引く編

ページトップへ