【コピペ可】HTMLとCSSで見出しのコーディング9選

HTMLとCSSの見出し事例集。コピペ用の見出しの基本デザインをまとめました。

今回は、HTMLとCSSを使ったウェブデザインでよくでてくる見出しの実例集です。汎用的なデザインを集めているのでコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。無駄な装飾は避けシンプルで基本的な見出しのデザイン例のみに厳選しているので、フロントエンド初学者でもカスタマイズしてコードを再利用できます。

共通のHTMLとCSS

共通HTML

見出しはすべて同じHTMLでできています。

<div class="headline headline-skin">
  見出しのデザイン
</div>

共通CSS

全ての見出しは以下のCSSを共通して使用しています。独自CSSと合わせて設定してください。

.headline{
  padding: .5em .75em;
  line-height: 125%;
  font-size: 24px;
  font-weight: bold;
}

独自CSS

定番の見出し

見出しのデザイン
.headline-skin{
  border-bottom: solid 4px #333;
}

中央寄せの見出し

見出しのデザイン
.headline-skin{
  border-top: solid 3px #333;
  border-bottom: solid 3px #333;
  text-align: center;
}

ブログによくあるシンプルな見出し

見出しのデザイン
.headline-skin{
  border-left: solid 6px #333;
}

どこでも使える背景見出し

見出しのデザイン
.headline-skin{
  background: #eee;
}

ステッチのはいったかわいい見出し

見出しのデザイン
.headline-skin{
  border-radius: 4px;
  box-shadow: 0 0 0 6px #333;
  border: dashed 2px #ffffff;
  background: #333;
  color: #ffffff
}

吹き出しの見出し

見出しのデザイン
.headline-skin{
  position: relative;
  border-radius: 4px;
  background: #333;
  color: #ffffff
}
.headline-skin::before{
  content: "";
  position: absolute;
  left: -20px;
  top: .75em;
  display: block;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #333333;
}

マーカーの見出し

見出しのデザイン
.headline-skin{
  padding: .5em .25em;
  background: linear-gradient(to top, transparent .4em, #33333388 .4em, #33333388 1em, transparent 1em);
}

ここに注目の三角見出し

見出しのデザイン
.headline-skin{
  display: inline-flex;
  align-items: center;
}
.headline-skin::before{
  content: "▶︎";
  color: #333;
  font-size: 16px;
  margin-left: -0.75em; 
  margin-right: 0.5em;
}

さらっと見やすい見出し

見出しのデザイン
.headline-skin{
  display: flex;
  align-items: center;
}
.headline-skin::before,.headline-skin::after{
  content: "";
  display: block;
  height: 2px;
  flex: auto;
  background: #333333;
  color: #333;
  font-size: 16px;
  margin: 0 .25em;
}

HTMLとCSSの解説

HTMLの構造はほとんど変わらない

今回の見出しのHTML構造は全て同じです。見出しはテキストで完結する場合がほとんどなのでシンプルに書くことができます。

見た目が複雑でも擬似要素で対応する

スタイルが複雑になった場合もbeforeやafterなどの擬似要素で対応することである程度のデザインに対応できます
また、見出しのデザイン部分を切り分けて記述しておくことで複数のプロジェクトにおいても再利用ができるようになります。

この記事をかいてみての感想

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます!

▼感想
写経して実力をつけるもよし、雛形として使うもよしです。

▼その他にかいていきたいコピペパーツ
・ヘッダー
・フッター
・パンくずリスト
・見出し
・リスト
・アイコンボタン
・画像フレーム
・hoverアニメーション

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です