HTM Lのコツ
HTMLの概念の2つのポイント
1. HTMLとは左上に重力のある積み木である
2. 積み木の一つ一つは中身によって大きさの変わる箱であり、入れ子構造になっている
1, 2について、例を交えつつ解説していきます。
以下の例は、htmlのbody要素の中に「box1」「box2」「box3」という名のついた箱を定義している(名前はclassという属性によってつけることができる)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
このままでは箱になんの装飾もしていないので、ブラウザ上では何も見えない。
この段階では、
箱はHTMLとしては存在しているけど、見えない状態。
以下のように、CSS によって箱の大きさを決めたり、色を決めたりすることで初めて視認することができる。widthは横幅の指定、
heightは高さの指定、
background-colorは背景色の指定。
opacityは、要素の透明度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.box1{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box2{
width: 150px;
height: 150px;
background-color: green;
opacity: 0.5;
}
.box3{
width: 120px;
height: 120px;
background-color: blue;
opacity: 0.5;
}
|
上記のようなcssファイルは、
htmlのhead要素に以下のように書くことで読み込むことができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
すると、ブラウザに以下のような箱が出現する。
ブラウザの左上が起点となって、
box1,2,3が積まれているのがわかる。
箱の一つ一つは、主にブロック要素と呼ばれるもの。
上の例では文字を直接body要素の中に書き込んでいたが、本来であれば、ブロック要素の中に文字を設置する。箱の中に文字を入れると、文字は箱の中いっぱいに広がる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
また、箱の中に箱を入れることもできる。
外側の箱のことを 親要素、
内側に入っている箱のことを 子要素と呼び表す。
その場合は以下のように、
親要素の開始タグと閉じタグの間に、
子要素の開始タグと閉じタグを含める。
以下の例ではbox2という名前のついた箱の中にbox3という箱が入っているが、
これをわかりやすくするために インデントしている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
すると、ブラウザ上では以下のように表示される。
子要素の位置は、親要素の左上になっていることに注目。
普段良く見るサイトのレイアウトはすべて2つのポイントによって成り立っている。
