【コピペで使用OK！】シンプルでおしゃれな見出しデザイン

2024年7月26日2024年8月29日

misa

こんにちは、ウェブデザインパレットのmisaです。

シンプルでおしゃれな見出しデザインをまとめました。

どの見出しもHTMLとCSSのみで表示できます。

コピペOKなので、ぜひアレンジして使ってみてください＾＾

Contents

交差するフレーム

title-01

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-01">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-01 {
  position: relative;
  padding: 8px 16px;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-01::before, .title-01::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 1px;
  height: calc(100% + 16px);
  background: #333;
}

.title-01::before {
  left: 8px;
}

.title-01::after {
  right: 8px;
}

title-02

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-02">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-02 {
  position: relative;
  padding: 8px 16px;
  border-top: solid 3px #333;
  border-bottom: solid 3px #333;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-02::before, .title-02::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 3px;
  height: calc(100% + 16px);
  background: #333;
}

.title-02::before {
  left: 8px;
}

.title-02::after {
  right: 8px;
}

隙間の開いたフレーム

title-03

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-03">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-03 {
  position: relative;
  padding: 8px 16px;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-03::before, .title-03::after {
  content: '';
  position: absolute;
  width: 1px;
  height: calc(100% - 16px);
  background: #333;
  align-items: center;
}

.title-03::before {
  left: -8px;
}

.title-03::after {
  right: -8px;
}

title-04

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-04">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-04 {
  position: relative;
  padding: 8px 16px;
  border-top: solid 3px #333;
  border-bottom: solid 3px #333;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-04::before, .title-04::after {
  content: '';
  position: absolute;
  width: 3px;
  height: calc(100% - 16px);
  background: #333;
  align-items: center;
}

.title-04::before {
  left: -8px;
}

.title-04::after {
  right: -8px;
}

四角い影付きのフレーム

title-05

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-05">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-05 {
  position: relative;
  padding: 8px 16px;
  outline: 1px solid #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-05::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #eee9e6;
  z-index:-999;
}

title-06

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-06">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-06 {
  position: relative;
  padding: 8px 16px;
  outline: 3px solid #333;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-06::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #eee9e6;
  z-index:-999;
}

二重線フレーム×三角の影

title-07

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-07">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-07 {
  position: relative;
  padding: 8px 16px;
  outline: 1px solid #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-07::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 40px;
  height: 40px;
  background: #d0e0e5;
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  z-index:-999;
}

.title-07::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  outline: 1px solid #333;
}

title-08

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-08">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-08 {
  position: relative;
  padding: 8px 16px;
  outline: 3px solid #333;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-08::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 40px;
  height: 40px;
  background: #d0e0e5;
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  z-index:-999;
}

.title-08::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  outline: 3px solid #333;
}

斜線フレーム

title-09

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-09">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-09 {
  position: relative;
  border: solid 1px #333;
  padding: 8px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-09::before, .title-09::after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}

.title-09::before {
  border-left: solid 1px #333;
  top:2px;
  left: 2px;
}

.title-09::after {
  border-right: solid 1px #333;
  bottom:2px;
  right: 2px;
}

title-10

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-10">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-10 {
  position: relative;
  border: solid 3px #333;
  padding: 8px 16px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-10::before, .title-10::after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}

.title-10::before {
  border-left: solid 3px #333;
  top:2px;
  left: 2px;
}

.title-10::after {
  border-right: solid 3px #333;
  bottom:2px;
  right: 2px;
}

二重線フレーム×背景ベタ

title-11

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-11">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-11 {
  position: relative;
  padding: 8px 16px;
  outline: 1px solid #333;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-11::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 98%;
  height: 82%;
  background: #eee9e6;
  z-index: -999;
}

.title-11::after {
  content: "";
  position: absolute;
  bottom:-6px;
  right: -6px;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  width: 98%;
  height: 98%;
}

title-12

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-12">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-12 {
  position: relative;
  padding: 8px 16px;
  outline: 3px solid #333;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-12::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 98%;
  height: 82%;
  background: #eee9e6;
  z-index: -999;
}

.title-12::after {
  content: "";
  position: absolute;
  bottom:-6px;
  right: -6px;
  border-right: solid 3px #333;
  border-bottom: solid 3px #333;
  width: 98%;
  height: 98%;
}

背景ベタ×内側フレーム

