PR
今回のポイント
HTMLタグで直接書式を指定する際の書き方
外部CSSを利用する方法

 <style>タグの使い方を理解したところで,2番目のCSS記述方法の学習に進みます。この方法では,<style>タグを使わずに,装飾したい部分のタグに直接書式指定を書きます。

 前回のサンプルから<style>~</style>の部分を削除し,生のHTMLに戻します。もう一つ適当な文章で<p>を作ってください。そして次のようにコードを書きます(リスト1)。

リスト1●サンプルコード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>ページタイトル</title>
  </head>
  <body>
<p style="color:#ff0000;"><!--ここに書式指定-->
 説明が少し遅れてしまいましたが,
  …中略…
それを使っていただくのが一番です。
</p>
<p><!--同じpタグだがここには適用されない-->
同じ<p>の段落タグだが,こちらは書式が適用されていません。
</p>

  </body>
</html>

 サンプルでは二つの<p>ブロックが出てきます。CSS指定を行っているのは最初の<p>だけで,後ろの<p>には書式指定がありません。ただの<p>です。フォントの色が変化したのは一つ目の<p>の部分だけです(図1)。

図1●一つ目の<p>だけがフォントの色が赤くなった
図1●一つ目の<p>だけがフォントの色が赤くなった

 HTML中で<!--ここに書式指定-->と書かれている<p>タグを確認してください。<p>タグは生HTMLから書き換えられて

<p style="color:#ff0000;">

になっています。特定のタグ個所に対してCSSを適用したい場合,このようにタグ内に直接CSS記述をします。このCSSの書き方では,style=""を書かれたタグの部分にだけCSSが適用されます。

 同じドキュメント内の<p>ですが,後ろの<p>の段落は普通に<p>と書かれているだけなのでCSSが効いていません。タグにstyle=""で書式設定をすると,<style>のようにHTML内のすべての<p>タグに対して書式を指定するのではなく,style=""が書かれた特定タグに囲まれている部分に対してのみCSSが有効となります。

 書式は次のようになります。

<タグ名 style="プロパティ:値;プロパティ:値;…">

 プロパティや値といったCSS指定部は<style>に書いたものと同じ書き方ができます。ただし若干の制約があります。{}による括りは必要ありません。

 次のような,書き方は正しく動きません。

<p style="{color:#ff0000;}">

 コメントも使えます。コメントはプロパティ指定(""内ならば)の冒頭でも中間でも自由に使ってください。

<p style="/*書式指定*/color:#ff0000;font-size:40px;">
<p style="color:#ff0000;/*書式指定*/font-size:40px;">

 書式プロパティですが,;を区切りとすれば,タグに直接書くこの書き方でも複数のCSS指定を書くことができます。フォントの色とサイズを変えたい場合,次のように書けます。必要なだけいくつでも書式指定をしてください。

<p style="color:#ff0000;font-size:20px;">

 見やすいように改行やインデントを入れても大丈夫です。

<p style="
  color:#ff0000;
  /*コメントも大丈夫*/
  font-size:20px;
">