Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>疑似要素

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

疑似クラス

疑似クラスの種類と使用例のページ内リンク

first-letter 疑似要素 / first-line 疑似要素 / before 疑似要素 / after 疑似要素 / first-letter 疑似要素の使用例
疑似要素とは?
before 疑似要素、after 疑似要素の使用例は content プロパティの使用例を参照してください。

first-letter 疑似要素

CSSプロパティ

要素名:first-letter {〜}

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

first-letter 疑似要素を使えば、要素の1文字目のをデザインすることができます。書式の通り要素名に「:first-letter」を付けて使用します。

ページトップへ / △ページ内リンクへ

first-line 疑似要素

CSSプロパティ

要素名:first-line {〜}

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

first-line 疑似要素を使えば、要素の1行目をデザインすることができます。visited 疑似クラスが指定できるのは href 属性を設定したa 要素のみです。書式の通り要素名に「:first-letter」を付けて使用します。

ページトップへ / △ページ内リンクへ

before 疑似要素

CSSプロパティ

要素名:before {〜}

対応ブラウザ FireFox WinSafariFireFox MacOpera

解説

before 疑似要素を使えば、contentプロパティと組み合わせて、指定の要素の前に仮想的な(要素があるかのように)文字列や画像を自動的に追加することができます。書式の通り要素名に「:before」を付けて使用します。
before 疑似要素の使用例は content プロパティの使用例を参照してください。

ページトップへ / △ページ内リンクへ

after 疑似要素

CSSプロパティ

要素名:after {〜}

対応ブラウザ FireFox WinSafariFireFox MacOpera

解説

after 疑似要素を使えば、contentプロパティと組み合わせて、指定の要素の後に仮想的な(要素があるかのように)文字列や画像を自動的に追加することができます。書式の通り要素名に「:after」を付けて使用します。
after 疑似要素の使用例は content プロパティの使用例を参照してください。

ページトップへ / △ページ内リンクへ

first-letter 疑似要素の使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

p.sample:first-letter {
font-size: 3em;
font-weight: bold;
color: red;
float: left;
}

</style>
</head>

<!--ページの本文-->
<body>

<p>このようにドロップキャップを作ることができます。</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

このようにドロップキャップを作ることができます。

ページトップへ / △ページ内リンクへ

関連情報ページ

ページトップへ / △ページ内リンクへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system