質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2597閲覧

htmlとcssの使い方について

hide09090909

総合スコア68

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/09 08:21

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の指定範囲で有効にする書き方が分かる方は教えていただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

0

テーブルへのアプローチはブラウザによって多少方言があるので
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>

※thead全体に適用するなら「tr:first-child」はいらないですけどね

投稿2017/02/09 09:17

yambejp

総合スコア114503

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hide09090909

2017/02/09 23:12

分かりやすいご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問