楽天で出店しております。
商品ページにテーブルが組み込まれ、テーブルにhtmlでカラーが指定されています。
cssで変更可能か、ご教授下さい。
cssも見よう見まねですが、jqueryは難解なので出来る事ならcssで変更したいと思っております。
表は 2列×6行
項目が左
ブランド | ○○○
サイズ | ○○○
材質 | ○○○
仕様 | ○○○
カラー | ○○○
特徴 | ○○○
ご注意 | ○○○
となっており、既存のテーブルにはthは指定されておらず
全てtdで区切られている状態です。
項目のボールドもカラー指定も、セル単位で指定されています。
希望としては、既存のテーブルと、今度の商品ページで作るシンプルなhtmlのテーブルの両方に反映するcssにしたいと考えております。
・項目 ボールド、背景のカラー指定 (変更確認済み)
・項目 カラー変更
・最後の項目のみ 赤色に
htmlはそのままで、(class idをつけずに)テーブルの中の背景色や文字のカラーを変更したく
楽天のRMSの中で商品ページのタグが入れれる『PC用商品説明文』という項目にテーブルを1つだけ入れているので
cssで
.item_desc
で指定し、
td:first-child
で項目のボールドや背景等は変更を確認出来たのですが、
どうしても文字のカラーが変更出来ません。
cssのみで項目のカラーを指定のカラーに変更し、項目の最後を赤にしたいので、
是非ご教授願います。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
>見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。
いや、これか一番非効率で時間もかかり、何よりもうまくいかないのです。---私の20年近い長い経験から断言できる。
>私レベルで分かる様に噛み砕いてご教授頂けると幸いです。
なら、仕様書をとりあえず読みましょう。数学の勉強がきちんと基礎から順を追って学べば小学生でも数検2級が取れるように、そのほうがはるかに速く作業を進められる。そもそも、用語がわからないでは説明を聞いてもチンプンカンプンでしょう。例えば[詳細度を高くしなさい」と一言で正確に言われても、セレクタや詳細度の計算がわからないでは役に立たないでしょう。
>既存のテーブルの文字は全てFontタグに挟まれて色指定がされており、
<font>は非推奨の典型ですが、その色指定は属性(attribute)で指定されているのでしたら、詳細度は0として産出されますから、詳細度0001の指定でも上書きできます。
「ユーザーエージェントは、HTMLソースドキュメントの体裁用の属性を尊重してよい。その場合、これらの属性は0に等しい詳細度と対応するCSS規則に変換され、それらは著者スタイルシートの先頭に挿入されたかのように扱われる。したがって、後のスタイルシート規則によって上書きされることがある。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
→6.4.3 セレクタの詳細度の計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
そして、colorプロパティは継承されるプロパティですから
継承: yes( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
<td><font color="red">
に対して、td{color:green;}の場合、<font color="red">がなければ継承されますが、それがあると詳細度0とはいえそちらが適用されます。対策としては、
font{color:inherit;}と継承させるか、td font{color:green;}とすればよいはわかりますよね。
colorプロパティの値は、
値: <color> | inherit( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
なのですからね。
★ちなみに、fontで可能な属性
size=,color=,face=
15.2.2 フォント変更要素: FONT要素とBASEFONT要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
については、対応するCSSのプロパティで
font{color:inherit;size:inherit;font-family:inherit;}
とすれば、すべて無視してくれる。(^^)
こんなこと仕様書にサラッと書いてある。
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
★「見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。」がとにかく間違い。最も時間がかかり、無駄で間違いに陥りやすい。
きちんと仕様書から始めていたら、1~2週間もあれば済んでいた作業でしょう。
No.2
- 回答日時:
HTMLでの指定が<th style="color:red">となっている場合は、無理です。
スタイルシートにカスケーディングスタイルシート(CSS)をお使いでしたら、カスケーディングはプロパティより前に書かれている基礎部分ですから、ご存知だと思います。
HTMLのスタイル属性の場合の詳細度は 1,0,0,0 ですが、td:first-childの詳細度は 0,0,1,1 ですから・・・
※そうではなく、<td color="">は誤りなのでないとして、<td><font color="">の場合は、
table.item_desc tr td:first-child font{color:red;}
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティー値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
2.ソートは重要性(通常、important)と起源(著者、ユーザー、ユーザーエージェント)に従う。優先順位は昇順で:
1.ユーザーエージェントの宣言
2. ユーザーの通常宣言
3.著者の通常宣言
4.著者のimportant宣言
5.ユーザーのimportant宣言
3. 同じ重要性と起源をもつ規則を、セレクタの詳細度によってソートする: より詳細なセレクタが、より一般的なものを上書きする。擬似要素と擬似クラスはそれぞれ、通常の要素とクラスとみなされる。
4.最後に、指定された順序でソートする: 2つの宣言が同じ重み、起源と詳細度を持つ場合、最後の指定された規則が適用される。取り込まれたスタイルシートの宣言は、スタイルシート自体の宣言に先行するものと考えられる。
よって、スタイルシートで、!important宣言をつけなければなりません。
そうでなければ、tableのclass item_desc なら
table.item_desc tr td:first-child{}
で変更できるはずです。
この場合、rowspanが前の行に指定されていると、期待外れのところが変更されるので、その場合はコツコツと隣接セレクタで修正します。
CSS2以降
.item_desc なんて書き方はしません、無きちんと起点セレクタを書いて table.item_desc とか、*.item_descとしましょう。(前者は詳細度 0,0,1,2、後者は 0,0,1,1)・・・詳細度も文書構造もわかりやすいので・・
「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。セレクタの構成要素のすべてが一致する場合、単体セレクタはマッチする。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
.item_descと書かれていると、*(全称セレクタが省略されているとみなしてはくれますが)
>htmlはそのままで、(class idをつけずに)テーブルの中の背景色や文字のカラーを変更したく
きちんと
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティー値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
が身についていれば可能です。
具体的にはHTMLのソースがわからないので示せません。
ありがとうございます。
とても分かりにくい説明の中、丁寧に教えて下さって恐縮です。
見よう見まねで必要に駆られて色んなサイトを参考にしながら無理矢理やっておりますので、勉強不足で専門用語が分かりません。
結果、本日文字カラーの問題を残してその他の更新をしましたが、文字カラーの問題は残ったままです。
前任者の作った、商品ページのテーブルはhtmlのみで構築されており、全てのセルや文字にカラー指定やフォントサイズ、背景色が書かれてとても長いので、文字制限もある為今後は装飾はcssで済ませてシンプルなテーブルに変えたかったのが始まりです。
しかし商品ページは2000個以上あり、セルの幅指定もマチマチなので、既存のhtmlはそのままに今後作る商品ページのテーブルをシンプルにし、マチマチだったカラーや幅もcssのみで統一したく思っております。
元来、トップページ以外は出店者には自由にいじれないと諦めていたのですが、この度楽天の規定で商品ページの選択肢の中に長い文字を入れなくてはならず、カートのテーブルが崩れたので調べて商品ページもcssで変更可能でしたので、だったら悩みの種だった説明文のテーブルもなんとか出来るはず!と、、、
まだまだこのレベルです。
ど素人です。
現状、幅や背景色は変更できました。
既存のテーブルの文字は全て
Fontタグに挟まれて色指定がされており、
.item_desc
というのは、楽天側の、タグを含めた商品説明文を入れてるスペース全体のclassの事です。
importantも効きません(現在携帯で打っているのでスペルが違っていたらすみません)
テーブルの中の、fontタグで挟まれた文字カラーをcssで変更するには、どの様にしたらよろしいでしょうか?
私レベルで分かる様に噛み砕いてご教授頂けると幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- その他(Microsoft Office) EXCEL VLOOKUPに関する質問 5 2023/02/08 11:38
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- システム CSVファイルのマッピング処理の省力化 1 2022/11/24 00:01
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- Access(アクセス) access フォーム 大分類、小分類 1 2022/08/11 18:03
- Excel(エクセル) DSUM とSUMIFSについて。 6 2022/06/12 04:21
- Access(アクセス) ACCESS2019 ナビゲーションウィンドウの色 1 2022/05/10 17:15
- Ruby pandasでsqlite3にテーブル作成・追加・読み出しでindexの取り扱い方教えてください 5 2023/03/08 09:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのid属性って必要なの?
-
CSSに同じclass名がいっぱい‥。...
-
外部スタイルシートで定義した...
-
CSSでスクロールバーの色変更
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
clear bothで回り込みがうまく...
-
外部css定義したclassをht...
-
webサイト印刷時に特定の画像を...
-
既にhtmlで指定したカラーの変...
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
印刷用CSS IEのとき、画像が印...
-
HTML要素のid/class名の長さに...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
リンクを知らせる手のマークが...
-
<table>の高さ固定。情報増加時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
フロートのクリアについて
-
スタイルシートでデザイン
-
CSS, リンクの色を一部変えるに...
-
外部css定義したclassをht...
-
スタイルシートで、id属性の中...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
一部のリンクの下線を消す
おすすめ情報