【HTML/CSS】シンプルでよく使うCSS見出しデザイン4選

ウェブサイトのデザインにおいて、見出しはコンテンツの要点を伝える重要な要素です。シンプルながらも視覚的に魅力的な見出しデザインを使用することで、ユーザーの注意を引き、コンテンツの理解を助けます。本記事では、よく使われるシンプルなCSS見出しデザインを4つ紹介し、それぞれの実装方法を具体的なコード例とともに解説します。

見出しの両端に線

デザイン概要

見出しの左右に線を配置することで、テキストを引き立たせ、視覚的なバランスを整えます。シンプルながらも効果的なデザインで、多くのウェブサイトで利用されています。

実装方法

<h1 class="heading">タイトル見出し</h1>

.heading{
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 50px auto;
}
.heading::before,
.heading::after{
  content: "";
  display: inline-block;
  background-color: #000;
  width: 50px;
  height: 1px;
}

コード解説

• .headingクラス:
  • display: flex;とalign-items: center;、justify-content: center;でコンテンツを中央に配置。
  • gap: 20px;で見出しと線の間にスペースを設けます。
• 擬似要素 ::before と ::after:
  • 見出しの左右に線を表示するために使用。
  • background-color: #000;で線の色を黒に設定。
  • width: 50px;とheight: 1px;で線の長さと太さを調整。

見出しの両端に吹き出し

デザイン概要

見出しの両端に吹き出し風の装飾を追加することで、動きやアクセントを加え、視覚的な興味を引きます。ポップなデザインやカジュアルなウェブサイトに適しています。

実装方法

<h1 class="heading">タイトル見出し</h1>

.heading{
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 50px auto;
}
.heading::before,
.heading::after{
  content: "";
  display: inline-block;
  background-color: #000;
  width: 50px;
  height: 1px;
}
.heading::before{
  transform: rotate(45deg);
  transform-origin: center;
}
.heading::after{
  transform: rotate(-45deg);
  transform-origin: center;
}

コード解説

• 基本の.headingクラス:
  • 前述の「見出しの両端に線」と同様の設定。
• 擬似要素 ::before と ::after:
  • 吹き出し風にするため、線を45度と-45度に回転。
  • transform: rotate(45deg); と transform: rotate(-45deg); で斜めに配置し、吹き出しのような見た目を実現。

見出しの両端カギ括弧その1

デザイン概要

見出しの両端にカギ括弧を配置することで、引用や強調を表現します。洗練されたデザインで、ブログやニュースサイトに適しています。

実装方法

<h1 class="heading">タイトル見出し</h1>

.heading{
  font-size: 30px;
  font-weight: bold;
  width: fit-content;
  padding: 20px 60px;
  margin: 50px auto;
  position: relative;
}
.heading::before,
.heading::after{
  content: "";
  display: inline-block;
  border: 1px solid #000;
  aspect-ratio: 1;
  width: 30px;
  position: absolute;
}
.heading::before{
  border-right: none;
  border-bottom: none;
  top: 0;
  left: 0;
}
.heading::after{
  border-left: none;
  border-top: none;
  bottom: 0;
  right: 0;
}

コード解説

• .headingクラス:
  • width: fit-content;で見出しの幅を内容に合わせる。
  • padding: 20px 60px;で内部にスペースを確保。
  • position: relative;で擬似要素の絶対配置を可能に。
• 擬似要素 ::before と ::after:
  • カギ括弧を表現するため、四角形の枠線を組み合わせて斜めに配置。
  • border: 1px solid #000;で枠線を黒に設定。
  • aspect-ratio: 1;とwidth: 30px;で正方形のサイズを設定。
  • ::before は左上に配置し、右と下の枠線を削除。
  • ::after は右下に配置し、左と上の枠線を削除。

見出しの両端カギ括弧その2

デザイン概要

カギ括弧その2では、カギ括弧の形状や配置を微調整して、よりスタイリッシュな見出しデザインを実現します。クリーンでモダンなデザインに適しています。

実装方法

<h1 class="heading">タイトル見出し</h1>

.heading{
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px auto;
  position: relative;
  gap: 50px;
}
.heading::before,
.heading::after{
  content: "";
  display: inline-block;
  border: 1px solid #000;
  aspect-ratio: 1/3;
  width: 20px;
}
.heading::before{
  border-right: none;
}
.heading::after{
  border-left: none;
}

コード解説

• .headingクラス:
  • display: flex;とalign-items: center;、justify-content: center;で見出しとカギ括弧を水平中央に配置。
  • gap: 50px;で見出しとカギ括弧の間に広いスペースを設けます。
  • position: relative;で擬似要素の絶対配置を可能に。
• 擬似要素 ::before と ::after:
  • カギ括弧を細長くするために、aspect-ratio: 1/3;とwidth: 20px;で縦長の矩形を作成。
  • border: 1px solid #000;で枠線を黒に設定。
  • ::before は左側に配置し、右側の枠線を削除。
  • ::after は右側に配置し、左側の枠線を削除。

まとめ

以上、シンプルでよく使うCSS見出しデザイン4選を紹介しました。これらのデザインは、ウェブサイトの見出しを視覚的に魅力的にし、ユーザーの注目を引くために効果的です。以下に各デザインの特徴を簡単にまとめます。

主なポイント:

• 見出しの両端に線: シンプルでバランスの取れたデザイン。多用途に使用可能。
• 見出しの両端に吹き出し: ポップで動きのあるデザイン。カジュアルなサイトに最適。
• 見出しの両端カギ括弧その1: 引用や強調に適したデザイン。洗練された印象を与えます。
• 見出しの両端カギ括弧その2: モダンでクリーンなデザイン。スタイリッシュなサイトにおすすめ。

ベストプラクティス:

• 適切なスペーシング: gapやmarginを調整して、見出しと装飾のバランスを取ります。
• レスポンシブデザイン: 各デザインが異なる画面サイズでも美しく表示されるように、メディアクエリを活用します。
• アクセシビリティの確保: 見出しのfont-sizeやcolorを適切に設定し、読みやすさを向上させます。

これらのデザインを参考にして、あなたのウェブサイトの見出しをより魅力的にカスタマイズしてみてください。シンプルなスタイルでも、適切な装飾を加えることで、コンテンツの印象を大きく変えることができます。