#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-style4

Initial caps

先頭文字を大きくする

最初の1文字目を大きくしたり色を変えたりしてアイキャッチ効果を持たせる手法を『イニシャルキャップ』といいます。
『イニシャルキャップ』には「ドロップキャップ」「レイズドキャップ」「ハンギングキャップ」などの種類があります。

例1:ドロップキャップ(drop caps)

虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。

<p class="sample1">虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。</p>
.sample1:first-letter {
  font-weight: bold;
  font-size: 32px;
  color: #996699;
  line-height: 1;
  float: left;
  margin: 5px;
}

例2:レイズドキャップ(raised cap)

虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。

<p class="sample2">虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。</p>
.sample2:first-letter {
  font-weight: bold;
  font-size: 32px;
  color: #996699;
  line-height: 1;
  margin: 5px;
}

例3:ハンギングキャップ(hanging drop cap)

虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。

<p class="sample3">虚心坦懐とは、心に何のわだかまりもなく、気持ちがさっぱりとしていること。平静で公平な心。「虚心」はわだかまりがなく、ありのままを素直に受け入れられる心のありよう。「坦懐」は心が穏やかでさっぱりとしているさま。</p>
.sample3:first-letter {
  font-weight: bold;
  font-size: 32px;
  color: #996699;
  line-height: 1;
  float: left;
  padding-bottom: 40px; /* 一文字目の下にできる行数分のおおよそのpxやem値 */
  margin: 5px;
}