「bgcolor」「background-color」「background」の違い

CSS

 状態:-  閲覧数:12,362  投稿日: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 で定義されていた表象的な属性がすべて削除されました

 閲覧数:954 投稿日:2013-03-28 更新日:2017-11-21

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 属性


「background-color」「background」の違い

 閲覧数:827 投稿日:2013-03-28 更新日:2017-11-21

ポイント


背景に色だけを指定する場合は、「background-color」「background」何れを用いても結果は同じ
・「background」は、原則的には、(色以外も)まとめて一括指定する場合に使用

backgroundプロパティ
・指定していないプロパティは、デフォルトで設定される

問題となるケース


「background-image」で設定した値を、「background」を指定することによりデフォルト値で上書き設定している
・背景画像指定後、未指定で上書き設定している
・背景には、画像は表示されず、白色表示されるだけ
#hoge{
 background-image: url(***);
 background: #fff;
}



background-colorとbackgroundの違い


その他の相違点 / HTML「属性」には「!important」指定不可

 閲覧数:619 投稿日:2017-11-21 更新日:2017-11-21

!important


bgcolor
・HTML「属性」に付き、!important利用不可

具体例
CSSプロパティに「!important」付与 … ○
 <td style="background-color:#FFFF00!important;">これはOK</td>


HTML属性に「!important」付与 … ✕
<td bgcolor="#FFFF00!important;">これはNG</td>



「属性」「プロパティ」「アトリビュート」の違い

ドキュメントルート外のCSSファイル読込。~ 2018年



週間人気ページランキング / 5-14 → 5-20
順位 ページタイトル抜粋 アクセス数
1 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
2 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 | Chrome 拡張機能 4
3 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 3
3 鉄道会社毎のカラーコード | カラーコード(色) 3
3 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
3 RGBの種類 / ビットカラー | RGB(色) 3
3 HSV → RGB 計算方式の違い | 色変換(色) 3
3 アイコン | 3系(Bootstrap) 3
3 ドロワーメニューが表示されない理由 | モバイルデザイン(デザイン) 3
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
4 Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen | Google Chrome(ブラウザ) 2
4 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
4 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる | 画像 2
4 効果を打ち消すスタイルシート | CSS 2
4 期待した通り動作しなかったため削除した Chrome 拡張機能 | Chrome 拡張機能 2
4 GIMPで大画像の上に複数枚の小画像を横一列に並べる | GIMP 系(ソフトウェア) 2
4 数値データ型(CSS) カテゴリー 2
4 HTMLエディタ カテゴリー 2
4 SeaMonkey 2.7.2 2
4 「max-width:100%;」は原寸画像幅までしか拡大しない / 「width:100%;」は要素幅まで拡大する 2
2026/5/21 5:05 更新