コピペで使えるシンプル軽い見出しCSSを12種！

HTMLお勉強画像

超初心者の方：見出しタグについて

webサイトの見出しが正しく整理されていることで、ユーザーがコンテンツの内容について理解しやすくなります。そして、検索エンジンはページの階層構造を認識しやすくなるため、見出しはユーザーの利便性とSEO効果に重要となります。

見出しについては、詳しいサイトを載せておきます。

seolaboratory.jp

シンプル軽い見出し12種

CSS（ウェブページのスタイルを指定するための言語）だけで、見出しを少し目立つようにカスタマイズしましょう。

見出し：1本線

見出し①

見出し②線を少し太くしました

見出し③太さや色を変えればイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px solid #000; /*線の太さ、スタイル、色*/
}

見出し：点線

見出し①

見出し②

見出し③線の太さを変えるとイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px dotted #000; /*線の太さ、スタイル、色*/
}

見出し：２本線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 4px double #483d8b; /*線の太さ、スタイル、色*/
}

見出し：上下線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周り、上下の余白　左右の余白*/
border-top: 1px solid #db7093;/*上の線の太さ、スタイル、色*/
border-bottom: 1px solid #db7093; /*下の線の太さ、スタイル、色*/
}

見出し：上下点線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-top: 1px dotted #000;/*上の線の太さ、スタイル、色*/
border-bottom: 1px dotted #000; /*下の線の太さ、スタイル、色*/
}

見出し：上下2本線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-top: 4px double #696969;/*上の線の太さ、スタイル、色*/
border-bottom: 4px double #696969; /*下の線の太さ、スタイル、色*/
}

見出し：左に線いろいろ

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 6px solid #6495ed;/*左の線の太さ、スタイル、色*/
border-bottom: 1px solid #87ceeb; /*下の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #fff5ee;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 14px double #fa8072;*左の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #f0fff0;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 15px solid #20b2aa;*左の線の太さ、スタイル、色*/
}

見出し：ステッチ風

見出し①

.entry-content h3 {
  background:#000;/*背景色*/
  color:#fff;/*文字色*/
  font-size: 16px;
  padding:6px;/*文字周りの余白*/
  border-top:2px dashed #fff;/*上の線の太さ、スタイル、色*/
  border-bottom:2px dashed #fff;/*下の線の太さ、スタイル、色*/
  box-shadow: 0 0 0 5px #000;
}

見出し②

.entry-content h3 {
  background: #ff8c00;/*背景色*/
  color: #000;/*文字色*/
  font-size: 16px;
  padding: 6px 10px;/*文字周りの余白*/
  border: 2px dashed #fff;/*線の太さ、スタイル、色*/
  box-shadow: 0px 0px 0px 5px #ff8c00;
}

見出し：角を丸く

見出し

.entry-content h3 {
  width: 400px;/*見出し全体の幅*/
  background: #3cb371;/*背景色*/
  font-size: 16px;
  color: #fff;/*文字色*/
  padding: 10px 20px;/*文字周りの余白*/
  display: inline-block;
  line-height: 20px;/*行の高さ*/
  border-radius: 20px 0px 0px 20px;/*左側の角を丸く*/ 
}