- ベストアンサー
文字を右寄りにしつつ、背景を赤にする方法
- css初心者の方が、全体の背景ではなく特定のセルの背景を赤にする方法を教えて欲しいです。
- 具体的には、表の一番左のセルと1番目と100番目のセルの背景を赤にしつつ、文字を右寄りにしたいです。
- 現在のコードでは全ての背景に色が付いてしまっており、対象のセルだけを対象にしたいです。
- tiqinmgqgkmgy
- お礼率100% (72/72)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
まだ初心者でもなさそうですね。ちゃんと体系的に学んでいますか？どこかのソースを理解せずにコピペしてるだけでは入門もできていないですよ。 セレクタ｛プロパティ：値｝を理解していなさそう。 どこの｛何を：どうする｝です。 ご提示いただいたソースの場合 table_moji_rightのクラスのtdの｛文字列を：右揃えにする｝ tｄの｛バックグランドを：赤くする｝ なので、当然、すべてのtdは赤くなります。 答えだけ言うと td.table_moji_right { text-align: right; background-color: red; } のみ td { background-color: red; } は消す。同じセレクター内に複数の指定を描くときは;でつなげます。いくつでも可。 td{}はｔｄがセレクタになります。つまり全てのtdが対象となります。 ちなみに、たぶんhtmlも間違っていそうな気がします。数字やaaaではわかりませんが、私ならたぶん表内の見出しと値という風に区別すると思います。 css---------- table,td,th{border-collapse:collapse;border:1px solid #000;} th{text-align: right; background-color: red;font-weight:normal;} html--------- <table> <tr><th>1</th><td>aaa</td></tr> <tr><th>100</th><td>iii</td></tr> </table> 見た目でタグを付けない事。これは、今どのような表現ができるかということよりも大事です。見た目ではなく、文章構造に対してタグを付けることが見た目でタグを付けるよりｃｓｓは扱いやすいです。 table_moji_rightなんてクラス名を付けてしまったら、赤くするのもクラス名矛盾しますよね？赤くしたいタグではなく、目立たせたいとか見出しであるとかの理由でタグを付け、その要素をｃｓｓでデザインするという考え方です。htmlのように赤くしたい、文字の大きさを変えたい。と1回ずつタグ指定はしません。ｔｈでなかったら、値段なら、priceとかのクラス名です。 cssの原則で、ここでつまずくと、学びが大変になります。間違った方向に進み、ソースが無茶苦茶だけど、作者の使っているブラウザでだけ作者の思い通りに表示されているということになりかねません。一度基礎から体系的に入門されることをお勧めします。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
head部分のサンプルです。 以下、スタイルシートの説明です。 (1)もし、行先頭のセルが<th>でしたら table[summary="test"] th{background-color:red;text-align:right;font-weight:normal;} ですむはずです。スタイルシートを見ただけで「test1の表の見出しセルは、赤背景で右寄せで通常文字」だと、誰が見ても分かります。 (2)見出しセルでないのでしたら、隣接セレクタを使うと簡単です。 table[summary="schedule"] th, table[summary="schedule"] td{background-color:fuchsia;} table[summary="schedule"] th+th, table[summary="schedule"] td+td{background-color:transparent;} (3)あるいは、last-child:擬似クラスをつかうとセルがいくら増えても良い table[summary="schedule2"] th:last-child, table[summary="schedule2"] td:last-child{background-color:aqua;} (4)クラスを使うなら table#schedule3 th[abbr="Sun"], table#schedule3 td.Sun{background-color:fuchsia;} table#schedule3 th[abbr="Sat"], table#schedule3 td.Sat{background-color:aqua;} ★セレクタの書き方はCSSで最も重要な部分ですから、まずそれを身につけましょう。それだけで、HTMLもCSSもとっても楽になります。 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) ★ブラウザ間の表示差をなくすため、ウェブ標準HTML4.01strict+CSS2.1で書いています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )のDATAでチェック済み ★HTMLにはデザインに関する事は一切書かれていないため、先でどのようにデザインを変えるのも自由自在です。水曜日は黄色にしようとか思っても、HTMLに手を加える必要は無いですね。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- table{border-collapse:collapse;margin:10px;border:solid 2px black;} table th,table td{border:gray 1px solid;padding:5px 10px;} table[summary="test"] th{background-color:red;text-align:right;font-weight:normal;} /* +隣接セレクタ */ table[summary="schedule"] th, table[summary="schedule"] td{background-color:fuchsia;text-align:right;} table[summary="schedule"] th+th, table[summary="schedule"] td+td{background-color:transparent;text-align:left;} table[summary="schedule"] th+th+th+th+th+th+th, table[summary="schedule"] td+td+td+td+td+td+td{background-color:aqua;} /* last-child擬似クラス */ table[summary="schedule2"] th, table[summary="schedule2"] td{background-color:fuchsia;text-align:right;} table[summary="schedule2"] th+th, table[summary="schedule2"] td+td{background-color:transparent;text-align:left;} table[summary="schedule2"] th:last-child, table[summary="schedule2"] td:last-child{background-color:aqua;} /* classセレクタ */ table#schedule3 th[abbr="Sun"], table#schedule3 td.Sun{background-color:fuchsia;text-align:right;} table#schedule3 th[abbr="Sat"], table#schedule3 td.Sat{background-color:aqua;} --> </style> </head>
お礼
ありがとうございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLで質問されていますが、デザインのためにHTML書いていたら、後で変更したいとき大変ですし、煩雑になりますよ。 ★ひょっとして、一番左と言うことでそれが<th>table header cellなら <table summary="test" border="1"><!-- summaryは必須 --> <tbody><!--- tbodyは必須 --> <tr> <th>1</th><td>abc</td><td>efg</td><td>hij</td> </tr> <tr> <th>100</th><td>abc</td><td>efg</td><td>hij</td> </tr> </tr> </tbody> </table> とマークアップしただけですむはずです。 もしそれが、一週間の予定表でしたら <table summary="schedule" border="1"> <tbody> <tr> <th abbr="Sun">日</th><th abbr="Mon">月</th><th abbr="Tue">火</th> <th abbr="Wd">水</th><th abbr="Thu">木</th><th abbr="Fri">金</th><th abbr="Sut">土</th> </tr> <tr> <td>abc</td><td>efg</td><td>hij</td><td>klm</td><td>nop</td> <td>qrs</td><td>tuv</td> </tr> </tbody> </table> とマークアップされているはずですね。 (後方互換を考慮する必要があるときは、面倒くさいけど) <table summary="schedule" border="1" id="schedule3"> <tbody> <tr> <th abbr="Sun">日</th><th abbr="Mon">月</th><th abbr="Tue">火</th> <th abbr="Wd">水</th><th abbr="Thu">木</th><th abbr="Fri">金</th><th abbr="Sut">土</th> </tr> <tr> <td class="Sun">abc</td><td class="Mon">efg</td><td class="Tue">hij</td> ・・・【中略】・・・ </tr> にしますね。 bodyの、サンプルです。 <head>などは後で・・ ★HTMLには文書構造しか書かない!!これがスタイルシートを使うときの最大のポイントです。 『文書の構造をプレゼンテーションと切り離すことで【略】文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』 <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="test" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th>1</th><td>abc</td><td>efg</td><td>hijklm</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th>2</th><td>abcef</td><td>g</td><td>hij</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th>100</th><td>abc</td><td>efghi</td><td>j</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table summary="schedule" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="Sun">日</th><th abbr="Mon">月</th><th abbr="Tue">火</th> ＿＿＿＿＿<th abbr="Wed">水</th><th abbr="Thu">木</th><th abbr="Fri">金</th><th abbr="Sut">土</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>a</td><td>bcefg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abc</td><td>efg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abcde</td><td>efg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table summary="schedule2" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="Sun">日</th><th abbr="Mon">月</th><th abbr="Tue">火</th> ＿＿＿＿＿<th abbr="Wed">水</th><th abbr="Thu">木</th><th abbr="Fri">金</th><th abbr="Sat">土</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>a</td><td>bcefg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>ab</td><td>cefg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abcde</td><td>fg</td><td>hij</td><td>klm</td><td>nop</td> ＿＿＿＿＿<td>qrs</td><td>tuv</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table summary="schedule3" border="1" id="schedule3"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="Sun">日</th><th abbr="Mon">月</th><th abbr="Tue">火</th> ＿＿＿＿＿<th abbr="Wed">水</th><th abbr="Thu">木</th><th abbr="Fri">金</th><th abbr="Sat">土</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td class="Sun">a</td><td class="Mon">bcefg</td><td class="Tue">hij</td> ＿＿＿＿＿<td class="Wed">klm</td><td class="Thu">nop</td><td class="Fri">qrs</td> ＿＿＿＿＿<td class="Sat">tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td class="Sun">ab</td><td class="Mon">cdefg</td><td class="Tue">hij</td> ＿＿＿＿＿<td class="Wed">klm</td><td class="Thu">nop</td><td class="Fri">qrs</td> ＿＿＿＿＿<td class="Sat">tuv</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td class="Sun">abcde</td><td class="Mon">fg</td><td class="Tue">hij</td> ＿＿＿＿＿<td class="Wed">klm</td><td class="Thu">nop</td><td class="Fri">qrs</td> ＿＿＿＿＿<td class="Sat">tuv</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ありがとうございます。
- askaaska
- ベストアンサー率35% (1455/4149)
ｔｄ じゃなくて table_moji_right に background-color: red; すればいいんじゃない？
お礼
ご回答ありがとうございます。
お礼
ありがとうございます。