ログイン
問題7

先頭文字だけ大きいドロップキャップを作ろう

雑誌などでもよく見られる、ドロップキャップを作成します。 先頭の文字だけにスタイルを指定する方法を覚えていきましょう!

アイコン画像

問題7:先頭文字だけ大きいドロップキャップを作ろう

ドロップキャップを作成してみましょう。

CSSファイルに記述し
見本を参考に文字の幅や高さなども合わせてみてください。

エディターのアイコンあらかじめエディタに書くコード

                <div style="width: 300px;">
<p>この文字にドロップキャップを実装してみましょう。よくブログの一覧などでも見かける実践向きの技です。</p>
</div>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <div style="width: 300px;">
  <p>この文字にドロップキャップを実装してみましょう。よくブログの一覧などでも見かける実践向きの技です。</p>
</div>
¥HTML¥
            
              p {
    line-height: 30px;
}
p:first-letter{
    font-size: 3em;
    color: blue;
    vertical-align: -10px;
}
¥CSS¥
            

コメントのアイコン解説

テキストの1文字目だけにスタイルを適用させるには
:first-letter という擬似要素を使用します。

vertical-alignやletter-spaceなどを駆使して自分だけの
オリジナルドロップキャップを作成するといいと思います。
ログインして解答を見る

コメントのアイコン補足

最初の1文字目だけにスタイルを適用させるのであれば、
今回使用したfirst-letterが便利です。
2文字目や3文字目にスタイルを適用させるのであれば、spanタグを使ってスタイル指定を行なうといいです。

最初の1行目だけにスタイルを指定できるfirst-lineという疑似要素もあるので、一緒に覚えておきましょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる