ログイン

問題7 ドロップキャップ(先頭文字を大きく)しよう

HTML_CSSの問題

HTML_CSS

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

ドロップキャップ(先頭文字を大きく)しよう

問題

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

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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!