見出し<h4>デザイン

大見出し<h3>サンプル

中見出し<h4>サンプル

cssの記述

/*見出し*/
.entry-content h4 {
border-left: 3px solid #cc9966;
padding: .2em 4em;
}

h4 {padding-left: 50px;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/npo-musicgrace/20230523/20230523055212_120.jpg) no-repeat left top;
  line-height: 2.5;/*高さ*/
  border-top: dotted 0px white;
  border-bottom: solid 1px #cc9966;
}

小見出し<h５>サンプル

素材

60

https://cdn-ak.f.st-hatena.com/images/fotolife/n/npo-musicgrace/20230523/20230523055212_120.jpg

100

https://cdn-ak.f.st-hatena.com/images/fotolife/n/npo-musicgrace/20230523/20230523055243_120.jpg

80X78

https://cdn-ak.f.st-hatena.com/images/fotolife/n/npo-musicgrace/20230523/20230523055212_120.jpg

CSS見出しデザイン 参考サイト

<h2 class="heading-031">CSS見出しデザイン</h2>

https://saruwakakun.com/html-css/reference/h-design

h1 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #ff6a6a;/*文字色*/
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  background: #fffff4;
}

h1:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
}

title {
    padding-left: 30px;
    background: url(../images/icon.png) no-repeat left top;
}

title {
    padding-left: 30px;
    background: url(title {
    padding-left: 30px;
    background: url(../images/icon.png) no-repeat left top;
}

参考サイト

www.emuramemo.com