TOP ＞ スタイルシート基本知識 ＞ 文章の最初の一文字だけに違う書式を設定する。
文章の最初の一文字だけに違う書式を設定する。
雑誌などでよく見かける、文章の段落の最初の一文字だけを大きくしたり、文字色を変える”ドロップキャップ”ですが、 スタイルシートを使ってWeb上の文章でも表現することが出来ます。
このように、ある要素の最初の一字だけに、周囲の書式と違う書式を適用する場合は「:first-letter」を使います。
「セレクタ： first-letter」とすることで、 セレクタで指定した要素の中で、最初の一文字だけを取り出す作用をします。こういった作用をする要素は擬似要素と呼ばれます。
文章の最初の一文字だけに違う書式を設定する
【スタイルシート】
セレクタ：first-letter｛プロパティ：値; プロパティ：値; ・・・・｝
”文章の最初の一文字だけに違う書式を設定する。 ”のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文章の最初の一文字だけに違う書式を設定するサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- p:first-letter{ float: left; font-size: 300%; background-color: yellow; } --> </style> </head> <body> <h1>first-letterを使ってドロップキャップを表示してみましょう。</h1> <br><br> <p>ドロップキャップとは段落の先頭文字だけ大きくすることです。<br>雑誌などの見出しでよく使われていますよね！</p> <p>このサンプルでは、<p>タグで囲まれた文章の先頭文字を周囲の文字の3倍にし、背景色を黄色にしています。<br> また、回り込みを設定して、先頭文字を左寄せし、残りの文章をその右に流し込んでいます。</p> <p>つまり、こんな風になるわけですね。</p> </body> </html> |
[
スタイルシート基本知識 ]
