h1タグで囲まれた部分をh1要素といいます。同様にh2要素、p要素などといいます。
h1要素,h2要素,p要素は可能な限り左右に広がっています。すべてのタグの要素に background-color を設定して背景色をつけてみます。
/* 設定したcss */
h1 {
color :#0000ff;
background-color:#ccccff;
}
h2 {
color :#008800;
background-color:#ccff99;
}
p {
color:#006666;
background-color:#ccffff;
}
a {
background-color:#ffcccc;
}
h1,h2部分のように1行に全部入ったところは右側が空いていますが、そこにも背景色があるので、そこもh1,h2の領域になっていることがわかります。一方pでは1行に収まらないので、右端で自動で改行し領域が下に延びています。
このような表示のされ方をブロックといいます。
p要素に入っている、a要素の「もくじ」は左右に広がっていません。ブロックとして表示されていないのです。このような表示のされ方をインラインといいます。どのように表示するかはタブの持つ役割に応じてブラウザが仮に決めていますが、cssの設定で作者が指定できます。
p要素に入っている、a要素はこんな状態になっていたはずです。
<body> <p><a href="index.html">もくじ</a></p> <h1>情報処理で学んだこと</h1> ・・・・・・・・
ブロックはページの横いっぱいに広がり、内容に応じた高さを持ちます。
インラインは中の文字列を入れるだけの横幅しかありません。
ブロックの左右と、上下には隙間があります。これを マージン(margin) とよびます。
何も指定しないとブラウザが適当なマージンを入れています。試しにこの隙間を全部無くしてみます。
/* 設定したcss */
h1 {
color :#0000ff;
background-color:#ccccff;
margin:0;
}
h2 {
color :#008800;
background-color:#ccff99;
margin:0;
}
p {
color:#006666;
background-color:#ccffff;
margin:0;
}
a {
background-color:#ffcccc;
}
body {
background-color:ivory;
}
h1,h2,pの間の隙間はなくなりましたが、ブラウザのウインドウ境界付近には隙間が残っています。これはbodyのmarginをゼロにすることでなくすることができます。
/* 設定したcss */
h1 {
color :#0000ff;
background-color:#ccccff;
margin:0;
}
h2 {
color :#008800;
background-color:#ccff99;
margin:0;
}
p {
color:#006666;
background-color:#ccffff;
margin:0;
}
a {
background-color:#ffcccc;
}
body {
background-color:ivory;
margin:0;
}
bodyという要素の中にh1,h2,pなどが入っていてそれぞれにmarginがあるということです。
上で使用したmarginの指定は次のようなものでした。
margin: 0;
これは上下左右全部を一括で0にするということです。
上下左右のそれぞれを別々に指定することもできます。
ただし、上下のマージンは隣接するブロックのマージンを加えるのでなく、大きい方をとることになっています。
上下左右のマージンを異なる値にする場合は、スペースで区切って、上 右 下 左の順で指定します。
margin:1% 2% 3% 4%;
上 右 下 左;
単位(長さの指定のしかた)はいろいろあるのですが、安心して使用できるのは % と em です。% はブロックが取れる最大の幅(つまりは見ている人のブラウザの横幅)を100%とするものです。emはそのブロックの文字の高さを１emとする単位で、0.5em は半文字分、２emは２文字分を意味します。
次のように書き加えることで、すべてのp要素にmarginを上1% 右5% 下2% 左8%にします。
p {
color:#009999;
margin:1% 5% 2% 8%;
}
pタグの部分をh2タグの部分よりも字下げをして表示したいという場合もあるでしょう。h2タグの部分とその前のpタグの部分に隙間を大きく開けたい場合もあるでしょう。こういう場合、margin(マージン) を調整します。余白といってもいいのですが、似たような機能で padding（パディング）というものもありますので、margin と呼びましょう。
タグごとに margin を指定ができます。下図には左側の margin のみを示しました。緑の⇔の部分が margin です。
実際には、すべての要素に背景色を設定する必要はありません。先のjoho.htmlにmarginをつけるとすれば、例えば次のようになるでしょう。
<head> <title>情報で学んだこと</title> <style type="text/css"> h1 {color :#660066;} h2 { color :#003399; background-color:#ffff66; margin:1% 0 1% 0; } p { color:#009999; margin: 1% 5% 2% 8%; } body {background-color:#fffff8;} </style> </head>
p タグへの指定は、続く｛ ｝の中に書かなければなりません。
よい例 p { color:#009999; margin: 1% 5% 2% 8%; }
悪い例 p { color:#009999;} margin: 1% 5% 2% 8%;
%による指定は画面が小さいとmarginも小さくなって、画面が広く使えます。
emは1文字の高さが基準の単位ですが、漢字は高さと幅がほぼ同じですから、文字数と考えることもできます。どのぐらいの空きができるか分かりやすいかもしれません。たとえばこんな感じです。
margin: 0.5em 1em 0.5em 2em;
ただしh1の1emとpの1emは字の大きさが違うので、不便な場合もあります。％指定はその心配はありません。
pxはピクセルです。文字の大きさによらず画面の大きさによらずおなじだけ空きますが、あまり大きな値を指定すると、画面の小さな端末で見た時に空白の割合が増えすぎて不恰好になることがあります。
単位を混ぜて指定することもできます。0には単位をつける必要がありませんが、つけても問題ありません。
値を一つ 0 と書いて全部 0 となった様に、2つや3つに省略することができます。次のような決まりです。
| 省略形 | 適用される指定 |
|---|---|
| margin:1%; | margin:1% 1% 1% 1%; |
| margin:1% 2%; | margin:1% 2% 1% 2%; |
| margin:1% 2% 3%; | margin:1% 2% 3% 2%; |