段落の最初の1文字を装飾(first-letter)
<html> <head> <title>段落の最初の1文字を装飾</title> <style type="text/css"> <!-- p:first-letter { color: red; font-size: 30px; float: left; } .c1:first-letter { color: green; font-size: 30px; float: left; } //--> </style> </head> <body> <p> 段落1。この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 </p> <p> 段落2。この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 </p> <p class="c1"> この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 この段落の最初の1文字のみ緑色の太字で表示されます。 </p> <p> この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 この段落の最初の1文字のみ赤色の太字で表示されます。 </p> </body> </html>
〔 実行する 〕