スタイルシートの記述方法(2)
【style属性を使って記述する方法】
スタイルを、HTML中のたった一カ所のタグに対してだけ適用したい場合には、style属性を使って「タグの中」にスタイルを記述できます。
◆記述場所
HTMLソース内で記述する場所は次の通りです。
<html>
<head>
<title>……</title>
</head>
<body>
本文
<hoge style="スタイルいろいろ">……</hoge>
本文
</body> </html>
本文中(body要素内)に記述した特定のタグ(何でも構いません)の開始タグ内に、style属性を加え、そこにスタイルを記述します。
◆記述詳細
具体的には、次のように記述します。
<div style="color: darkblue; line-height: 1.4;"> …本文… </div>
上記の場合は、<div>タグに style属性を付加して、<div style="~">とし、そこにスタイルを記述しています。
スタイルのプロパティ(と値)は複数列挙できます。 上記では、colorプロパティと line-heightプロパティの2つ(※)を指定しています。
※color(文字色)をdarkblue(暗い青色)に、line-height(行の高さ)を1.4倍(標準の高さの1.4倍)にする、という指定になります。
(補足) スタイルの記述
今回の記事は、スタイルシートの記述場所を解説するのが目的ですので、スタイルそのものの記述方法に関しては述べません。
以下に、簡単にだけ触れておきます。
style属性を用いる場合のスタイルは、次のように記述します。
プロパティ : 値 ;
実際に例を書いてみると、次のようになります。
color: green;
この場合は、colorプロパティ(色を設定します)の値を green(緑)に設定しています。 (その結果、文字が緑色で表示されるようになります。)
それでは、次の方法を見ていきましょう。