Webデザイナーブログから学ぶホームページ制作

ホームページのデザインは、単なる情報提供だけでなく、視覚的な魅力も提供することが求められます。
その中でも、タイトルや見出しに線や背景を飾ることで、コンテンツの視覚的な印象を向上させることができます。
タイトルや見出しはウェブページの印象を大きく左右する要素の一つです。CSS（Cascading Style Sheets）は、ウェブデザイナーに対して強力なツールを提供しており、これを活用してタイトルや見出しに線や背景を飾ることで、コンテンツの引きつける力を高めることが可能です。

今回は、CSSでタイトルや見出しに線や背景を飾るデザイン30選を解説します。

見出し（Heading）は、文章の中でセクションや内容の区切りを示すためのテキスト要素です。ホームページ内での情報の整理や階層構造を示すのに使用されます。通常、見出しは大きな文字で表示され、太字や色の違いなどを用いて視覚的に強調されます。

HTML（HyperText Markup Language）では、「h1」から「h6」までのタグが存在し、数字が大きいほど重要度が低くなる階層的な見出しを示します。

例えば、「h1」は通常ページの最上位のタイトルを表し、「h2」はその下のセクション、「h3」は更にその下のサブセクションといったようになります。
見出しはウェブページのユーザーエクスペリエンスを向上させるための重要な要素であり、適切に使用されることでコンテンツの構造を分かりやすくし、読みやすさを提供します。

また、検索エンジンにとってもページの構造を理解するための指針となり、SEOの一環としても重要です。

CSSでタイトルや見出しに線や背景を飾るデザインを実装する場合は、線「border」や背景「background」のプロパティを使用してを実装します。
タイトルや見出しに線を実装させるためには、CSSに「border」プロパティを記述し、線の要素に幅や色の値を記述します。また、タイトルや見出しに背景を実装させるためには、CSSに「background」プロパティを記述し、背景の要素に色等の値を記述します。

タイトルや見出しをアンダーライン（下線）で装飾した見出しにするには、「border-bottom」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text01 {
  display: inline-block;
  font-weight:bold;
  border-bottom: solid 3px #000;
  margin: 0 auto 50px;
  padding: 0 0 5px 0;
}

タイトルや見出しをアンダーライン（下線）点線で装飾した見出しにするには、「border-bottom」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。
※「border」要素には、破線「dashed」や点線「dotted」を記述します。

.sample_text02 {
  display: inline-block;
  font-weight:bold;
  border-bottom: dotted 3px #38b3f2;
  margin: 0 auto 50px;
  padding: 0 0 5px 0;
}

タイトルや見出しをアンダーライン（下線）二重線で装飾した見出しにするには、「border-bottom」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text03 {
  display: inline-block;
  font-weight:bold;
  border-bottom: double 3px #38b3f2;
  margin: 0 auto 50px;
  padding: 0 0 5px 0;
}

タイトルや見出しを左にライン（線）で装飾した見出しにするには、「border-left」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text04 {
  display: inline-block;
  font-weight:bold;
  border-left: solid 3px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 0 5px 5px;
}

タイトルや見出しを上下にライン（線）で装飾した見出しにするには、「border-top」プロパティと「border-bottom」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text05 {
  display: inline-block;
  font-weight:bold;
  border-top: solid 3px #38b3f2;
  border-bottom: solid 3px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 5px 5px 5px;
}

タイトルや見出しを左と下にライン（線）で装飾した見出しにするには、「border-left」プロパティと「border-bottom」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text06 {
  display: inline-block;
  font-weight:bold;
  border-left: solid 5px #38b3f2;
  border-bottom: solid 1px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 5px 5px 5px;
}

タイトルや見出しをライン（線）で囲う装飾した見出しにするには、「border」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text07 {
  display: inline-block;
  font-weight:bold;
  border: solid 1px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 5px 5px 5px;
}

