htmlとcssの使い方について

HTMLとCSSを使用して表を作成しようとしています。

表の一行目のセルに書かれている文字を白に、セル色をオレンジに変更したいです。
一つのセルごとに文字色/セル色を指定するやり方は出来るのですが、cssで指定した情報をHTMLの指定した範囲内で有効にするやり方がわかりません。現在のコードは以下の通りです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Home</title>
6<link rel="stylesheet"
7	href="${pageContext.request.contextPath}/resources/app/css/styles.css">
8</head>
9<body>
10	<!--<header>
11		<section class="content-header">
12			<h1>
13				<FONT color="white">リモート保守</FONT>
14			</h1>
15		</section>
16	</header>-->
17	<table>
18	<div  class="line">
19		<tr>
20			<th>aaaa</th>
21			<th>aaaa</th>
22			<th>aaaa</th>
23		</tr>
24		</div>
25		<tr bgcolor="wheat">
26			<td>aaaaa</td>
27			<td>aaaaa</td>
28			<td>aaaaa</td>
29		</tr>
30		<tr bgcolor="lightyellow">
31			<td>aaaaaaaa</td>
32			<td>aaaaaaa</td>
33			<td>aaaaaaa</td>
34		</tr>
35	</table>
36</body>
37</html>
38

css
1/* @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); */
2
3body {
4  padding:50px;
5  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
6  color:#777;
7  font-weight:300;
8}
9
10h1, h2, h3, h4, h5, h6 {
11  color:#222;
12  margin:0 0 20px;
13}
14
15p, ul, ol, table, pre, dl {
16  margin:0 0 20px;
17}
18
19h1, h2, h3 {
20  line-height:1.1;
21}
22
23h1 {
24  font-size:28px;
25}
26
27h2 {
28  color:#393939;
29}
30
31h3, h4, h5, h6 {
32  color:#494949;
33}
34
35a {
36  color:#39c;
37  font-weight:400;
38  text-decoration:none;
39}
40
41a small {
42  font-size:11px;
43  color:#777;
44  margin-top:-0.6em;
45  display:block;
46}
47
48.wrapper {
49  width:860px;
50  margin:0 auto;
51}
52
53blockquote {
54  border-left:1px solid #e5e5e5;
55  margin:0;
56  padding:0 0 0 20px;
57  font-style:italic;
58}
59
60code, pre {
61  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
62  color:#333;
63  font-size:12px;
64}
65
66pre {
67  padding:8px 15px;
68  background: #f8f8f8;  
69  border-radius:5px;
70  border:1px solid #e5e5e5;
71  overflow-x: auto;
72}
73
74table {
75  width:100%;
76  border-collapse:collapse;
77}
78
79th, td {
80  text-align:left;
81  padding:5px 10px;
82  border-bottom:1px solid #e5e5e5;
83}
84
85dt {
86  color:#444;
87  font-weight:700;
88}
89
90th {
91  color:#444;
92}
93
94img {
95  max-width:100%;
96}
97
98header {
99  width:270px;
100  float:left;
101  position:fixed;
102}
103
104header ul {
105  list-style:none;
106  height:40px;
107  
108  padding:0;
109  
110  background: #eee;
111  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
112  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
113  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
114  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
115  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
116  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
117  
118  border-radius:5px;
119  border:1px solid #d2d2d2;
120  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
121  width:270px;
122}
123
124header li {
125  width:89px;
126  float:left;
127  border-right:1px solid #d2d2d2;
128  height:40px;
129}
130
131header ul a {
132  line-height:1;
133  font-size:11px;
134  color:#999;
135  display:block;
136  text-align:center;
137  padding-top:6px;
138  height:40px;
139}
140
141strong {
142  color:#222;
143  font-weight:700;
144}
145
146header ul li + li {
147  width:88px;
148  border-left:1px solid #fff;
149}
150
151header ul li + li + li {
152  border-right:none;
153  width:89px;
154}
155
156header ul a strong {
157  font-size:14px;
158  display:block;
159  color:#222;
160}
161
162section {
163  width:500px;
164  float:right;
165  padding-bottom:50px;
166}
167
168small {
169  font-size:11px;
170}
171
172hr {
173  border:0;
174  background:#e5e5e5;
175  height:1px;
176  margin:0 0 20px;
177}
178
179footer {
180  width:270px;
181  float:left;
182  position:fixed;
183  bottom:50px;
184}
185
186@media print, screen and (max-width: 960px) {
187  
188  div.wrapper {
189    width:auto;
190    margin:0;
191  }
192  
193  header, section, footer {
194    float:none;
195    position:static;
196    width:auto;
197  }
198  
199  header {
200    padding-right:320px;
201  }
202  
203  section {
204    border:1px solid #e5e5e5;
205    border-width:1px 0;
206    padding:20px 0;
207    margin:0 0 20px;
208  }
209  
210  header a small {
211    display:inline;
212  }
213  
214  header ul {
215    position:absolute;
216    right:50px;
217    top:52px;
218  }
219}
220
221@media print, screen and (max-width: 720px) {
222  body {
223    word-wrap:break-word;
224  }
225  
226  header {
227    padding:0;
228  }
229  
230  header ul, header p.view {
231    position:static;
232  }
233  
234  pre, code {
235    word-wrap:normal;
236  }
237}
238
239@media print, screen and (max-width: 480px) {
240  body {
241    padding:15px;
242  }
243  
244  header ul {
245    display:none;
246  }
247}
248
249@media print {
250  body {
251    padding:0.4in;
252    font-size:12pt;
253    color:#444;
254  }
255}
256
257.line {
258	bgcolor:gold;
259	color: White;
260}

