コピペでできる！CSSとhtmlだけ紙のデザインぽい見出しデザイン10選

CSS HTML
 

htmlとcssだけでできる見出し10選です。
見出し次第で、記事の読みやすさは大きく変わります。
雑誌などの紙デザインでありそうなデザイン見出しを集めました。

色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。

紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

  • 3桁の16進数カラーコード(#000)
  • RGB色相・彩度・明度(rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

browser:  ✔︎ ✔︎ ✔︎ 

紙デザインぽい [10種]

雑誌などでよく見る紙デザインぽいものです。

上下に二重のラインとサブテキスト

ニャン易度

見出しテキスト

<h1 class="cp_h1title"><span title="サブテキスト">見出しテキスト</span></h1>
.cp_h1title {
  position: relative;
  display: flex;
  justify-content: center;/*左右中央配置*/
  padding: 10px;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;/*ボーダー全体の高さ*/
  border-color: #333;
  border-style: solid;
}
.cp_h1title::before {/*上ボーダー*/
  top: 0;
  border-width:2px 0 1px 0;
}
.cp_h1title::after {/*下ボーダー*/
  bottom: 0;
  border-width:1px 0 2px 0;
}
.cp_h1title span {
  position: relative;
  display: flex;
  justify-content: center;/*左右中央配置*/
}
.cp_h1title span::before {/*サブテキスト*/
  position: absolute;
  content: attr(title);
  top: -1em;
  background: #ffffff;
  font-size: 50%;
  white-space: nowrap;
  padding: 0 10px;
}

下に三角形がついたシンプル吹き出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  display: flex;
  justify-content: center;/*左右中央配置*/
  border-bottom: 1px solid #063b40;
}
.cp_h1title::after {
  position: absolute;
  content: '';
  bottom: -8px;
  background: #063b40;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  width: 10px;
  height: 8px;
}

四隅がカットされた背景に枠が重なった見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  text-align: center;
  z-index: 1;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
  content: '';
  display: block;
  z-index: -1;
}
.cp_h1title::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a6ced3;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}
.cp_h1title::after {
  top: 3px;
  left: 3px;
  border: 1px solid #567553;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

四隅がカットされた背景に枠が重なった見出しパート2

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  text-align: center;
  z-index: 1;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
  content: '';
  display: block;
}
.cp_h1title::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  border: 1px solid #7397cc;
  filter: drop-shadow(2px 2px 2px #7397cc)drop-shadow(-1px -1px 2px #7397cc);
  z-index: -1;
}
.cp_h1title::after {
  top: 3px;
  left: 3px;
  background: #fffff;
  border: 1px solid #7397cc;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  z-index: 0;
}

サブテキストが左上についた見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title" title="サブテキスト">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  text-align: center;
  border: 1px solid #bf92b8;
  margin-left: 20px;
}
.cp_h1title::before {
  position: absolute;
  content: attr(title);
  top: -15px;
  left: -20px;
  background: #ffffff;
  font-size: 50%;
  padding: 0 10px;
}

左にナンバリングがついた見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  counter-increment: titleNum;
  margin-left: 70px;
  padding: 0 0 0 10px;
  border-left: 1px solid #000;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
}
.cp_h1title::before {
  content: counter(titleNum, decimal-leading-zero);
  top: -4px;
  left: 0;
  font-size: 50px;
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
  margin-left: -60px;
  line-height: 1;
}
.cp_h1title::after {
  content: 'PART';
  top: 0;
  left: -75px;
  background: #ffffff;
  font-size: 8px;
  border-bottom: 1px solid #000;
  transform: rotate(-45deg);
  padding: 10px 5px 0 5px;
}

四隅をホチキスで閉じたような見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title"><span>見出しテキスト</span></h1>
.cp_h1title {
  position: relative;
  border: 1px solid #0081b2;
  border-radius: 5px;
  box-shadow: 2px 2px 0 0 #0081b2;
  padding: 5px 20px;
}
.cp_h1title::before,
.cp_h1title::after,
.cp_h1title span::before,
.cp_h1title span::after {
  position: absolute;
  content: '';
  width: 10px;
  border-top: 1px solid #0081b2;
  transform: rotate(-45deg);
}
.cp_h1title span::before,
.cp_h1title span::after {
  transform: rotate(45deg);
}
.cp_h1title::before {
  top: 10px;
  left: 5px;
}
.cp_h1title::after {
  bottom: 10px;
  right: 5px;
}
.cp_h1title span::before {
  top: 10px;
  right: 5px;
}
.cp_h1title span::after {
  bottom: 10px;
  left: 5px;
}

ポイントフラグが立っている見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  padding: 0px 30px;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
  content: '';
  top: -25px;
  left: 0;
}
.cp_h1title::before {
  background: #063b40;
  clip-path: polygon(0% 0%, 0% 100%, 2px 100%, 2px 65%, 100% 40%, 90% 30%, 100% 20%);
  width: 50px;
  height: 65px;
}
.cp_h1title::after {
  content: 'Point';
  top: -10px;
  left: 6px;
  color: #fff;
  font-size: 9px;
  transform: rotate(-18deg);
}

墨付きカッコがついた見出し

ニャン易度

見出しテキスト

<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
  position: relative;
  text-align: center;
  padding: 0px 30px;
}
.cp_h1title::before,
.cp_h1title::after {
  position: absolute;
  content: '';
  background: #063b40;
  top: 0;
  width: 40px;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 5% 80%, 1% 50%, 5% 20%, 20% 0);
}
.cp_h1title::before {
  left: 0;
}
.cp_h1title::after {
  right: 0;
  transform: rotate(180deg);
}

本の背表紙のような見出し

ニャン易度
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

見出しテキスト

0123
<div class="cp_h1title"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span><h1>見出しテキスト</h1><data>0123</data></div>
.cp_h1title {
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.cp_h1title span {
  font-size: 10px;
  line-height: 1.1;
  display: block;
  width: 20%;
  padding: 5px;
  text-align: left;
}
.cp_h1title h1 {
  position: relative;
  width: calc(100% - 25%);
  margin: 0;
  padding: 0 15px;
}
.cp_h1title h1::before,
.cp_h1title h1::after {
  position: absolute;
  content: '';
  background: #000000;
  top: 0;
  width: 40px;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 5% 80%, 1% 50%, 5% 20%, 20% 0);
}
.cp_h1title h1::before {
  left: 0;
}
.cp_h1title h1::after {
  right: 0;
  transform: rotate(180deg);
}
.cp_h1title data {
  width: 5%;
  font-size: 10px;
  padding: 0 5px;
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？