htmlとCSSで作れる見出しまとめ【コピペで簡単!】

サイトやブログのイメージをぐっと変える「見出し」。
htmlとCSSでできるあしらいをご紹介します。

シンプルな見出し

見出し

.ClassName{
background-color: red;
color:#fff;}

見出し

.ClassName{
        border:1px  solid red;
        padding: 0.5rem 1rem;
    }

見出し

   .ClassName{
        border:1px  solid red;
        padding: 0.5rem 1rem;
        background-color: #f4f4f4;
    }

見出し

    .ClassName{
        border-bottom:1px  solid red;
        padding: 0.5rem ;
    }

見出し

  .ClassName{
        border-bottom:1px  solid red;
        border-left:5px  solid red;
        padding:0.5rem 0.5rem 0.5rem 0.8rem ;
    }

見出し

 .ClassName{
        border-bottom:1px  solid red;
        padding:0.5rem 0.5rem 0.5rem 1.4rem ;
        position: relative;
        text-align: center;
    }
 .ClassName::before{
        width: 5px;
        height: 80%;
        content: "";
        background-color: red;
        position: absolute;
        left: 5px;
        top: 10%;
    }
  .ClassName span{
        border-bottom:1px  solid red;
        padding:0 0.5rem 0.5rem;
   }

見出し

 .ClassName{
        border-bottom:1px  solid red;
        border-top:1px  solid red;
        padding: 0.5rem ;
    }

見出し

.ClassName{
border-top:1px solid red;
border-bottom:1px solid red;
padding:0.5rem 0.5rem 0.5rem 1.4rem ;
position: relative;
}

.ClassName::before{
width: 5px;
height: 80%;
content: "";
background-color: red;
position: absolute;
left: 5px;
top: 10%;
}

見出し

 .ClassName{
   position: relative;
   padding:1rem ;
   text-align: center;
}
.ClassName::before{ content: "";
width: 100%;
height: 1px;
background-image:linear-gradient(90deg,transparent 0%,red 10%,red 90%,red 100%);
position: absolute;
top: 0;
left: 0;}
.ClassName::after{
content: "";
width: 100%;
height: 1px;
background-image:linear-gradient(90deg,transparent 0%,red 10%,red 90%,red 100%);
position: absolute;
bottom: 0;
left: 0;
}
FacebookTwitter

関連記事

「ブロックウィジェット」を元に戻す方法
その他 2021.08.02

「ブロックウィジェット」を元に戻す方法

希望のドメインが取れない時の究極裏技
その他 2021.05.09

希望のドメインが取れない時の究極裏技