スタイルシートでドロップキャップを作る雑誌などでよく使われる「先頭の1文字を大きくして下の数行に食い込ませる」装飾(ドロップキャップ)を作ってみましょう。スタイルシートを使えば簡単です。first-letter疑似要素・first-child疑似クラスを使います。 雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 こ

Webサイト制作ノート

【kou】管理人の「kou」と申します。 小学1年から中学・高校・大学・軟式社会人・草野球と野球歴は30年以上になります。 高校では3年の時の夏の甲子園、県大会決勝で敗退。甲子園は一度も出場ならず。 大学野球では東京六大学野球リーグに在籍。大学時代に肩を壊したため、社会人では軟式の社会人企業チームに所属。 社会人の軟式野球では県代表として天皇賜杯などに出場。 その後社会人野球をやめた後も野球への情熱は冷めず、草野球に没頭しております。