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

CSS

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

 閲覧数:614 投稿日: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」の違い

 閲覧数:469 投稿日: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」指定不可

 閲覧数:344 投稿日: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年



類似度ページランキング
順位 ページタイトル抜粋
1 「css3-mediaqueries-js」と「Respond.js」の違い 33
2 invalid property value css background-color 28
3 Bookmarks clean up 27
4 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 25
5 「Invalid property value.」遭遇事例一覧 25
6 ボタンクリック出来ない → 「display-inline;」を「display:inline-block;」へ変更 24
7 「align-items: center;」「align-self: center;」「align-content: center;」の違い 23
8 私の「Google Chrome」設定 23
9 要素の alt 属性 と、
要素の違い
23
10 「:first-child」が効かない場合は「:first-of-type」 23
11 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 22
12 ページで使用されている「id名」「class名」をChromeで取得したい   22
13 擬似クラス(Pseudo-classes) 22
14 「Public domain」と「Public Domain Dedication (CC0)」 22
15 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 22
16 Virtual DOM / 擬似要素 / Shadow DOM の違いが分からない 22
17 「Illustrator CS3」で出力範囲指定 21
18 画像を保存させないようにするjQueryプラグイン「jquery.dwImageProtector.js」 21
19 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 21
20 「Create Link」復活 21
2023/6/10 5:59 更新
週間人気ページランキング / 6-3 → 6-9
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 42
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 33
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 23
4 16進数カラーコード / 2進数 19
5 「bgcolor」「background-color」「background」の違い | CSS 18
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 17
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
7 Design 0 14
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 14
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 14
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
9 RGBの種類 / ビットカラー | RGB(色) 11
10 RGB → HSL | 色変換(色) 10
10 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 10
10 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
11 鉄道会社毎のカラーコード | カラーコード(色) 9
11 textareaを手動リサイズできない時は、ブラウザを落としてみる | Google Chrome(ブラウザ) 9
12 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 8
12 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 8
12 Chrome 拡張機能 カテゴリー 8
2023/6/10 1:01 更新