【CSSで簡単！】見出しのおしゃれなデザイン集

当サイトは広告を含んでいます。

2024-11-29

おしゃれな見出しを作りたい・・・

サイトのデザインがおしゃれでも、見出しのデザインがかっこよく決まらない時がありますよね。

今回は、cssのみでできる見出しのおしゃれなカスタマイズを紹介させていただきます。

見出しデザイン

今回は、全て下記h1タグの見出しのカスタマイズを記載していきます。そのままcssをコピペして使っていただけますし、もちろん自分好みに編集していただいても問題ございません！

<h1>おしゃれな見出し</h1>

1.上下に線

おしゃれな見出し

CSS コードを表示

h1 {
  /* ヘッダー全体のスタイル設定 */
  position: relative; /* この指定で、デザイン用の線（before, after）を配置できます */
  background-color: #000; /* 背景色を黒に設定 */
  color: #fff; /* 文字色を白に設定 */
  padding: 20px; /* 内側の余白を20pxに設定 */
}

h1:before,
h1:after {
  /* ヘッダーの上部と下部にラインを引く設定 */
  position: absolute; /* 親要素(h1)の基準で配置 */
  left: 0; /* ラインを左端に揃える */
  width: 100%; /* ラインの幅を親要素全体に設定 */
  content: ""; /* 空の内容（擬似要素としてラインだけを表示） */
  border-top: 1px solid #fff; /* ラインのスタイル（太さ1px、実線、白色） */
}

h1:before {
  /* 上側のラインの位置を設定 */
  top: 3px; /* ヘッダーの上から3pxに配置 */
}

h1:after {
  /* 下側のラインの位置を設定 */
  bottom: 3px; /* ヘッダーの下から3pxに配置 */
}

2.両脇にグラデーションの線

おしゃれな見出し

CSS コードを表示

h1 {
  /* h1要素の基本スタイル */
  display: flex; /* 要素を横並びに配置するためにflexboxを使用 */
  align-items: center; /* 子要素を垂直方向に中央揃え */
  justify-content: center; /* 子要素を水平方向に中央揃え */
  font-weight: bold; /* 文字を太字に設定 */
  position: relative; /* 擬似要素(::before, ::after)の位置指定の基準にする */
}

h1::before,
h1::after {
  /* h1の前後に引くラインを設定 */
  content: ""; /* 擬似要素として何も表示しない（デザイン用のラインのみ） */
  flex: 1; /* ラインの幅を自動で調整し、両端を均等に広げる */
  height: 1px; /* ラインの太さを1pxに設定 */
  background: linear-gradient(to right, #FDFDFD, #D1C9AD, #FDFDFD); /* ラインの色をグラデーションで設定 */
  margin: 0 25px; /* ラインの間隔を左右25pxに設定 */
}

3.両脇に点線

おしゃれな見出し

CSS コードを表示

h1 {
  /* h1要素の基本スタイル設定 */
  display: flex; /* 子要素を横並びに配置するためのflexboxを使用 */
  align-items: center; /* 子要素を垂直方向に中央揃え */
  justify-content: center; /* 子要素を水平方向に中央揃え */
  font-weight: bold; /* 文字を太字に設定 */
  position: relative; /* 擬似要素（::before, ::after）の位置基準を設定 */
}

h1::before,
h1::after {
  /* h1の前後に引くラインの設定 */
  content: ""; /* 擬似要素として何も表示せず、デザイン用のラインのみを表示 */
  flex: 1; /* ラインの幅を自動調整し、テキストを中心に保つ */
  height: 1px; /* ラインの高さ（太さ）を1pxに設定 */
  border-top: 1px dashed #D1C9AD; /* 点線のスタイルと色を設定 */
  margin: 0 20px; /* ラインとテキストの間隔を左右20pxに設定 */
}