タイトルや見出しを角丸ライン（線）で囲う装飾した見出しにするには、「border」プロパティと「border-radius」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text08 {
  display: inline-block;
  font-weight:bold;
  border: solid 1px #38b3f2;
  border-radius: 10px;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色を装飾した見出しにするには、「background」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text09 {
  display: inline-block;
  font-weight:bold;
  border: solid 1px #38b3f2;
  border-radius: 10px;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色をいれアンダーライン（下線）を装飾した見出しにするには、「background」プロパティと「border」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text10 {
  display: inline-block;
  font-weight:bold;
  background:#a2dffe;
  border-bottom: solid 2px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色をいれ左にライン（線）を装飾した見出しにするには、「background」プロパティと「border」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text11 {
  display: inline-block;
  font-weight:bold;
  background:#a2dffe;
  border-left: solid 5px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色をいれ内側にライン（線）点線を装飾した見出しにするには、「box-shadow」プロパティと「border」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text12 {
  display: inline-block;
  font-weight:bold;
  box-shadow: 0px 0px 0px 8px #a2dffe;
  border: dashed 1px #38b3f2;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色をいれ内側に白ライン（線）点線を装飾するには、「background」プロパティと「box-shadow」プロパティと「border」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text13 {
  display: inline-block;
  font-weight:bold;
  background: #a2dffe;
  box-shadow: 0px 0px 0px 8px #a2dffe;
  border: dashed 1px #fff;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}

タイトルや見出しの背景に色をいれ内側に白ライン（線）点線を装飾し剥がれた見出しにするには、「background」プロパティと「box-shadow」プロパティと「border」プロパティを使って実装します。 また、剥がれたイメージを実装するには、「after」classを記述して装飾します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text14 {
  position: relative;
  display: inline-block;
  font-weight:bold;
  background: #a2dffe;
  box-shadow: 0px 0px 0px 5px #a2dffe;
  border: dashed 2px #fff;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}
.sample_text14::after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #4ea5f9;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

タイトルや見出しをリボン風に装飾した見出しにするには、「before」classを記述して実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text15 {
  position: relative;
  display: inline-block;
  font-weight:bold;
  background: #a2dffe;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}
.sample_text15::before {
  position: absolute;
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

タイトルや見出しを蛍光マーカー風に装飾した見出しにするには、「background」プロパティを使って実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text16 {
  position: relative;
  display: inline-block;
  font-weight:bold;
  background: linear-gradient(transparent 50%, #77bcff 50%);
  margin: 0 auto 50px;
  padding: 0 10px 0 10px;
}

タイトルや見出しを2色でアンダーライン（下線）を装飾した見出しにするには、「border-bottom」プロパティと「after」classを記述して実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text17 {
  position: relative;
  display: inline-block;
  font-weight:bold;
  border-bottom: solid 3px #d5d5d5;
  margin: 0 auto 50px;
  padding: 5px 0 5px 0;
}
.sample_text17::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #77bcff;
  bottom: -3px;
  width: 30%;
}

タイトルや見出しを2色を重ねてアンダーライン（下線）を装飾した見出しにするには、「border-bottom」プロパティと「after」classを記述して実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text18 {
  position: relative;
  display: inline-block;
  font-weight:bold;
  border-bottom: solid 3px #dadada;
  margin: 0 auto 50px;
  padding: 5px 0 5px 0;
}
.sample_text18:after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 3px;
  background-color: #77bcff;
}

タイトルや見出しを左右に線を装飾した見出しにするには、「before」classと「after」classを記述し、「border-bottom」プロパティで実装します。

※「display: inline-block;」を削除すれば横幅いっぱいの見出しが実装できます。

.sample_text19 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  text-align: center;
}
.sample_text19::before,
.sample_text19::after {
  content: '';
  width: 70px;
  height: 3px;
  background-color: #e3bf00;
}
.sample_text19::before {
  margin-right: 20px;
}
.sample_text19::after {
  margin-left: 20px;
}

タイトルや見出しを吹き出し風に装飾した見出しにするには、「before」classと「after」classを記述し、「background-color」プロパティで実装します。

.sample_text20 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:bold;
  text-align: center;
}
.sample_text20::before,
.sample_text20::after {
  content: '';
  width: 3px;
  height: 40px;
  background-color: #77bcff;
}
.sample_text20::before {
  margin-right: 30px;
  transform: rotate(-35deg)
}
.sample_text20::after {
  margin-left: 30px;
  transform: rotate(35deg)
}

タイトルや見出しを半透明の英字を背景に装飾した見出しにするには、htmlコード内に「data-en=」を追記し、「transform」プロパティを記述して実装します。

.sample_text21 {
  position: relative;
  font-weight:bold;
  text-align: center;
  margin: 0 auto 50px;
}
.sample_text21 span {
  position: relative;
  z-index: 2;
}
.sample_text21::before {
  content: attr(data-en);
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(119,188,255,0.2);
  font-size: 80px;
  font-style: italic;
}

タイトルや見出しを半透明のサイン風英字を背景に装飾した見出しにするには、htmlコード内に「data-en=」を追記し、「transform」プロパティを記述して実装します。

.sample_text22 {
  position: relative;
  font-weight:bold;
  margin: 0 auto 50px;
}
.sample_text22 span {
  position: relative;
  z-index: 2;
}
.sample_text22::before {
  content: attr(data-en);
  position: absolute;
  transform: rotate(-5deg);
  top: -90px;
  left: 0;
  color: rgba(119,188,255,0.3);
  font-size: 80px;
  font-weight: normal;
  font-family:serif;
  font-style: italic;
}

タイトルや見出しを上部にライン（線）と英字を装飾した見出しにするには、「text-transform」プロパティを記述して実装します。

.sample_text23 {
  position: relative;
  font-weight:bold;
  margin: 0 auto 50px;
}
.sample_text23 span {
  display: flex;
  align-items: center;
  color: #77bcff;
  font-size: 18px;
  text-transform: uppercase;
}
.sample_text23 span::before {
  content: '';
  display: inline-block;
  margin-right: 20px;
  width: 40px;
  height: 1px;
  background-color: #77bcff;
}

タイトルや見出しを数字と線を組み合わせ装飾した見出しにするには、htmlコード内に「data-number=」を追記し、「content」プロパティを記述して実装します。

.sample_text24 {
  position: relative;
  font-weight:bold;
  margin: 0 auto 50px;
}
.sample_text24::before {
  content: attr(data-number);
  display: inline-block;
  margin-right: 20px;
  color: #77bcff;
  font-size: 30px;
  border-bottom: 1px solid #77bcff;
}

タイトルや見出しを数字と線を上部に組み合わせ装飾した見出しにするには、htmlコード内に「data-number=」を追記し、「transform」プロパティを記述して実装します。

.sample_text25 {
  position: relative;
  font-weight:bold;
  text-align: center;
  margin: 0 auto 50px;
}
.sample_text25::before {
  content: attr(data-number);
  display: block;
  margin-bottom: 30px;
  color: #77bcff;
  font-size: 50px;
}
.sample_text25::after {
  content: '';
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background-color: #77bcff;
}

タイトルや見出しをカギカッコで装飾した見出しにするには、「before」classと「after」classを記述し、「border」プロパティで実装します。

.sample_text26 {
  position: relative;
  font-weight:bold;
  line-height: 1.4;
  padding:5px 10px 5px 10px;
  display: inline-block;
}
.sample_text26:before, .sample_text26:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.sample_text26:before {
  border-left: solid 1px #ff5722;
  border-top: solid 1px #ff5722;
  top:0;
  left: 0;
}
.sample_text26:after {
  border-right: solid 1px #ff5722;
  border-bottom: solid 1px #ff5722;
  bottom:0;
  right: 0;
}

タイトルや見出しをカッコで装飾した見出しにするには、「before」classと「after」classを記述し、「border」プロパティで実装します。

.sample_text27 {
  position: relative;
  padding:5px 10px 5px 10px;
  display: inline-block;
  top:0;
  margin: 0 auto 50px;
}
.sample_text27:before, .sample_text27:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.sample_text27:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.sample_text27:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

タイトルや見出しを一文字を大きく装飾した見出しにするには、「first-letter」classを記述して実装します。

.sample_text29 {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}
.sample_text29:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  font-size:16px;
  left: 0;
  top: 0;
  color: #77bcff;
  font-weight: 900;
}

タイトルや見出しをチェックマークを装飾した見出しにするには、「before」classを記述し、Webアイコンを設定し実装します。

.sample_text29 {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}
.sample_text29:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  font-size:16px;
  left: 0;
  top: 0;
  color: #77bcff;
  font-weight: 900;
}

タイトルや見出しを矢印を装飾した見出しにするには、「before」classを記述し、Webアイコンを設定し実装します。

.sample_text30 {
  position: relative;
  display: inline-block;
}
.sample_text30:after { 
  position: relative;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 1.0em;
  color: #77bcff;
}
.sample_text30:after {
  content:"\f054";
  padding-left: 10px;
}

CSSでテキストマウスオーバー時に「ホバーアクション（ホバーエフェクト）」する方法

見出しはウェブページの内容を整理し、階層的な構造を示すための重要な要素です。適切な見出しの使用は、読者にとってコンテンツを理解しやすくするだけでなく、検索エンジン最適化（SEO）の向上にも役立ちます。
見出しのデザインは単なる視覚的な飾りではなく、ユーザー体験を向上させる手段でもあります。線や背景を用いた装飾は、重要な情報を際立たせる効果があり、読者の注意を引きやすくなります。
また、CSSを使って見出しのデザインをカスタマイズすることで、ウェブページのスタイルに一貫性を持たせることもできますので、色んなパターンの見出しを作成できるようにCSSの記述方法を知っておくとよいでしょう。