CodePen Embed - シンプル見出し

<body>
<h1 class="bold">最初の文字を変えた見出し：太字</h1>
<h1 class="color">最初の文字を変えた見出し：文字色</h1>
<h1 class="size">最初の文字を変えた見出し：サイズ</h1>
<h1 class="all">最初の文字を変えた見出し：太字+文字色+サイズ</h1>
</body>

/* bold */
h1.bold{
  font-size:24px;
  font-weight: normal;
  line-height: 1.8;
}
h1.bold:first-letter {
  font-weight: bold;
}
/* color */
h1.color{
  font-size:24px;
  line-height: 1.8;
}
h1.color:first-letter {
  color: tomato;
}
/* size */
h1.size{
  font-size:24px;
  line-height: 1.8;
}
h1.size:first-letter {
  font-size: 150%;
}
/* all */
h1.all{
  font-size:24px;
  font-weight: normal;
  line-height: 1.8;
}
h1.all:first-letter {
  font-size: 150%;
  color: tomato;
  font-weight: bold;
}

This Pen is owned by spiqa design on CodePen.

See more by @spiqa_design on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.