基礎28. 幅、高さ、背景色のプロパティ（width, height, background-color）

HTML・CSS

この記事をシェアする：

widthプロパティ（ウィドゥス）

要素（タグ）の幅の指定です。インラインの要素（inline）では幅の指定は無視されます。幅は親要素から継承されます。ブロックレベルの要素の幅の初期値は100%です。


/* div要素を絶対値で指定 */
div{
  width: 960px;
}


/* div要素を相対値で指定 */
div{
  width: 80%;
}

要素（タグ）の高さの指定です。インラインの要素（inline）では高さの指定は無視されます。高さは親要素から継承しません。そのため相対値である%の指定も通常は使えません。


div{
  height: 200px;
}

設計の際に高さはあまり指定しません。理由としてWEBサイトは情報を更新したり増やしたりしていきます。高さが指定されていると高さ以上のコンテンツがある場合にレイアウトが崩れます。高さはどうしても必要な場合のみ指定しましょう。

要素（タグ）の背景色の設定です。背景色は主にカラーコードで指定します。

設計の際にボックスモデルの状態を確認する場合にも使用します。要素の幅、高さが現状どのような状態になっているか、背景色を指定すれば可視化でき問題点が分かりやすくなります。


/* divタグ背景色を#ddddddのグレーで指定 */
div{
  background-color: #dddddd;
}