title-13

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-13">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-13 {
  position: relative;
  background: #333;
  padding: 8px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-13::before {
  content:'';
  position: absolute;
  top: 6px;
  left: 6px;
  border: solid 1px #fff;
  width: 98%;
  height: 80%;
}

title-14

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-14">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-14 {
  position: relative;
  background: #333;
  padding: 8px 16px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-14::before {
  content:'';
  position: absolute;
  top: 6px;
  left: 6px;
  border: solid 3px #fff;
  width: 98%;
  height: 80%;
}

二重ボーダー×ボーダー

title-15

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-15">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-15 {
  border-top: double 3px #333;
  border-bottom: solid 1px #333;
  padding: 8px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

title-16

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-16">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-16 {
  border-top: double 7px #333;
  border-bottom: solid 3px #333;
  padding: 8px 16px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

斜線カッコ

title-17

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-17"><span>シンプルでおしゃれな見出しデザイン</span></h1>

CSS

h1.title-17 {
  position: relative;
  padding: 8px 16px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-17::before, .title-17::after {
  content:'';
  position: absolute;
  width: 30px;
  height: 30px;
}

.title-17::before {
  border-left: solid 1px #333;
  border-top: solid 1px #333;
  top:0;
  left: 0;
}

.title-17::after {
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  bottom:0;
  right: 0;
}

.title-17 span:before, .title-17 span:after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}

.title-17 span:before {
  border-left: solid 1px #333;
  top:2px;
  left: 2px;
}

.title-17 span:after {
  border-right: solid 1px #333;
  bottom:2px;
  right: 2px;
}

title-18

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-18"><span>シンプルでおしゃれな見出しデザイン</span></h1>

CSS

h1.title-18 {
  position: relative;
  padding: 8px 16px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-18::before, .title-18::after {
  content:'';
  position: absolute;
  width: 30px;
  height: 30px;
}

.title-18::before {
  border-left: solid 3px #333;
  border-top: solid 3px #333;
  top:0;
  left: 0;
}

.title-18::after {
  border-right: solid 3px #333;
  border-bottom: solid 3px #333;
  bottom:0;
  right: 0;
}

.title-18 span::before, .title-18 span::after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}

.title-18 span::before {
  border-left: solid 3px #333;
  top:2px;
  left: 2px;
}

.title-18 span::after {
  border-right: solid 3px #333;
  bottom:2px;
  right: 2px;
}

スラッシュ

title-19

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-19">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-19 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-19::before, .title-19::after {
  content:'';
  position: absolute;
  top: 50%;
  background: #333;
  width: 40px;
  height: 1px;
  rotate: 60deg;
display: inline-block;
}

.title-19::before {
  left: 0;
}

.title-19::after {
  right: 0;
}

title-20

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-20">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-20 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-20::before, .title-20::after {
  content:'';
  position: absolute;
  top: 50%;
  background: #333;
  width: 40px;
  height: 3px;
  rotate: 60deg;
display: inline-block;
}

.title-20::before {
  left: 0;
}

.title-20::after {
  right: 0;
}

スラッシュ×ボーダー

title-21

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-21">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-21 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-21::before {
  content:'';
  position: absolute;
  top: 50%;
  right: -12px;
  background: #333;
  width: 52px;
  height: 1px;
  rotate: 60deg;
  display: inline-block;
}

.title-21::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 6px;
  background: #333;
  width: 60%;
  height: 1px;
}

title-22

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-22">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-22 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-22::before {
  content:'';
  position: absolute;
  top: 50%;
  right: -12px;
  background: #333;
  width: 52px;
  height: 3px;
  rotate: 60deg;
  display: inline-block;
}

.title-22::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 4px;
  background: #333;
  width: 60%;
  height: 3px;
}

斜めカッコ

title-23

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-23"><span>シンプルでおしゃれな見出しデザイン<span></h1>

CSS

h1.title-23 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-23::before, .title-23::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 1px;
  rotate: -60deg;
  display: inline-block;
}

.title-23::before {
  top: 35%;
  left: 0;
}

.title-23::after {
  bottom: 35%;
  right: 0;
}

.title-23 span::before, .title-23 span::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 1px;
  display: inline-block;
}

.title-23 span::before {
  left: 30px;
  top: 4px;
}

.title-23 span::after {
  right: 30px;
  bottom: 4px;
}

title-24

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-24"><span>シンプルでおしゃれな見出しデザイン<span></h1>

CSS

h1.title-24 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-24::before, .title-24::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 3px;
  rotate: -60deg;
  display: inline-block;
}

