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

2023 3/26

2023年3月19日 2023年3月26日

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

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