HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2017/07/11   hatano

widthプロパティ(ウィドゥス)

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

heightプロパティ(ハイト)

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

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

background-colorプロパティ(バックグラウンド カラー)

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

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

まとめ

  • 幅の指定はwidthプロパティ
  • 幅は親から継承する
  • 高さの指定はheightプロパティ
  • 高さは親から継承しない
  • 高さの指定はどうしても必要な場合に限り指定する
  • 幅、高さの指定はインライン要素に対しては無視される
  • 背景色の指定はbackground-colorプロパティ

広告

 - HTML・CSS