CSSには各要素に「ボックス」と呼ばれる四角い領域があります。
まぁ、↓こんな感じ。と、その下に個々の意味を書いておきます^^


内容領域
テキストや画像などの内容が書かれている部分。

パディング
要素内容とボーダーの間の余白領域。
要素に指定した背景色や背景画像はこの部分にも適用される。

ボーダー
要素の周りに表示される枠線で、パディングの外側に設定されます。
要素に指定した背景色や背景画像はこの部分にも指定される。
ボーダーを透明にすると背景が透けてみえるようになります。

マージン
ボーダーの外側に設定される余白部分。
背景は常に透明。
親要素に背景が設定されている場合、その背景が透けて見える。

背景色・背景画像
要素が生成するボックスの内容領域・パディング領域・ボーダー領域に表示される。
背景色と背景画像の関係は、背景色の上に背景画像が表示される。背景画像に透明な部分があれば背景色が透けて見えるということになる。



文字ばっかでわからへーん！と言う方！

内容の外側は枠(ボーダー)で囲んであって、枠の外側の余白がマージン、内側の余白がパディング。

画像とこれ（↑の一行）だけを覚えてください。
一行程度なら、私でも覚えられるっ！





<<０８．便利！spanタグ
  

spanはタグです。
HTMLではお目にかかれなかったこのタグ。ですが、これはCSS対応ページには凄い威力を発揮してくれるのです。


たとえば、文字の途中で協調したい言葉がある。だけど<strong>タグなどは使いたくないときってありますよね？
そんなときに、出番ですスパンさん。

<div>たとえば文字を<span style="color:blue text-decoration:underline;">青</span>にしたりー。ラジバンダリー</div>

例文の文字はもうスルーしたらいいよ＾＾装飾されたとこだけ見ましょうね！
<p>や<div>タグと違い、改行もなくスタイルの変更がされるのでとても使えます＾＾
また、<span>タグ事態は属性を持たないので、<span>タグのみを記入したところで何も変化はしません。

<div>たとえば文字を<span>青</span>にしたりー。ラジバンダリー</div>

使い方次第で凄くつかえるタグです。
あなたもきっとスパンさんに助けられる日が来るはず！！！
その日が来たら、是非活用させてあげましょう＾＾




<<０７．指定される部分　三、id　　　　　０９．ボックスの概念>>
  

idは、…まぁ、classみたいなものです。
idはclassとあまり大差がありません、が。ここで大きな違いが一つ。
idを使ってスタイルが変更できるのはページ内に一つだけしかありません。つまり重複できないんです。
だからと言って重複したところで、反映されたり、されなかったり…。あ、でも決まりだから使わない方がいいですよ＾＾

では、さっそく、書いてみましょう。
いくら同じと言ってもスタイルシート側との区別はあります。まずはスタイルシート側から。
p #id {color:#00ff00;}

<p id="id">これがidの使い方だっ！</p>

これがidの使い方だっ！

になります。
classと違うところは、スタイルシート側が#か.ってところ、HＴＭＬ側がclassかidかってところなんです。
他は一緒一緒ーっ！

でも、実際、重複することが多いので、idよりもclassの方が使うと思います。
っていうか、classだけで十分スタイルを決めることが出来ちゃうんですよねー…ははっ！




<<０６．指定される部分　一、class　　　　　０８．便利！spanタグ>>
  

classは初めて聞く単語ですが身構えなくても大丈夫です。classさんはフレンドリーです、すぐにある程度理解できます！
最初から例えで行きますよっと。

<p>タグを使いたい。だけど、それぞれ色も変化させたい。そーんなときはclassさんにお任せ☆
p.class1{color:#ff00ff;}
p.class2{color:#0000ff;}
p.class3{color:#ff0000;}
という、スタイルシートを書いたとします。
次に、HTMLには

<p class="class1">クラス１は紫色</p>
<p class="class2">クラス２は青色</p>
<p class="class3">クラス３は赤色</p>

とすると…。

クラス１は紫色

クラス２は青色

クラス３は赤色

というふうに、<p>タグのスタイルにも変化が起こります！凄いですね＾＾

classを使うときの注意点は

■スタイルシート側：クラス名を記入する前にピリオドを記入
■HTML側：タグのあとにスペースを入れてからclass="クラス名"

クラス名はフレームnameのときのように好きにつけて大丈夫です。（nameって何だっけ？）一文字目はアルファベット、ふた文字目以降はアルファベットと数字が使えます！
ただし、スタイルシート側とHTML側のクラス名を一緒にしてくださいね！




<<０５，５．指定される部分　一、タグ　　　　　０７．指定される部分　三、id>>
  

前回に続いて、タグに指定する方法ですが、今回は特殊です☆
あるタグに囲まれたタグに指定したい時。ややこしい？じゃぁ、もう一度！

タグに囲まれたタグを指定する、のです！
画像で書くとこんなとき↓


その場合は

１タグ名 ２タグ名{プロバティ:値;}

と書きます…が、難しいですね。実際にやってみましょう＾＾


まずはスタイルシートとHTMLに記入するのは下記。

p b { color:red; }

<p>タグの中の<b>タグ</b>が変わります＾＾</p>

スタイルシートの１つ目のタグ名（p）と２つ目のタグ名（b）の間は半角スペースを開けてください。
これで、<p>タグの中の<b>タグだけが変化するようになるのです。p要素の内容にあるb要素が変化します。

タグの中のタグが変わります

と、なるのです。


じゃぁ、他の<b>タグはどうなるの？って思いますよね？
ためしに上記のスタイルを指定したまま、<div>で実験してみると…。


と、なるのです。

<b>タグにより、強調はされましたが色まで変化はしませんよね。
つまり、タグの中のタグを変化させるとはそういうことなのです！！




<<０５．指定される部分　一、タグ　　　　　０６．適用方法　二、class>>