ＣＳＳ 重要な補足

スタイルシートの補足

補足といいながら、もっとも重要だったりして

スタイルシートではホームページのデザインをイジクレます。
一元管理できるので、サイト公開あとにも、見た目の変更はカンタンになります。

前のページまでは、色や背景そして線の説明をしてきました。
このページでは、これまでしてこなかった、配置や位置について、補足的にお話します。

”補足”といっても、重要です。どんなに色や文字がきれいにきまっても、それを置いた位置が決まらなければ、すべては台無しですから。

そんなに、むずかしいことではないので、気楽に読んでください。

1. 右と左
2. マージンとパディングの関係
3. マージン　（外部）
4. パディング（内部）

■　右と左

　これは文章の行位置をそろえるためのプロパティです。
　文章は左読みがキホンですが、クリックは右におくこともある。使用勝手がよいプロパティです。

左よせ
.hidari {
　text-align : left;
}

右よせ
.migi {
　text-align : right;
}

中央よせ
.naka {
　text-align : center;
}

leftは左。 rightは右。　そして centerは中央です。
とくに問題はありませんね？　例は省略します。

■　マージンとパディングの関係

ＨＴＭＬの文字やイメージは、なにもしなければ左上に表示されます
いつもこれで満足できるはずもないので、文字やイメージを上に置いたり、右端から少しだけ離してみたりします。
納得できる位置にコンテンツをおくわけですね。

　margin と　paddingは、位置をきめるプロパティ。
イメージや文章のある、各要素の外側と内側の配置をするためには欠かせないプロパティです。

　マージンがボーダーまでの空きをきめるのに対し、パディングはボーダーの中にあって、実際に表示されるコンテンツまでの空きをきめるようになっています。

　関係図は下のとおり。
　黄色のエリアがタグで示したエリアです。黄色と水色の境にある線がボーダーとなってます。中にはコンテンツが収まります（コンテンツボックスといいます）。



　必要に応じてつかい分けましょう。

■　マージン（外部）

　あるタグについて、外側の表示位置（空きスペース）を指定することができる。それがmarginです。

　空間は、上下左右にありますよね？
　だから、marginも上下左右にあります。

　同じだけ空間を作りたいなら、１行で済ますこともできますし、四方のはなれを別々にしたいなら、４つを個別に設定することもできます。

設定例　＞

�@　四方から２０ｐｘずつ離す。

p.t_m20 {
　margin 　　　　　:　20px;
　background-color : #cc66ff;
}


�A　上下左右バラバラに離す。

p.t_mbr{
　margin-top　 :　50px;
　margin-right :　80px;
　margin-bottom:　30px;
　margin-left　: 200px;
　background-color : #99ffff;
}


タグ例　↓

<p class="t_m20">そんなところ危ないでしょ！</p>
<p class="t_mbr">いーや。この場所はゆずらねぇ</p>

一口メモ
マージンの四方を別々にしたい。上では、margin-topのように、空間ごとに設定してますが、１行にまとめて四方を設定することもできます。

margin : 50px 80px 30px 200px ;　のようにすればＯＫ。

こちらの方が、実用的ですネ。

■　パディング（内部）

　タグの内部にあって、実際に表示されるコンテンツとの空きを設定するのがpaddingです。

　空間は、上下左右にありますよね？
　だから、paddingも上下左右にあります。

　以下同文。

設定例　＞

�@　四方から２０ｐｘずつ離す。

div.t_p20 {
　padding 　　　　　: 20px;
　background-color : #cc66ff;
　margin　　　　　　: 20px;
}


�A　上下左右バラバラに離す。

div.t_mbr{
　padding　 : 10px 20px 5px 150px;
　background-color : #99ffff;
　margin　　: 20px;
}


タグ例　↓

<p class="t_p20">誰がゆずれって言ったのよ！</p>
<p class="t_pbr">ここはオレの場所だ。</p>

　あえて、marginと組み合わせてみました。
　どちらの例も、白い空間がmarginの20pxに当たります。

　紫や水色の背景色が広くなっているのがわかるでしょうか？
　その広い部分が内部の空き。つまりpaddingです。

一口メモ
　マージンとパディングは、よく似ています。
　慣れないうちは、混同するかもしれませんね。

　空間が感覚的に身につくまで、コンテンツをあちこちに動かして遊んでみてください。このページの例を見比べるのもいいですね。

　あなたに必要なプロパティとなるはずです。