WEBデザインの現場で実際に使っているCSS見出しをまとめてみました。
コピペで直ぐに実装できます。
色を変えたり、CSSの組み合わせ次第で見出しデザインの幅が広がりますよ。
一応レスポンシブ対応で作っていますが、崩れたら修正してください汗
01 数字にくいこんでる系
POINT
01▼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
01
<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
01
▼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
01
.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
01
<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);
}