*使用方法*

スタイルシートは基本的に
  1. どのタグの(セレクタ)
  2. 何属性を(プロパティ)
  3. 何にするか(値)
という順番で書いていきます。

属性」という言葉は、7タグ2日目でお勉強しましたね。
たとえば
<H2 color="red">
と書いた場合
<H2>タグの 「color」属性を 「red」にする
という意味になるのでした。(「color」は属性、「red」は値です)

スタイルシートも同じです。
<H2 style="color : red">
ね、似てるでしょう?

ただ、ちょっと書き方が違いますね。
そこで、まずは、スタイルシートの書き方を見ていきましょう。
スタイルシートを使うには、3つの方法があります。

1-1.<SPAN>や<DIV>による部分設定

ページ内の、スタイルシートを適用したい部分だけにピンポイントで指定します。

<SPAN style="属性:値">または<DIV style="属性:値">

たとえばこのページ↓にスタイルシートを指定してみます

<HTML>
  <HEAD>
    <TITLE>鍵盤打楽器</TITLE>
  </HEAD>

  <BODY>
      <SPAN style="color:red"><H2>シロフォン</H2></SPAN>
      木琴の一種。中音〜高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。
      <H2>マリンバ</H2>
      木琴の一種。低音〜中音域。毛糸などで巻いた柔かめのマレットで、低音を響かせる。
    (以下略)




<DIV>(ブロック要素)は、自動で改行が入りますので、この場合は<SPAN>(インライン要素)を使うと良いでしょう。

また、複数の属性を指定したい場合は、セミコロン(;)で区切ります。

      (略)
      
      <SPAN style="color:red; font-style:italic"><H2>シロフォン</H2></SPAN>
      木琴の一種。中音〜高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。

    (以下略)


1-2.各タグのstyle属性として設定

こちらもピンポイント指定ですが、<SPAN>を使わず、スタイルシートを適用したいタグ自体に 書く方法です。

上の例は、こう書けます↓

      (略)
      
      <H2 style="color:red">シロフォン</H2>
      木琴の一種。中音〜高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。

    (以下略)


それにしても、この程度(文字の色とか)なら、HTMLタグで充分対応できます。
スタイルシートを使う利点は、次ページでわかります。→




Copyright (C) 7tag project dv