問題：
HTMLで<div class="line">と指定している部分で下記のWorningが出ております。
1.Multiple annotations found at this line:
- Invalid location of tag (div).

2.- No end tag (</div>).

cssで指定した設定をHTMLの指定範囲で有効にする書き方が分かる方は教えていただけると幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

lineクラスに指定してあるbgcolorプロパティはbackground-colorプロパティの誤りでは？必ずしもHTMLの属性名がCSSのプロパティ名と同じではないことに注意してください。
また、tableタグ直下にdivタグを記述することはできません。

Content model:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

これらを踏まえると、質問者さんのコードは以下のように書けると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Home</title>
6    <style type="text/css">
7         /* 文字数制限の関係で省略させていただきます。内容は追記のCSSと変わりませんので、そちらを参考にしてください。 */
8    </style>
9</head>
10<body>
11<table>
12    <tr class="line">
13        <th>aaaa</th>
14        <th>aaaa</th>
15        <th>aaaa</th>
16    </tr>
17    <tr bgcolor="wheat">
18        <td>aaaaa</td>
19        <td>aaaaa</td>
20        <td>aaaaa</td>
21    </tr>
22    <tr bgcolor="lightyellow">
23        <td>aaaaaaaa</td>
24        <td>aaaaaaa</td>
25        <td>aaaaaaa</td>
26    </tr>
27</table>
28</body>
29</html>

(追記)
HTML部分:

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Home</title>
6    <link rel="stylesheet"
7          href="${pageContext.request.contextPath}/resources/app/css/styles.css">
8</head>
9<body>
10<table>
11    <tr class="line">
12        <th>aaaa</th>
13        <th>aaaa</th>
14        <th>aaaa</th>
15    </tr>
16    <tr bgcolor="wheat">
17        <td>aaaaa</td>
18        <td>aaaaa</td>
19        <td>aaaaa</td>
20    </tr>
21    <tr bgcolor="lightyellow">
22        <td>aaaaaaaa</td>
23        <td>aaaaaaa</td>
24        <td>aaaaaaa</td>
25    </tr>
26</table>
27</body>
28</html>

CSS部分:

