ブロックのサイズを指定する

CSSで指定する時に、「ひとつのタグに対してでなくて、ここからここまでひとくくりにして指定したい」といったことがあります。

これを実現するために、

というタグを使います。

このタグの効果は、・・・何もありません。
文字を大きくしたりとか、太くしたりとか、段落を表したりとか、しません。
はい。ないんです。

つまり、CSSで効果をつける専用ためだけに生まれてきたタグと思ってもらって構いません。
また、このタグの特徴は、要素を四角く囲うことにあります。

たとえば、

初めてWeb入門

とあったとき、


のように、表示されていました。

それが、

初めてWeb入門

のように記述すると


と、見えない四角(薄い灰色の部分)で囲われているイメージです。

この、見えない四角のことを、ブロックと呼ぶことにします。
そして、このブロックにCSSの効果を与えていくことで、装飾をしていきます。

まず、このブロックの大きさを指定してみましょう。

HTML:

※ヘッダーはひとつしかないので、id属性を使いました。

CSS:
#header {
height: 300px;
}
このheight:300px;がブロックの高さを決めます。

保存して、反映させてみてください。余白が生まれたでしょう?
これは、見えない四角(ブロック)の高さが300pxになったということです。


関連記事

  1. 文字の行間を指定する

  2. 入門を終えたあなたがプロ並みのウェブデザインを構築できるあらゆる理由

  3. 小見出しをつける

  4. 新しいページを作る

  5. ページ全体を装飾する

  6. 拡張子を表示させる

お手本ナビの無料HPデザイン

ランダムピックアップ