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

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

これを実現するために、

というタグを使います。

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

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

たとえば、

初めてWeb入門

とあったとき、


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

それが、

初めてWeb入門

のように記述すると


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

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

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

HTML:

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

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

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


関連記事

  1. あなたが全くのど素人だったとしても「自分の納得できるウェブサイト」を絶…

  2. さくらレンタルサーバーを借りよう

  3. コンテンツ部分をデザインする

  4. メニューをデザインする

  5. レンタルサーバーの違い

  6. 表を作る

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

ランダムピックアップ