コミック風の見出し

RESULT
HTML
CSS

Heading01
Heading02
Heading03
Heading04

コピー

<h1 class="msr_h104">Heading01</h1>
<h2 class="msr_h204">Heading02</h2>
<h3 class="msr_h304">Heading03</h3>
<h4 class="msr_h404">Heading04</h4>

コピー

.msr_h104 {
  border: 5px solid #000000;
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 15px 20px;
}
.msr_h204 {
  background: #000000;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 10px 20px;
}
.msr_h304 {
  border-left: 5px solid #000000;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 20px;
  padding:0 0 0 10px;
}
.msr_h404 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 20px;
}