.title-24::before {
  top: 35%;
  left: 0;
}

.title-24::after {
  bottom: 35%;
  right: 0;
}

.title-24 span::before, .title-24 span::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 3px;
  display: inline-block;
}

.title-24 span::before {
  left: 30px;
  top: 4px;
}

.title-24 span::after {
  right: 28px;
  bottom: 4px;
}

斜めストライプのボーダー

title-25

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-25">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-25 {
  position: relative;
  padding: 4px 8px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 480px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-25::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, transparent 25%, #d8bfd8 25%, #d8bfd8 50%, transparent 50%, transparent 75%, #d8bfd8 75%, #d8bfd8);
  background-size: 4px 4px;
  z-index: 0;
}

title-26

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-26">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-26 {
  position: relative;
  padding: 4px 8px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 480px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-26::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 6px;
  background: linear-gradient(135deg, transparent 25%, #d8bfd8 25%, #d8bfd8 55%, transparent 55%, transparent 75%, #d8bfd8 75%, #d8bfd8);
  background-size: 8px 8px;
  z-index: 0;
}

三角のボーダー

title-27

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-30">TITLE</h1>

CSS

h1.title-30 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-30::before, .title-30::after {
  content:'';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #3cb371;
  width: 40px;
  height: 3px;
  rotate: -25deg;
  display: inline-block;
}

.title-30::before {
  top: -8px;
}

.title-30::after {
  bottom: 8px;
}

title-28

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-28">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-28 {
  position: relative;
  padding: 4px 8px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 480px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-28::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 8px;
  background: linear-gradient(135deg, transparent 50%, #d8bfd8 50%, #d8bfd8 100%, transparent 100%, transparent 75%, #d8bfd8 75%, #d8bfd8);
  background-size: 12px 12px;
  z-index: 0;
}

波々のボーダー

title-29

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-29">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-29 {
  position: relative;
  padding: 4px 4px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 480px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-29::after {
  content:'';
  position: absolute;
  background: url("http://web-design-pallet.site/wp-content/uploads/2024/07/wave.svg");
  display: block;
  width: 100%;
  height: 10px;
  background-repeat: repeat-x;
  background-size: contain;
}

title-30

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<h1 class="title-30">シンプルでおしゃれな見出しデザイン</h1>

CSS

h1.title-30 {
  position: relative;
  padding: 4px 4px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 480px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-30::after {
  content:'';
  position: absolute;
  background: url("http://web-design-pallet.site/wp-content/uploads/2024/07/wave2.svg");
  display: block;
  width: 100%;
  height: 10px;
  background-repeat: repeat-x;
  background-size: contain;
}

上下スラッシュ

title-31

TITLE

コードを表示

HTML

<h1 class="title-31">TITLE</h1>

CSS

h1.title-31 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}
.title-31::before, .title-31::after {
  content:'';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #3cb371;
  width: 40px;
  height: 1px;
  rotate: -25deg;
  display: inline-block;
}
.title-31::before {
  top: -8px;
}
.title-31::after {
  bottom: 12px;
}

title-32

TITLE

コードを表示

HTML

<h1 class="title-32">TITLE</h1>

CSS

