初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL3. スタイル設定の書式　その1★外部ファイルを作成する

　

５．「擬似要素」

「擬似クラス」と似たようなものですが、リンクのような特定の要素に反映する設定ではなく、特定の範囲に影響するものに「擬似要素」があります。書式は「擬似クラス」と同じです。

要素名:擬似要素 {   設定   }

　

「擬似要素」は以下の4種類で、例えば段落の１文字めのみテキストの色や大きさを変えたいような時は、下の例のように書きます。

p:first-letter { font-size: 300%;

font-weight: bold;

color: red; }

:first-line 表示される要素の１行めにのみ設定を反映(ブロックレベル要素のみに指定可能)
:first-letter 表示される要素の１文字めにのみ設定を反映(ブロックレベル要素のみに指定可能)
:before 要素の直前に追加される内容(contentプロパティと併用)
:after 要素の直後に追加される内容(contentプロパティと併用)

※「:before」と「:after」はIE6.0など、対応していないブラウザやバージョンがあります。また、NN4.7以前は全て反映されませんが、6.2以降では全て反映されます。

　

ⅰ) 「:first-line」と「:first-letter」

★「:first-line」を使った例

★「:first-letter」を使った例

CSS設定

body { margin: 50px 50px; 
color: #9b9bff;
background-color: #eaeaea;
font-weight: bold;
font-family: "ＭＳ Ｐ明朝";
font-size: 10pt;
}

div:first-line { color: blue; }

p:first-letter { font-size: 300%;
font-weight: bold;
color: red;
}

<body>部分のHTML

<body>

<div>今回のWeekend Styleは春らしいキュートなコーデを３点集めてみました。～中略～
春はまた一段とお派手になってしまうわけです。</div>

<p>今回のWeekend Styleは春らしいキュートなコーデを３点集めてみました。～中略～
春はまた一段とお派手になってしまうわけです。</p>
</body>

　

上の例では、HTML上で<p><div>がいくつも出てきた時、その全てに設定が反映されてしまいますが、idセレクタやクラスセレクタを併用して、同じ要素でも特定の部分にだけ指定を反映することもできます。例えば、<p>要素に「.large」という任意のクラス名をつければ、このクラスが呼び出された段落の１文字めだけが指定通りに表示されます。以下の例では、一段落めでのみ「.large」を呼び出しているので、その下の段落は通常表示になっています。

p.large:first-letter { font-size: 300%;

font-weight: bold;

color: red; }

CSS設定

body { margin: 50px 50px; 
color: #9b9bff;
background-color: #eaeaea;
font-weight: bold;
font-family: "ＭＳ Ｐ明朝";
font-size: 10pt;
}

p.large:first-letter { font-size: 300%;
font-weight: bold;
color: red;
}

<bpdy>部分のHTML

<body>

<p class="large">今回のWeekend Styleは春らしいキュートなコーデを３点集めてみました。
～中略～ 春はまた一段とお派手になってしまうわけです。</p>

<p>ではまず生成りのお洋服から。～中略～ こういったスタイルでは定番でよく出ますよね。</p> 

<p>そんな春らしいスカートをメインに同じく ～中略～ 帽子は１０年くらい前に手に入れた
Betty's Blueのものです。</p> 

</body>

　

ⅱ) 「:before」と「:after」

例えば、各段落の直前に「IMPORTANT!!」という文字を14pt、赤で出したい場合は、

p:before { content: "IMPORTANT!!";

font-size: 14pt;

color: red; }

のように書きます。「content:」プロパティで指定された「値」が、そのまま画面表示されるわけですね。「:before」の代わりに「:after」を使うと、指定した要素の直後に内容が追加されることになります。現在主要なブラウザでは動作しないようですが、知識として覚えておかれると良いでしょう。

　

初級篇2.VOL3.スタイル設定の書式・その1-4 <<

>> 初級篇2.VOL3.スタイル設定の書式・その1-6

　

2007.7.7.-7.8.