• 締切済み

HTMLでテーブル内のリンクに色付けしたい。

==HTML <table class="class1"> <tr> <td class="class2"> <p> ああああああああああ <span class="class3"> <a href="xxx.html">別サイトへ</a> </span></br> </p> <p>あああああああああ</p> </td> </tr> </table> ==CSS td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ color:#FF0009 /*文字の色を指定*/ } 部分抜粋でこんな感じのプログラムを書きました。 CSSの text-align と float:right はHTMLの『別サイトへ』の文字にかかってしっかり右端に寄ってくれます。 しかし文字の色が変化してくれません。 問題はリンクなので  <a........>別サイトへ</a> となっていて<a>の指定をCSS側でもやってあげないといけないのはわかっているのですがどう書けばいいのか分りません。 ・td.class2 a.class3 { ・td.class2.class3 a.class3 { ・.class2.class3 a.class3 { などで初めて td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ } td.class2.class3 a.class3 { color:#FF0009 /*文字の色を指定*/ } などと書いたりしたのですが文字の色に変化がありません。 この場合どう書けば文字の色に変化をつけれるんでしょうか?

  • HTML
  • 回答数1
  • ありがとう数9

みんなの回答

回答No.1

td.class2 .class3 a { color:#FF0009/*文字の色を指定*/ } こんな複雑な構造の物で練習しないで、もっと簡単な物で練習する事をお勧めします。

関連するQ&A

  • 段落内の "text-align" の重複

    CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。

    • ベストアンサー
    • CSS
  • 文字の右寄せの書き方

    次のようにすると「2009年7月5日」の文字が右寄せされると思うのですが、右寄せされません。どこが間違っているのでしょうか。 <head> <style type="text/css"> <!-- p.2 {line-align:right; } --> </style> </head> <body> <p class="2">2009年7月5日</p> </body>

    • ベストアンサー
    • HTML
  • tableに対するdiv

    テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★1</td> <td align="center" width="20%">★2</td> <td align="center" width="20%">★3</td> <td align="center" width="20%">★4</td> <td align="center" width="20%">★5</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう?

    • ベストアンサー
    • HTML
  • 表の1列だけをCSSを使って右揃えにするには?

    XHTMLとCSSを使ってホームページを作成中の初心者です。 表の中のデータを中央揃えにするのですが、ある1つの列の文字だけは全て右揃えにしたいのです。 A-1  B-1  C-1 A-2  B-2  C-2 A-3  B-3  C-3 という表があったとすると、この中の「C-1、C-2、C-3」は右揃え、他の部分は中央揃えにしたいのです。 もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は <table class="test"> <colgroup span="1" id="test-a"></colgroup> <colgroup span="1" id="test-b"></colgroup> <colgroup span="1" id="test-c"></colgroup> <tbody> <tr><td>A-1</td><td>B-1</td><td>C-1</td></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td></tr> </tbody> </table> のような感じで、CSS部分は table.test td {text-align: center} というようにすればよいかと思います。 また、個別に指定するのであれば、ソース部分は <tbody> <tr><td class="c">A-1</td><td class="c">B-1</td><td class="r">C-1</td></tr> <tr><td class="c">A-2</td><td class="c">B-2</td><td class="r">C-2</td></tr> <tr><td class="c">A-3</td><td class="c">B-3</td><td class="r">C-3</td></tr> </tbody> のような感じで、CSS部分は td.c {text-align: center} td.r {text-align: right} でも良いかと思います。 ただ、データの量が多く、全てのセルに対して <td class="c"> <td class="r"> 等の指定をすることは非常に大変です。 列ごとに横幅の指定をするときなどはCSS部分で colgroup#test-c {width: 20px} 等のようにすると思いますが、例えば、この colgroup#test-c 等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。

    • ベストアンサー
    • CSS
  • htmlの記述。「右揃え」出来ません(困ってます)

    こんばんは。質問の通り、右揃えになりません。 タグ打ちで、制作中。初心者です。 =-=-=-=-=-=-=-=-=-=-=-=-=-= <html> <head> <title>~</title> <style type="text/css"> span.c { text-align: right; } </style> </head> <body><center> … <span class="c"><a href="toppage.html">■ to top-page ■</a></span> </center></body> </html> =-=-=-=-=-=-=-=-=-=-=-=-=-= ■ to toppage ■を右揃えにしたいです。 <span class=""></span>で部分を指定して、 <style type="text/css">span.c { text-align: right; }</style>で条件を指定したのですが、左揃え(条件指定が出来ていない状態)にしかなりません。 <center></center>がダメなのか?っと思い、<center></center>を除いてみましたが、ダメでした。 <span class=""></span>でうまく部分指定が出来ていないのかと思い、<style type="text/css">span.c { text-align: right; }</style>の{}内に、フォントサイズの指定をすると、サイズ変化しました。 私的には、{ text-align: right; }が違うのかな?っと思っているのですが、分かりません。 どこが間違っているのでしょうか?? というか、右揃えの仕方を教えて下さい。どんな方法でもいいです。

  • Firefoxで右寄せにならないのですが

    テキストリンクに背景画像を挿入しています。 それをdisplay:blockにしたとたん、右寄せができなくなってしまいます。 <html> <p class="right"><a href="hellow">こんにちは</a></p> <css> p.right{ text-align : right; } p.right a{ background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; } display : blockを指定したときにFirefoxでは左寄せに戻ってしまいます。IEでは右寄せのままです。 Firefoxでも右寄せのままに表示したいのですが、どなたかアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • TDタグをスタイルシートを使って綺麗に簡単に書きたい。

    二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr>  <th>&nbsp;</th>  <th>XXXXXX</th>  <th>XXXXXX</th>  <th>XXXXXX</th> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">100</a></td>  <td align="right"><a href="###.html">525</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">10</a></td>  <td align="right"><a href="###.html">150</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問1 <td>は全て数値で、必ず右寄せ(align="right")なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか? 質問2 マウスカーソルをリンクに合わせると文字が反転するようになっているのですが できる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか? できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

    お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1>   <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ~行が続きますが省略~ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません

    floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません メニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。 縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか? HTMLとCSSを書いておきます。よろしくお願いします。 ・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }

  • セルをリンクにしたときの揃え位置

    http://www.htmq.com/style/vertical-align.shtml こちらを参考にセルのリンクを作成しました。 セル中の文字の縦揃えを中央揃えにしようと<td style="vertical-align:middle">としたのですが、反映されず困っております。 リンクの定義部分でA{vertical-align:middle}とも試しましたが変化ありませんでした。 どのようにすれば可能になりますでしょうか?