HTML_CSS
Googleでログイン
問題7：先頭文字だけ大きいドロップキャップを作ろう
ドロップキャップを作成してみましょう。
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が便利です。
2文字目や3文字目にスタイルを適用させるのであれば、spanタグを使ってスタイル指定を行なうといいです。
最初の1行目だけにスタイルを指定できるfirst-lineという疑似要素もあるので、一緒に覚えておきましょう。
今回使用したfirst-letterが便利です。
2文字目や3文字目にスタイルを適用させるのであれば、spanタグを使ってスタイル指定を行なうといいです。
最初の1行目だけにスタイルを指定できるfirst-lineという疑似要素もあるので、一緒に覚えておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
:first-letter という擬似要素を使用します。
vertical-alignやletter-spaceなどを駆使して自分だけの
オリジナルドロップキャップを作成するといいと思います。