問題

7
HTML_CSS

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

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

HTML_CSSの問題に挑戦しよう!

問題

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

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

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

あらかじめエディタに書くコード

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

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

補足

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

最初の1行目だけにスタイルを指定できるfirst-lineという疑似要素もあるので、一緒に覚えておきましょう。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET