HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> スタイルシートの基本 >> セレクタ内の最初の文字にだけ働くスタイルシート

セレクタ内の最初の文字にだけ働くスタイルシート

CSS/HTMLの書き方

CSS
セレクタ:first-letter { プロパティ:値 ; プロパティ:値 ; …}

CSSの詳細情報
対応ブラウザ Windows MAC
IE 5.5以降/FF1.0/NS7.1/OP8.0 SF/IE5.0(※)
※動作しない場合有り
CSSレベル CSSレベル1

解説

ある要素内の文章の最初の文字だけに働くスタイルシートの書き方です。例えば、雑誌でよく見かけるような段落の最初の文字だけ大きくすることもできます。なお、「:first-child」は要素の一部を取り出す働きを持つため、擬似要素です。

CSSの書き方は、任意のセレクタ名の後に「:first-child」を付け足します。

この書き方は、MAC版IEでは不具合があるようです。指定する要素の最初の文字が全角の場合、スタイルシートが働かないことがあります。

CSS/HTMLサンプル

p.b_letter:first-letter { float:left ; font-size:3em ; margin:0px 5px 5px 0px; }

特定の段落の最初の文字を大きくする サンプル

次のページへ >>