状態:-
閲覧数:9,399
投稿日:2013-03-28
更新日:2017-11-21
HTML「属性」、CSS「プロパティ」
bgcolor … HTML「属性」
background-color … CSS「プロパティ」
background … CSS「プロパティ」
※「HTML「属性」、CSS「プロパティ」の違い
結論
背景色情報の指定にはCSS「プロパティ」を使用
・bgcolor は非推奨のため使用しない
背景に色だけを指定する場合は、「background-color」「background」何れを用いても結果は同じ
・「background」は、原則的には、(色以外も)まとめて一括指定する場合に使用
HTML5 における HTML4 からの変更点 ／ HTML5 では HTML4 で定義されていた表象的な属性がすべて削除されました
HTML5 における HTML4 からの変更点
HTML5 では HTML4 で定義されていた表象的な属性がすべて削除されました。
これらは CSS にて扱われるべきだからです。
caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 要素の align 属性。
body 要素の alink, link, text, vlink 属性。
body 要素の background 属性。
table, tr, td, th, body 要素の bgcolor 属性
caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 要素の align 属性。
body 要素の alink, link, text, vlink 属性。
body 要素の background 属性。
table, tr, td, th, body 要素の bgcolor 属性
「background-color」「background」の違い
ポイント
背景に色だけを指定する場合は、「background-color」「background」何れを用いても結果は同じ
・「background」は、原則的には、(色以外も)まとめて一括指定する場合に使用
backgroundプロパティ
・指定していないプロパティは、デフォルトで設定される
問題となるケース
「background-image」で設定した値を、「background」を指定することによりデフォルト値で上書き設定している
・背景画像指定後、未指定で上書き設定している
・背景には、画像は表示されず、白色表示されるだけ
#hoge{
background-image: url(***);
background: #fff;
}・background-colorとbackgroundの違い
その他の相違点 ／ HTML「属性」には「!important」指定不可
!important
bgcolor
・HTML「属性」に付き、!important利用不可
具体例
CSSプロパティに「!important」付与 … ○
<td style="background-color:#FFFF00!important;">これはOK</td>
HTML属性に「!important」付与 … ✕
<td bgcolor="#FFFF00!important;">これはNG</td>