7.1 疑似要素 ::first-letter
疑似要素 ::first-letter と ::first-line は、テキスト要素の最初の文字や行をスタイリングするための強力なツールを提供するよ。これらの疑似要素は、さまざまなタイポグラフィ効果の作成、可読性向上、ウェブページのテキストの美的向上のためによく使われるんだ。
疑似要素 ::first-letter は、テキストブロックの最初の文字をスタイリングできるんだ。段落の最初の文字を大きくしたり、デコレーション効果を作成したりするときによく使われるんだ。
セレクタ::first-letter {
/* スタイル */
}
::first-letter の使い方の例
この例では、段落の最初の文字がサイズを大きくされ、太字で青色にスタイリングされているよ。プロパティ float: left と margin-right は、文字を「引き込む」効果を作り出し、残りのテキストをずらしているんだ：
/* 段落の最初の文字のスタイリング */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
::first-letter にサポートされているプロパティ
疑似要素 ::first-letter は、以下を含む多くのプロパティをサポートしているよ：
fontcolorbackgroundmarginpaddingborderfloattext-transformtext-decoration
これらのプロパティを使って、テキストの最初の文字の外観を柔軟に管理できるんだ。
::first-letter の拡張スタイリングの例
この例では、最初の文字にさらに影効果と大きなサイズを追加しているんだ：
/* 追加効果を持つ段落の最初の文字のスタイリング */
p::first-letter {
font-size: 3em;
font-weight: bold;
color: #e74c3c;
float: left;
margin-right: 0.2em;
line-height: 1;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
7.2 疑似要素 ::first-line
疑似要素 ::first-line は、テキストブロックの最初の行をスタイリングできるよ。最初の行のフォントや色を変えるなど、さまざまなタイポグラフィ効果を作り出すために使われるんだ。
文法:
セレクタ::first-line {
/* スタイル */
}
::first-line の使い方の例
この例では、段落の最初の行が太字で緑色にスタイリングされ、薄灰色の背景が与えられているよ：
/* 段落の最初の行のスタイリング */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
::first-line にサポートされているプロパティ
疑似要素 ::first-line は、以下を含む多くのプロパティをサポートしているよ：
fontcolorbackgroundmarginpaddingborderline-heighttext-transformtext-decorationletter-spacingword-spacing
これにより、テキストの最初の行の外観を柔軟に管理できるんだ。
::first-line の拡張スタイリングの例
この例では、最初の行にテキストの大文字変換や文字間・単語間隔の変更といった追加効果を加えているんだ：
/* 追加効果を持つ段落の最初の行のスタイリング */
p::first-line {
font-weight: bold;
color: #e67e22;
background-color: #f9f9f9;
text-transform: uppercase;
letter-spacing: 0.1em;
word-spacing: 0.2em;
}
7.3 ::first-letter と ::first-line の組み合わせの利用
疑似要素 ::first-letter と ::first-line を組み合わせて、複雑なタイポグラフィ効果を作り出せるよ。
組み合わせ利用の例
この例では、段落の最初の文字と最初の行に異なるスタイリングを施し、複雑で面白い視覚的効果を生み出しているんだ：
/* 段落の最初の文字と最初の行のスタイリング */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
完全な例
この例では、段落の最初の文字が青色で強調され、最初の行が太字で緑色、灰色の背景でスタイリングされているんだ：
/* 段落の最初の文字のスタイリング */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
/* 段落の最初の行のスタイリング */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疑似要素 ::first-letter と ::first-line の例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</body>
</html>
GO TO FULL VERSION