【HTML&CSSのコピペだけ！】見出しデザイン集その1

どうもみなさん！株式会社プロットハブの山名です！
今回はサイトの見出しに使えるレイアウトを18個ご紹介します！
HTMLとプレフィックス対応済みのCSSをコピペするだけで使えるようにしているので良かったら参考にしてみてください！
レスポンシブは必要なければ削除してね(・ω<)

h1~h6タグやclass名は適宜変更してください。
また、ご紹介する例ではフォントサイズを指定していないので、閲覧環境によって適宜指定してください。

1.シンプルな下線

シンプルな下線のみのやつです。
シンプルさなら他の追随を許しません。

コードを表示

HTML

<h1>シンプルな下線</h1>

CSS

h1 {
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

@media (min-width: 769px) {
  h1 {
    border-bottom-width: 2px;
  }
}

2.途中で色が変わる下線

途中で色を変えました。
擬似要素だとpaddingとpositionの調整が微妙に難しいので、spanとlinear-gradientで指定してみました。

コードを表示

HTML

<h1 class="cp-title-2">タイトルが入ります<span></span></h1>

CSS

h1 span {
  display: block;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, red), color-stop(0%, blue));
  background: linear-gradient(to right, red 20%, blue 0%);
}

@media (min-width: 769px) {
  h1 span {
    height: 4px;
  }
}

3.点線+色変更

点線と線の色を変えました。
点線は破線(dashed)でも良いかもしれませんね。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-bottom-width: 2px;
  border-style: dotted;
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

@media (min-width: 769px) {
  h1 {
    border-bottom-width: 4px;
  }
}

4.上下にライン

上下に線です。それ以上でもそれ以下でもありません、上下だけに(は？)

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

