おしゃれなCSSポイント見出しデザイン！簡単コピペで現場ですぐに使える！

2023 4/16

2023年3月19日 2023年4月16日

WEBデザインの現場で実際に使っているCSS見出しをまとめてみました。
コピペで直ぐに実装できます。
色を変えたり、CSSの組み合わせ次第で見出しデザインの幅が広がりますよ。
一応レスポンシブ対応で作っていますが、崩れたら修正してください汗

01 数字にくいこんでる系

POINT

▼HTML/CSS

<div class="header01"><p>POINT</p>01</div>

.header01{
　font-size: 80px;
　display: flex;
　justify-content: center;
　align-items: center;
　margin: 0;
}
.header01 p {
   font-size: 20px;
   margin-right: -20px;
   background-color: #d9d3ca;
   z-index: 999;
   height: 25px;
   line-height: 1.4;
}

使いたいページの背景色に合わせて『background-color: #d9d3ca;』の色コードを変更してください。

02 真ん中に区切り

POINT

<div class="header03"><span>POINT</span><p>01</p></div>

.header03{
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
}
.header03 p {
 font-size: 80px;
 margin-left: 50px;
 position: relative;
}
.header03 p::before {
 position: absolute;
 content: "";
 top: 38%;
 left: -26%;
 width: 2px;
 height: 35px;
 background-color: #000;
 transform: rotate( 30deg );
}
.header03 span {
 font-size: 20px;
}

03 ラインとPOINT

▼html/CSS

<div class="header02"><span>POINT</span><p>01</p></div>

.header02{
　font-size: 20px;
　margin: 0;
　width: 100%;
　display: flex;
　justify-content: center;
　align-items: center;
}
.header02 p {
　font-size: 80px;
　margin-right: 10px;
　position: relative;
}
.header02 p::before {
　content: "point";
　position: absolute;
　top: 29%;
　left: -50%;
　font-size: 20px;
}
.header02 span{
width:30%;
height:1px;
display:block;
background-color: #000;

}

04 あしらいっぽくPOINT

01point

<div class="header04"><span>p</span><span>o</span><span>i</span><span>n</span><span>t</span><p>01</p></div>

.header04{
    font-size: 20px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header04 p{
    font-size: 80px;
    position: relative;
}
.header04 p span{
    font-size: 20px;
}
.header04 span:nth-child(1){
    position: absolute;
    top: 30%;
    left: -22.5%;
    transform: rotate( -90deg );
}
.header04 span:nth-child(2){
position: absolute;
    top: 20%;
    left: -16%;
    transform: rotate( -70deg );
}
.header04 span:nth-child(3){
    position: absolute;
    top: 12%;
    left: -4%;
    transform: rotate( -45deg );
}
.header04 span:nth-child(4){
    position: absolute;
    top: 7%;
    left: 6%;
    transform: rotate( -25deg );
}
.header04 span:nth-child(5){
    position: absolute;
    top: 5%;
    left: 25%;
    transform: rotate( -5deg );
}

05 高さのあるポイント

POINT

.header05{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  justify-content: center;
}
.header05 p{
    font-size: 80px;
    position: relative;
    margin: 25px 0 0 0;
}
.header05 p::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    top: 0;
    left: 50%;
    background-color: black;
}

06 フキダシっぽい見出し

小見出しにも使えそうです

POINT 01

<div class="header06"><p>POINT 01</p></div>

.header06{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 25px;
  justify-content: center;
}
.header06 p{
  position: relative;
}
.header06 p::before{
    content: "";
    position: absolute;
    top: 7px;
    left: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 35px 3px 0 3px;
    border-color: black transparent transparent transparent;
    transform: rotate(-40deg);
}
.header06 p::after{
    content: "";
    position: absolute;
    top: 7px;
    left: 130px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 35px 3px 0 3px;
    border-color: black transparent transparent transparent;
    transform: rotate(40deg);
}

07 垂れ幕っぽいあしらい付き見出し

POINT 01

<div class="header07"><p>POINT 01</p></div>

.header07{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header07 p{
  font-size: 25px;
  position: relative;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  padding: 5px 20px 5px 50px;
}
.header07 p::before{
    content: "";
    position: absolute;
    top: -10px;
    left: 15px;
    width: 20px;
    height: 50px;
    background-color: #898787;
    z-index: -1;
}

08　左右にシンプルラインをあしらいっぽく

POINT

<div class="header08">POINT<p>01</p></div>

.header08{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.header08 p{
  font-size: 25px;
  padding-left: 10px;
  position: relative;
}
.header08 p::before{
    content: "";
    position: absolute;
    top: 10px;
    left: -93px;
    width: 50px;
    height: 1px;
    background-color: black;
    transform: rotate(-40deg);
}
.header08 p::after{
    content: "";
    position: absolute;
    top: 30px;
    left: 36px;
    width: 50px;
    height: 1px;
    background-color: black;
    transform: rotate(-40deg);
}

よかったらシェアしてね！