ページコンテンツ
要素:first-line／最初の行
最初の行だけスタイルを適用。
|
1 2 3 4 5 6 7 8 9 10 |
.item_01::first-line { color:red; } <div class="item_01"> 私の好きなくだものはメロンです。それは 甘くて、香りがいいからです。 ドリンクも必ずメロン味を選んでしまいます。 色も緑色が好きです。 </div> |
結果
私の好きなくだものはメロンです。それは
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
解説
要素::first-lineは、改行があるまで適用されます。
自動改行の場合も、最初の行にだけ適用されます。
要素:first-letter／最初の文字
最初の文字だけスタイルを適用。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.item_01::first-letter { font-size: 300%; font-weight: bold; float: left; } <div class="item_01"> 私の好きなくだものはメロンです。それは 甘くて、香りがいいからです。 ドリンクも必ずメロン味を選んでしまいます。 色も緑色が好きです。 </div> |
結果
私の好きなくだものはメロンです。それは
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
解説
要素::first-letterは、最初の文字だけに適用されます。
例題のコツは、「font-size: 300%;」と「float」をかけているところです。
文字をパーセントにすると、3段落まで大きくしたいときは300%にすると良いです。
要素::before／直前に文字を挿入
直前に挿入する内容。
|
1 2 3 4 5 6 7 8 9 |
.item_01::before { content:"≫" color: red; } <div class="item_01">私の好きなくだものはメロンです。</div> <div class="item_01">それは甘くて、香りがいいからです。</div> <div class="item_01">ドリンクも必ずメロン味を選んでしまいます。</div> <div class="item_01">色も緑色が好きです。 </div> |
結果
私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
解説
要素::beforeは、本文の直前に挿入する内容です。
要素::after／直後に文字を挿入
直後に挿入する内容。
|
1 2 3 4 5 6 7 8 9 |
.item_01::after { content:"（私の主観です）" color: red; } <div class="item_01">私の好きなくだものはメロンです。</div> <div class="item_01">それは甘くて、香りがいいからです。</div> <div class="item_01">ドリンクも必ずメロン味を選んでしまいます。</div> <div class="item_01">色も緑色が好きです。 </div> |
結果
私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
解説
要素::afterは、本文の直後に挿入する内容です。
要素::selection／選択範囲
選択範囲。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.item_01::selection { background: red; color: white; } <div class="item_01"> このエリアをドラッグしてみてください。<br> 私の好きなくだものはメロンです。<br> それは甘くて、香りがいいからです。<br> ドリンクも必ずメロン味を選んでしまいます。<br> 色も緑色が好きです。 </div> |
結果
このエリアをドラッグしてみてください。
私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
私の好きなくだものはメロンです。
それは甘くて、香りがいいからです。
ドリンクも必ずメロン味を選んでしまいます。
色も緑色が好きです。
解説
要素::selectionは、ドラッグした選択範囲の表現を変更します。