@media (min-width: 769px) {
  h1 {
    border-top-width: 2px;
    border-bottom-width: 2px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

5.上下に太さの違う二重ライン

上下に2本線バージョン。内側の線を細くしたくて記述量が増えてしまいました。
太さが同じでも良いならborderのdoubleの方がシンプルで良いですね。

コードを表示

HTML

<h1><span>タイトルが入ります</span></h1>

CSS

h1 {
  position: relative;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

h1::before {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 2px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
  --tw-content: '';
  content: var(--tw-content);
}

h1::after {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 2px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
  --tw-content: '';
  content: var(--tw-content);
}

@media (min-width: 769px) {
  h1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  h1::before {
    content: var(--tw-content);
    height: 3px;
  }

  h1::after {
    content: var(--tw-content);
    height: 3px;
  }
}

h1 span {
  display: block;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

@media (min-width: 769px) {
  h1 span {
    border-top-width: 2px;
    border-bottom-width: 2px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

6.背景色

背景色を付けたパターン。
これもシンプルで使いやすいですね。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 769px) {
  h1 {
    padding: 0.5rem;
  }
}

7.背景色+下線

背景色に下線をつけました。
同系色でまとめ、下線の色を濃くすると良い感じに使えますよ。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-bottom-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
  padding: 0.25rem;
}

@media (min-width: 769px) {
  h1 {
    border-bottom-width: 4px;
    padding: 0.5rem;
  }
}

8.背景色+左右に斜めライン

背景色に斜め線を入れてみました。
線の位置はお好きに調整してお使いください。
プレフィックス対応込みの記述はどうしても長くなりますね。

コードを表示

HTML

<h1><span></span>タイトルが入ります<span></span></h1>

CSS

h1 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.625rem;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  text-align: center;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 769px) {
  h1 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

h1 span {
  display: inline-block;
  height: 150%;
  width: 2px;
  --tw-rotate: -20deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

h1 span:nth-of-type(1) {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}

h1 span:nth-of-type(2) {
  -webkit-transform-origin: top right;
  transform-origin: top right;
}

9.背景色グラデーション

背景色をグラデーションさせました。
色の指定と割合次第で落ち着いたサイトにも使用できます。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  background-image: -webkit-gradient(linear, right top, left top, from(var(--tw-gradient-stops)));
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(236 72 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 769px) {
  h1 {
    padding: 0.5rem;
  }
}

10.両端に横ライン

文字の左右に横ラインを入れたパターン。
spanとgapでウィンドウサイズの縮小による折り返しに強いように作りました。
線のパターンを変える場合は素直に擬似要素使った方がいいと思います。

コードを表示

HTML

<h1><span></span>タイトルが入ります<span></span></h1>

CSS

h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.625rem;
  text-align: center;
}

h1 span {
  display: inline-block;
  height: 2px;
  width: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

11.背景色+横ライン

背景色を入れたパターンです。
こちらの方がパターン10.両端に横ラインよりも使いやすいかもしれませんね。

コードを表示

HTML

<h1><span></span>タイトルが入ります<span></span></h1>

CSS

h1 {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.625rem;
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
  padding: 0.25rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -ms-grid-columns: 1fr 0.625rem 2fr 0.625rem 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

@media (min-width: 769px) {
  h1 {
    padding: 0.5rem;
  }
}

h1 span {
  display: inline-block;
  height: 2px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

12.シンプルな枠線

シンプルな枠線のみのやつです。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  padding: 0.25rem;
  text-align: center;
}

@media (min-width: 769px) {
  h1 {
    border-width: 2px;
    padding: 0.5rem;
  }
}

13.サブテキスト枠線と上部にテキスト

丈夫にサブタイトルをつけました。
レスポンシブ対応済みですが、案件によって微調整は必要かもしれません。

コードを表示

HTML

<h1><span>サブタイトル</span>タイトルが入ります</h1>

CSS

h1 {
  position: relative;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  padding: 0.5rem;
  text-align: center;
}

@media (min-width: 769px) {
  h1 {
    border-width: 2px;
    padding: 1rem;
  }
}

h1 span {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 80%;
  margin: auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 769px) {
  h1 span {
    bottom: 90%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

14.シンプルな左線

見出しでよく見るやつです。
このブログでも似たレイアウトの見出しを使っています。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  padding: 0.25rem;
  padding-left: 0.5rem;
}

@media (min-width: 769px) {
  h1 {
    border-left-width: 8px;
    padding: 0.5rem;
    padding-left: 1rem;
  }
}

15.左線+背景色

サンプル画像は見えづらいかもですが薄いグレーの背景を入れています。
左線は軒並み使いやすい印象ですね。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  padding: 0.25rem;
  padding-left: 0.5rem;
}

@media (min-width: 769px) {
  h1 {
    border-left-width: 8px;
    padding: 0.5rem;
    padding-left: 1rem;
  }
}

16.背景2色ストライプ

repeating-linear-gradientを使ってストライプを再現したパターンです。
同系色でまとめるのと濃い色を使いすぎないように気をつけましょう。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  padding: 0.25rem;
  background: repeating-linear-gradient(-45deg, #e8fcf2, #e8fcf2 3px,#a3f5cb 3px, #a3f5cb 7px);
}

@media (min-width: 769px) {
  h1 {
    padding: 0.5rem;
  }
}

17.左線+背景2色ストライプ

パターン16.背景2色ストライプに左線です。
やはり左線は見出しにピッタリですね。視線誘導の観点からも左に注目が行きやすいので自然に読めるのかもしれません。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  padding: 0.25rem;
  padding-left: 0.5rem;
  background: repeating-linear-gradient(-45deg, #fce8e8, #fce8e8 3px,#f5a3a5 3px, #f5a3a5 7px);
}

@media (min-width: 769px) {
  h1 {
    border-left-width: 8px;
    padding: 0.5rem;
    padding-left: 1rem;
  }
}

18.下線+背景2色ストライプ

今度は下線パターンです。
下に文章が続くとき、こちらもいい区切りになりメリハリがつきやすいです。

コードを表示

HTML

<h1>タイトルが入ります</h1>

CSS

h1 {
  border-bottom-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  padding: 0.25rem;
  background: repeating-linear-gradient(-45deg, #e8f2fc, #e8f2fc 3px,#a3cdf5 3px, #a3cdf5 7px);
}

@media (min-width: 769px) {
  h1 {
    border-bottom-width: 8px;
    padding: 0.5rem;
  }
}

いかがでしたか？
見出しのデザイン次第で記事の読みやすさやページの雰囲気もだいぶ変えられると思います。
あまり数が多くなると読みづらいのと記事を書くのが大変なので、小分けにして今後もちょこちょこ投稿していこうと思います笑
良かったらまたみに来てくださいね！それではまた！

ホームページ制作を大阪で安く頼むならプロットハブ！
毎月5社限定企画実施中

1.シンプルな下線

2.途中で色が変わる下線

3.点線+色変更

4.上下にライン

5.上下に太さの違う二重ライン

6.背景色

7.背景色+下線

8.背景色+左右に斜めライン

9.背景色グラデーション

10.両端に横ライン

11.背景色+横ライン

12.シンプルな枠線

13.サブテキスト枠線と上部にテキスト

14.シンプルな左線

15.左線+背景色

16.背景2色ストライプ

17.左線+背景2色ストライプ

18.下線+背景2色ストライプ

全カテゴリ一覧

全タグ一覧

ホームページ制作を大阪で安く頼むならプロットハブ！毎月5社限定企画実施中