CSS
1/* @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); */
2
3body {
4    padding: 50px;
5    font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
6    color: #777;
7    font-weight: 300;
8}
9
10h1, h2, h3, h4, h5, h6 {
11    color: #222;
12    margin: 0 0 20px;
13}
14
15p, ul, ol, table, pre, dl {
16    margin: 0 0 20px;
17}
18
19h1, h2, h3 {
20    line-height: 1.1;
21}
22
23h1 {
24    font-size: 28px;
25}
26
27h2 {
28    color: #393939;
29}
30
31h3, h4, h5, h6 {
32    color: #494949;
33}
34
35a {
36    color: #39c;
37    font-weight: 400;
38    text-decoration: none;
39}
40
41a small {
42    font-size: 11px;
43    color: #777;
44    margin-top: -0.6em;
45    display: block;
46}
47
48.wrapper {
49    width: 860px;
50    margin: 0 auto;
51}
52
53blockquote {
54    border-left: 1px solid #e5e5e5;
55    margin: 0;
56    padding: 0 0 0 20px;
57    font-style: italic;
58}
59
60code, pre {
61    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
62    color: #333;
63    font-size: 12px;
64}
65
66pre {
67    padding: 8px 15px;
68    background: #f8f8f8;
69    border-radius: 5px;
70    border: 1px solid #e5e5e5;
71    overflow-x: auto;
72}
73
74table {
75    width: 100%;
76    border-collapse: collapse;
77}
78
79th, td {
80    text-align: left;
81    padding: 5px 10px;
82    border-bottom: 1px solid #e5e5e5;
83}
84
85dt {
86    color: #444;
87    font-weight: 700;
88}
89
90th {
91    color: #444;
92}
93
94img {
95    max-width: 100%;
96}
97
98header {
99    width: 270px;
100    float: left;
101    position: fixed;
102}
103
104header ul {
105    list-style: none;
106    height: 40px;
107
108    padding: 0;
109
110    background: #eee;
111    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
112    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
113    background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
114    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
115    background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
116    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
117
118    border-radius: 5px;
119    border: 1px solid #d2d2d2;
120    box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
121    width: 270px;
122}
123
124header li {
125    width: 89px;
126    float: left;
127    border-right: 1px solid #d2d2d2;
128    height: 40px;
129}
130
131header ul a {
132    line-height: 1;
133    font-size: 11px;
134    color: #999;
135    display: block;
136    text-align: center;
137    padding-top: 6px;
138    height: 40px;
139}
140
141strong {
142    color: #222;
143    font-weight: 700;
144}
145
146header ul li + li {
147    width: 88px;
148    border-left: 1px solid #fff;
149}
150
151header ul li + li + li {
152    border-right: none;
153    width: 89px;
154}
155
156header ul a strong {
157    font-size: 14px;
158    display: block;
159    color: #222;
160}
161
162section {
163    width: 500px;
164    float: right;
165    padding-bottom: 50px;
166}
167
168small {
169    font-size: 11px;
170}
171
172hr {
173    border: 0;
174    background: #e5e5e5;
175    height: 1px;
176    margin: 0 0 20px;
177}
178
179footer {
180    width: 270px;
181    float: left;
182    position: fixed;
183    bottom: 50px;
184}
185
186@media print, screen and (max-width: 960px) {
187
188    div.wrapper {
189        width: auto;
190        margin: 0;
191    }
192
193    header, section, footer {
194        float: none;
195        position: static;
196        width: auto;
197    }
198
199    header {
200        padding-right: 320px;
201    }
202
203    section {
204        border: 1px solid #e5e5e5;
205        border-width: 1px 0;
206        padding: 20px 0;
207        margin: 0 0 20px;
208    }
209
210    header a small {
211        display: inline;
212    }
213
214    header ul {
215        position: absolute;
216        right: 50px;
217        top: 52px;
218    }
219}
220
221@media print, screen and (max-width: 720px) {
222    body {
223        word-wrap: break-word;
224    }
225
226    header {
227        padding: 0;
228    }
229
230    header ul, header p.view {
231        position: static;
232    }
233
234    pre, code {
235        word-wrap: normal;
236    }
237}
238
239@media print, screen and (max-width: 480px) {
240    body {
241        padding: 15px;
242    }
243
244    header ul {
245        display: none;
246    }
247}
248
249@media print {
250    body {
251        padding: 0.4in;
252        font-size: 12pt;
253        color: #444;
254    }
255}
256
257.line {
258    background-color: gold; /* bgcolorではなくbackground-color */
259    color: White;
260}

投稿2017/02/09 08:39

編集2017/02/09 10:11

s8_chu

総合スコア14731

hide09090909

2017/02/09 09:59

ご回答ありがとうございます。これはCSSとHTMLを同一のファイルに書くという認識でよろしいでしょうか？できましたら、別ファイルに書きたいのですが、どうすればよいでしょうか？

s8_chu

2017/02/09 10:07

今回の場合は、便宜上同一のファイルにまとめただけですので、それぞれをHTMLファイルとCSSファイルに分けてもかまわないと思います。一応ですが、HTML部分とCSS部分を分けたものを追記させていただきました。

hide09090909

2017/02/09 23:17

解決いたしました。本当にありがとうございます。

行動規範の内容に同意します

テーブルへのアプローチはブラウザによって多少方言があるので
tbodyやtheadを設定してあげたほうがいいです
（特に今回thタグを使用しているってことはthead？）

なので、theadにcssを設定すればいいですが、その中でもtheadの
先頭行を指定して文字色や背景色を設定するならこんな感じ

HTML
1<style>
2table thead tr:first-child{color:#ffffff;background-Color:#ff8000;"}
3</style>
4<table>
5<thead>
6<tr>
7<th>aaaa</th>
8<th>aaaa</th>
9<th>aaaa</th>
10</tr>
11</thead>
12<tbody>
13<tr>
14<td>aaaaa</td>
15<td>aaaaa</td>
16<td>aaaaa</td>
17</tr>
18<tr>
19<td>aaaaaaaa</td>
20<td>aaaaaaa</td>
21<td>aaaaaaa</td>
22</tr>
23</tbody>
24</table>