現在htmlサイトを作成しています

<HTML><HEAD><STYLE type=text/css>col.a { background-color: green; }col.a { color: red; }</STYLE><BODY>
<TABLE><col class="a" span="2" />
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</TABLE></HEAD></HTML>
をgoogle chromeで表示させた場合左2列の背景色は緑色に変わるのですが文字色は黒色のまま変わりません。
どうすれば文字色を赤色に変えることができるのでしょうか?
行数がたくさんあるサイトで左2列の背景色と文字色を変えたいので教えて下さい。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/03 03:46:50
  • 終了:2013/09/07 14:09:13

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/09/03 05:46:25

ポイント150pt

colおよびcolgroupでは、フォント関連の装飾に関するプロパティは無効のようです。

・CSS - col要素に有効なプロパティ
http://www.d-spica.com/try/col.html

・col/colgroup 要素で有効なスタイルと無効なスタイル。
http://blog.btmup.com/xhtml/col-colgroup-css.html

※上記記事のリンク先「第25回 tableをもっと見やすくデザインする」(http://itpro.nikkeibp.co.jp/article/COLUMN/20080730/311764/)の説明が詳しいです。(※該当箇所は2ページ目にありますが、閲覧するにはログインが必要です。)

IE9以降およびモダンブラウザに対応していればいいのでしたら、次のようにnth-child(n)を使って指定してみてください。

td:nth-child(1), td:nth-child(2) { background-color: green; color: red; }


・<colgroup> - テーブルのカラム設定
http://www.tohoho-web.com/html/colgroup.htm

※古いブラウザにも適用させたい場合は、個別にクラスを割り当てて指定するしかないと思います。

id:rouge_2008

個別にクラスを割り当てる場合、テキストエディタ等で置換してしまうと短時間で完了します。

一例として「ReplAce on .NET」を使って置換する場合の設定です。

・検索文字列

<tr>\r*\n*<td(.*?)>(.+?)</td>\r*\n*<td(.*?)>(.+?)</td>\r*\n*

・置換文字列

<tr>\r\n<td class="colstyle1"$1>$2</td>\r\n<td class="colstyle1"$3>$4</td>\r\n

※「正規表現を使う」にチェックを入れておきます。
※上記は改行コードがCRLF(Windows)の場合になっていますので、置換文字列の「\r\n」をファイルの改行コードに合わせて変更する必要があります。
※クラス名「colstyle1」は任意で変更してください。

※※※置換前の状態でtdにクラス「class="~"」が付与されていない事を前提にしています。
クラスが付与されている場合は、テキストエディタおよび検索・置換ツールでは綺麗に処理できないと思いますので、PHPなどのスクリプトで処理した方が良さそうです。

2013/09/03 15:50:23

その他の回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/09/03 05:46:25ここでベストアンサー

ポイント150pt

colおよびcolgroupでは、フォント関連の装飾に関するプロパティは無効のようです。

・CSS - col要素に有効なプロパティ
http://www.d-spica.com/try/col.html

・col/colgroup 要素で有効なスタイルと無効なスタイル。
http://blog.btmup.com/xhtml/col-colgroup-css.html

※上記記事のリンク先「第25回 tableをもっと見やすくデザインする」(http://itpro.nikkeibp.co.jp/article/COLUMN/20080730/311764/)の説明が詳しいです。(※該当箇所は2ページ目にありますが、閲覧するにはログインが必要です。)

IE9以降およびモダンブラウザに対応していればいいのでしたら、次のようにnth-child(n)を使って指定してみてください。

td:nth-child(1), td:nth-child(2) { background-color: green; color: red; }


・<colgroup> - テーブルのカラム設定
http://www.tohoho-web.com/html/colgroup.htm

※古いブラウザにも適用させたい場合は、個別にクラスを割り当てて指定するしかないと思います。

id:rouge_2008

個別にクラスを割り当てる場合、テキストエディタ等で置換してしまうと短時間で完了します。

一例として「ReplAce on .NET」を使って置換する場合の設定です。

・検索文字列

<tr>\r*\n*<td(.*?)>(.+?)</td>\r*\n*<td(.*?)>(.+?)</td>\r*\n*

・置換文字列

<tr>\r\n<td class="colstyle1"$1>$2</td>\r\n<td class="colstyle1"$3>$4</td>\r\n

※「正規表現を使う」にチェックを入れておきます。
※上記は改行コードがCRLF(Windows)の場合になっていますので、置換文字列の「\r\n」をファイルの改行コードに合わせて変更する必要があります。
※クラス名「colstyle1」は任意で変更してください。

※※※置換前の状態でtdにクラス「class="~"」が付与されていない事を前提にしています。
クラスが付与されている場合は、テキストエディタおよび検索・置換ツールでは綺麗に処理できないと思いますので、PHPなどのスクリプトで処理した方が良さそうです。

2013/09/03 15:50:23
id:u_7cc No.2

7cc回答回数32ベストアンサー獲得回数142013/09/03 14:28:25

ポイント150pt

(IE8以下の対応も要る場合)
CSSの「隣接セレクタ」を利用すれば左2列だけに色を付けることができます。
隣接セレクタの説明は外部サイトを参照してください。

隣接セレクタ - CSS | MDN

今回の場合は以下のように2ステップで期待通りの表示ができます。

  1. td全ての背景色、文字色を変える
  2. 3列目以降の背景色、文字色を元に戻す

td{
  background: green;
  color: red;
}
td + td + td {
  background: none;
  color: black;
}

デモ
http://jsbin.com/gist/6419948

それから他の方法で対処するとしても、HTMLで以下の点を直す必要があります。

  • HEADの閉じ位置を直す
  • BODYの閉じタグを書く
  • DOCTYPE宣言を書く

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません