TOP スタイルシート基本知識 > 特定の要素にだけ、スタイルシートを適用したい場合。

特定の要素にだけ、スタイルシートを適用したい場合。

スタイルシートの本来的な使い方は「Webページ内の要素の書式を統一する」ことです。

つまり、同じ書式を複数の要素に反映させて、初めて力を発揮するわけです。Webページ作成の際には、 この点を考慮してデザインを練り上げる必要があります。CSSに苦手意識があるのは、この辺のめんどくささにあるのではないでしょうか?

本来的な使い方ではありませんが、スタイルシートは特定の箇所だけに書式を設定することもできます。

HTMLの要素タグの中に「style」属性で直接設定したい書式を書き込みます。

この方法は、HTMLの後継企画「XHTML1.1」では推奨されていません。Webページの今後から考えていけば、 あまり使わないほうがよいでしょう。

 

 特定の要素にスタイルシートを適用する 

<要素名 style="プロパティ:値; プロパティ:値; … ">……</要素名>

 

” 特定の要素にスタイルシートを適用する”のサンプルページはコチラをクリック!

 

  • サンプルページのコードは以下のとおりです。

<html>
<head>
<title>特定の要素にstyle属性でスタイルシートを適用するサンプル</title>
<meta http-equiv="Content-type" content="text/html">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<h1>h1タグ一つ目(Style属性なし)</h1>
<h1 style="font-size:30pt; color:red; background-color:cyan;">h1タグニつ目(Style属性あり) </h1>
<h1>h1タグ三つ目(Style属性なし)</h1>
<br><br>
<p>3つの段落(h1要素)のうち、二つ目の段落のみを文字サイズを30ポイント、文字色を赤色に、 背景色を水色に設定しています。</p>

</body>
</html>

 

Google
 
Web www.1css.net
 
『1歩!スタイルシート』はリンクフリーです。ご意見・ご感想等なんでもどうぞ!メールはこちらから
『1歩!スタイルシート』の許可なく本サイトの一部あるいは全文のコピーならびに転用を禁じます。