HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

COACHのバッグ・財布・小物を厳選 [PR]

● 各要素の大きさ

ウェブページに配置されるすべての要素は矩形の領域を持っています。 この領域はテキストや画像の内容が表示される内容領域と、 マージン(margin)・・・余白、ボーダー(border)・・・境界線、 パディング(padding)・・・隙間の4つの領域に分類されます。
そしてこの領域には幅(width)、高さ(height)という2つの値をもっています。
これらの大きさをスタイルシートを使用して設定することができます。

内容領域

『内容領域』と書かれた(薄い灰色)部分が内容領域であり、その外側の灰色部分がパディング(padding)、 再び(薄い灰色の)色が付いた線が境界線(ボーダー)で、その外側の透明な空間がマージン(margin)と なります。
使われる値の単位についてはこちらを

margin

マージン(margin)は領域でもっとも外側、余白と呼ばれる部分です。
例えば、P要素やH要素は上下に1行程度の行間を与えて表示されることがありますが、 このプロパティで制御することが可能です。

<P style="margin:0em;background-color:cornsilk">

<P style="margin:0em 3em;background-color:cornsilk">

<P style="margin:0.5em 5em 1em;background-color:cornsilk">

<P style="margin:1em 10em 2em 2em;background-color:cornsilk">

この様に要素の外側に余白を作ることができます。
一番上のように『margin:0em』と設定すればマージン領域は0になります。
二番目のように『margin:0em 3em』と設定すれば 最初の値は上下2番目の値は左右に適用されます。
三番目のように『margin:0.5em 5em 1em』と設定すれば 最初の値は上2番目の値は左右3番目の値は下に適用されます。
四番目のように『margin:1em 10em 2em 2em』と設定すれば 最初の値は上2番目の値は右3番目の値は下4番の値は左適用されます。
ただ、注意して欲しいのは、三番目の下が1em四番目の上も1emにもかかわらず、 三番目と四番目の行間は2emにはなっていません。
これはマージンが相殺されたからです。相殺は以下のように行なわれます。
・隣り合ったマージンの最大値が実際のマージンとなる。
・正負の値が混在しているとき、最大値と最小値を足し合わせた値が実際のマージンとなる。
・正の値が存在しないとき、隣接するマージンの最小値がマージンとなる。

○マージンのプロパティとその値
スペースで区切りながら・・・
margin:[上下] [左右]
margin:[上] [左右] [下]
margin:[上] [右] [下] [左]
それぞれを単独で設定する場合は以下のプロパティを使います(順に上/下/左/右)。
margin-top margin-bottom margin-left margin-right

<P style="margin:1em 5em -1em;background-color:cornsilk">

<P style="margin:0.2em -2em 1em;background-color:cornsilk">

負の値の設定です。要素同士がかまわずに重なり、外にもはみ出します。
上がmargin:1em 5em -1em
下がmargin:0.2em -2em 1em
・・・となっています。

padding

パディング(padding)は内容領域のすぐ外側にある領域で、背景の広さとも言えるかも知れません。
その要素に背景色を設定した時、marginを使うと背景色は広がりませんが、 パディング(padding)は背景色ごと広げることができます。

<P style="padding:0em;background-color:cornsilk">

<P style="padding:1em 2em;background-color:cornsilk">

<P style="padding:1em 2em 0em;background-color:cornsilk">

<P style="padding:0em 2em 1em 3em;background-color:cornsilk">

silver(銀)色が内容領域に与えられた背景色で、 cornsilk(コーンシルク)色がP要素に与えられた背景色であり、パディング(padding)となります。

この様に要素のパディングを設定することができます。
一番上のように『padding:0em』と設定すればパディング領域は0になります。
二番目のように『padding:1em 2em』と設定すれば 最初の値は上下2番目の値は左右に適用されます。
三番目のように『padding:1em 2em 0em』と設定すれば 最初の値は上2番目の値は左右3番目の値は下に適用されます。
四番目のように『padding:0em 2em 1em 3em』と設定すれば 最初の値は上2番目の値は右3番目の値は下4番の値は左適用されます。

○パディングのプロパティとその値
スペースで区切りながら・・・
padding:[上下] [左右]
padding:[上] [左右] [下]
padding:[上] [右] [下] [左]
それぞれを単独で設定する場合は以下のプロパティを使います(順に上/下/左/右)。
padding-top padding-bottom padding-left padding-right
※マージンと違いパディングに負の値は有りません。

width、heightの設定

ブロック要素とIMG要素やTEXTAREA要素などの置換要素にはそれぞれ幅と高さを持っています。
これにより、例えば文字列が表示される範囲を制限することができます。 幅(width)の値には50%のような割合の設定をすることもできます。 通常この割合は、該当する要素が表示されているブロック要素の割合に成ります。
これは通常はウインドウ(BODY要素)を基準とした割合になりますが、 その要素を内容にするブロック要素にすでに幅が設定されている場合はその設定している要素の割合になります。

P要素の記述でwidth:50%を設定
ロゴ
この↑画像もwidth:50%ですが、段落の幅の50%となります。

<P style="width:50% ">
P要素の記述でwidth:50%を設定<BR>
<IMG src="../img/bannr.gif" alt="ロゴ" style="width:50% ; height:22px"><BR>
この↑画像もwidth:50%ですが、段落の幅の50%となります。<BR>
</P>

この時マージンの左右を『auto』と設定することで、ブロック要素を中央揃えにできます。
I.E5.5は値『auto』には未対応で、またBODY要素にマージンを与えることもできません。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09