段落の先頭の1文字だけを別デザインで
書籍や雑誌を読んでいると、段落の先頭1文字だけが大きな文字になっているデザインを見かけることがあります。 そのようなデザインをホームページ上でも実現してみたいと思いませんか？
もちろん、先頭1文字を画像で作成するなどということはしません。 画像を使っても実現できなくはありませんが、
- 作るのに手間がかかる
- デザインの変更など、修正の必要ができたときに面倒
- 段落先頭の単語が検索にヒットしない
- 音声での読み上げ時に問題がありアクセシビリティが低下する
…というような様々な問題点があります。
そこでスタイルシートの出番です。 スタイルシートを使えば、段落の先頭1文字だけを装飾することも手軽に行えるのです。
先ほどのデメリットは、スタイルシートでのデザインだとすべて解消できます。
- 作るのに手間はかからない
- 普通のテキストなので修正は楽
- テキストだから検索にもヒットする
- 音声での読み上げも問題ない
やめたくなったらスタイルの定義を削除すれば良いだけなので、 本文には一切手を加える必要がありません。 ですから、気軽に試してみることができるでしょう。
スタイルシートで段落の先頭1文字をデザインするには？
それでは、スタイルシートで段落の先頭1文字だけについてデザインする方法をご紹介致しましょう。
