TOP ＞ スタイルシート基本知識 ＞ 文章の最初の一行だけを違う書式にする。
文章の最初の一行だけを違う書式にする。
文章の最初の一文字だけに違う書式を設定するには 「:first-letter」擬似要素を使用しました。同じように、最初の一行に違う書式を設定することも出来ます。
要素の最初の一行にだけスタイルシートを適用するには「:first-line」擬似要素を使用します。「:first-line」擬似要素はP要素などのブロックレベル要素にだけ適用することが出来ます。
文章の最初の一行だけを違う書式にする
【スタイルシート】
セレクタ：first-line｛プロパティ：値; プロパティ：値; ・・ ・・｝
"文章の最初の一行だけを違う書式にする。 "のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<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-line{ font-size: 300%; background-color: yellow; color: red; } --> </style> </head> <body> <h1>first-lineを使うと、最初の一行の書式だけを変換することが出来ます。</h1> <br><br> <p>このサンプルでは、<p>タグで囲まれた文章の一行を周囲の文字の3倍にし、背景色を黄色・文字色を赤色にしています。<br></p> <p>つまり、こんな風になるわけですね。</p> </body> </html> |
[
スタイルシート基本知識 ]
