文字を右寄りにしつつ、背景を赤にする方法
- css初心者の方が、全体の背景ではなく特定のセルの背景を赤にする方法を教えて欲しいです。
- 具体的には、表の一番左のセルと1番目と100番目のセルの背景を赤にしつつ、文字を右寄りにしたいです。
- 現在のコードでは全ての背景に色が付いてしまっており、対象のセルだけを対象にしたいです。
- ベストアンサー
文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- 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; すればいいんじゃない？
お礼
ご回答ありがとうございます。
関連するQ&A
- スタイルシートの背景色の取得
あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。 どなたかご教授いただけませんでしょうか。 因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <head> <style> td.a{ background:blue; width:25; height:15; } td.b{ background:green; width:25; height:15; } </style> <script type="text/javascript"> function s(b){ document.getElementById('ia').style.background=b.style.background; //document.getElementById('ia').style.background="red"; } </script> </head> <body> <table Cellspacing="1"> <td id="ia" class="a"></td> </table> <table Cellspacing="1"> <tr> <td id="ib" class="b" onmousedown="s(this)"></td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- body要素
body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか？ ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- CSSどこが・・・？
<html> <head> <style type="text/css"> .title { font-color:#00ff00; font-style:"ex phont"; } </style> </head> <body> <table> <tr><td class=title> タイトル </td> </table> </body> </html> こんなソースを作成したのですが、書体が変わらない上、文字色も変わりません。どこがおかしいのか自分にはわからないのですが・・・。教えていただけると幸いですよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 文字色を変更するCSSが効かない
テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが 文字色を変更するcolorが効かなくて困っています。 背景色は変更されるのでbackgroudは効いています。 原因はお分かりになりますでしょうか。 【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- 文字を中央に寄せる
<HTML> <HEAD> <TITLE>メンバー表</TITLE> <STYLE TYPE="text/css"> <!-- TR｛text-align:center;｝ TH｛text-align:center;｝ TD｛text-align:center;｝ --> </STYLE> </HEAD> <BODY> <TABLE BORDER=1 ALIGN=CENTER> <TR><TH ROWSPAN=3>ここには画像</TH><TH>名前</TH><TH>称号</TH><TH>レベル</TH><TH>タイプ</TH><TH>AC</TH></TR> <TR><TD>竜千士 翔</TD><TD>見習い魔導士</TD><TD>45</TD><TD>con18,wis18</TD><TD>43</TD></TR> <TR><TD>コメント</TD><TD COLSPAN=4>v(￣Д￣)v イエーイ </TD></TR> </TABLE> </BODY> 上記のようにスタイルシートで文字を中央に寄せようとしたのですがどうしてもできません。 htmlタグでやるとできたのですが・・・ どこが間違っているのかどうかご教授お願いいたいします。 ちなみに使っているブラウザはIEでバージョンは６ です
- ベストアンサー
- HTML
お礼
ありがとうございます。