*使用方法*

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

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

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

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

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