h1.title-32 {
  position: relative;
  padding: 8px 32px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-32::before, .title-32::after {
  content:'';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #3cb371;
  width: 40px;
  height: 3px;
  rotate: -25deg;
  display: inline-block;
}

.title-32::before {
  top: -8px;
}

.title-32::after {
  bottom: 8px;
}

ダイヤ

title-33

TITLE

コードを表示

HTML

<h1 class="title-33"><span>TITLE</span></h1>

CSS

h1.title-33 {
  position: relative;
  padding: 8px 8px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 140px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-33::before {
  content:'';
  position: absolute;
  left:0;
  width: 60px;
  height: 60px;
  display: inline-block;
  top: 0;
  rotate: 45deg;
  border-bottom: solid 1px #333;
  border-left: solid 1px #333;
}

.title-33 span::before, .title-33 span::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 1px;
  display: inline-block;
}

.title-33 span::before {
  left: 25px;
  top: 1px;
  rotate: 45deg;
}

.title-33 span::after {
  left: 25px; 
  bottom: 1px;
  rotate: -45deg;
}

title-34

TITLE

コードを表示

HTML

<h1 class="title-34"><span>TITLE</span></h1>

CSS

h1.title-34 {
  position: relative;
  padding: 8px 8px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 140px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-34::before {
  content:'';
  position: absolute;
  left:0;
  width: 60px;
  height: 60px;
  display: inline-block;
  top: 0;
  rotate: 45deg;
  border-bottom: solid 3px #333;
  border-left: solid 3px #333;
}

.title-34 span::before, .title-34 span::after {
  content:'';
  position: absolute;
  background: #333;
  width: 40px;
  height: 2px;
  display: inline-block;
}

.title-34 span::before {
  left: 24px;
  top: 1px;
  rotate: 45deg;
}

.title-34 span::after {
  left: 24px; 
  bottom: 1px;
  rotate: -45deg;
}

背景三角

title-35

TITLE

コードを表示

HTML

<h1 class="title-35">TITLE</h1>

CSS

h1.title-35 {
  position: relative;
  padding: 8px 8px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 140px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-35::before {
  content:'';
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  display: inline-block;
  rotate: 45deg;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #f4e1be;
  z-index: -999;
}

title-36

TITLE

コードを表示

HTML

<h1 class="title-36"><span>TITLE</span></h1>

CSS

h1.title-36 {
  position: relative;
  padding: 8px 8px;
  font-family: 'Noto Sans JP', serif;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 140px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
}

.title-36::before {
  content:'';
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  display: inline-block;
  rotate: 45deg;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #f4e1be;
  z-index: -999;
}

タイトル間スラッシュ

title-37

TITLE

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<div class="title_wrap">
  <p class="title-37_en">TITLE</p>
  <h1 class="title-37_ja">シンプルでおしゃれな見出しデザイン</h1>
</div>

CSS

.title_wrap-37 {
  font-family: 'Noto Serif JP', serif;
  padding: 8px 32px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: flex;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  align-items: baseline;
}

p.title-37_en {
  font-size: 32px;
  position: relative;
}

h1.title-37_ja {
  font-size: 16px;
  padding-left: 20px;
}

p.title-37_en::after {
  content: '';
  position: absolute;
  background: #9ccfcf;
  width: 50px;
  height: 1px;
  rotate: -45deg;
  display: inline-block;
  bottom: 20px;
  right: -33px;
}

title-38

TITLE

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<div class="title_wrap-38">
  <p class="title-38_en">TITLE</p>
  <h1 class="title-38_ja">シンプルでおしゃれな見出しデザイン</h1>
</div>

CSS

.title_wrap-38 {
  font-family: 'Noto Sans JP', serif;
  padding: 8px 32px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: flex;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  align-items: baseline;
}

p.title-38_en {
  font-size: 32px;
  position: relative;
}

h1.title-38_ja {
  font-size: 16px;
  padding-left: 26px;
}

p.title-38_en::after {
  content: '';
  position: absolute;
  background: #9ccfcf;
  width: 50px;
  height: 3px;
  rotate: -45deg;
  display: inline-block;
  bottom: 20px;
  right: -38px;
}

丸いフレーム

title-39

TITLE

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<div class="title_wrap-39">
  <p class="title-39_en">TITLE</p>
  <h1 class="title-39_ja">シンプルでおしゃれな見出しデザイン</h1>
</div>

CSS

.title_wrap-39 {
  font-family: 'Noto Serif JP', serif;
  border: solid 1px #333;
  border-radius: 100%;
  padding: 24px 32px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 400px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  align-items: baseline;
}

p.title-39_en {
  font-size: 32px;
  position: relative;
}

h1.title-39_ja {
  font-size: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

p.title-39_en::after {
  content: '';
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  background: #333;
  width: 20px;
  height: 1px;
  display: inline-block;
}

title-40

TITLE

シンプルでおしゃれな見出しデザイン

コードを表示

HTML

<div class="title_wrap-38">
  <p class="title-38_en">TITLE</p>
  <h1 class="title-38_ja">シンプルでおしゃれな見出しデザイン</h1>
</div>

CSS

.title_wrap-38 {
  font-family: 'Noto Sans JP', serif;
  padding: 8px 32px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: flex;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  align-items: baseline;
}

p.title-38_en {
  font-size: 32px;
  position: relative;
}

h1.title-38_ja {
  font-size: 16px;
  padding-left: 26px;
}

p.title-38_en::after {
  content: '';
  position: absolute;
  background: #9ccfcf;
  width: 50px;
  height: 3px;
  rotate: -45deg;
  display: inline-block;
  bottom: 20px;
  right: -38px;
}