スタイルシートについて

質問

スタイルシートについて質問です。

下記をTableの基本スタイルにしています。
特定のTableのみ、borderカラーを#666666にしたい場合
上記基本スタイルを生かしたままで簡潔なスタイルの設定方法はないでしょうか。

table, td, th　{border: 1px solid; border-collapse: collapse}
.w550　　　　　{border-color: #8AC5D4; width:550px}
.w550 td　　　 {border-color: #8AC5D4; text-align: center}
.w550 th　　　 {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90}

いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので
アドバイスいただけると大変助かります。

どうぞ宜しくお願い致します。

回答No.3

taseki · ベストアンサー

まずはcongo3261さんのスタイル記述は、少し整理できると思います。
●border-collapseはtableタグに有効
●罫線に関する記述が、色指定だけtable, td, thそれぞれに同じ指定があり、線種類や太さはまとめて指定してある
で、以下のように整理できると思います。

.w550 {width: 550px; border-collapse: collapse;}
.w550 td {text-align: center;}
.w550 th {padding: 5px 5px 5px 10px; color: #2A6D90;}
.w550, .w550 td, .w550 th {border: 1px solid #8AC5D4}

table, td, thそれぞれ特化した記述を先に書き、3つに共通の記述（この場合は罫線）を最後にまとめたものです。
（ちなみに th の padding って意味がないような…、th は中央寄せなので）

で、上記のスタイルをベースに特定の table だけ罫線の色を指定するには、それがページに1つだけならflowermazeさんのおっしゃるようにIDが使えると思いますが、ページに複数ある場合は、継承を利用すればいいと思います（スタイルシートの正式名称、 CSS ＝「Cascading Style Sheet」の「Cascading」は「継承」の意味）。
あるいは状況依存セレクタを使って、以下のようにするのが簡単かと思います。
-------------------------
.w550 table {width: 550px; border-collapse: collapse;}
.w550 td {text-align: center;}
.w550 th {padding: 5px 5px 5px 10px; color: #2A6D90;}
.w550 table, .w550 td, .w550 th {border: 1px solid #8AC5D4}

.w550 .gray, .w550 .gray td, .w550 .gray th {border-color: #666666;}
.w550 .red, .w550 .red td, .w550 .red th {border-color: #FF0000;}
-------------------------
■基本形
<div class="w550">
<table>
　…
</table>
</div>

■基本形＋gray
<div class="w550">
<table class="gray">
　…
</table>
</div>

■基本形＋red
<div class="w550">
<table class="red">
　…
</table>
</div>

お礼

ありがとうございます。
大変参考になりました。

投稿のCSSは自分なりに整理したつもりでいたのですが
まだまだ無駄な記述が多かったんだと改めて実感しました。

>（ちなみに th の padding って意味がないような…、th は中央寄せなので）
実は投稿する際に質問と関係なさそうな設定を削除したもので、thにtext-align: leftとしていた為、paddingを使いました。

> <div class="w550">
> <table>
divで囲うなんて頭の中にまったくありませんでした。

教えていただいた方法はこれからじっくり試させていただきます。

どうもありがとうございました。

回答No.4

noname#96725

>いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので
そのお気持ち良く解ります。私は少し異なる観点から私の苦い経験を通してのアドバイスをします。

私は色の設定だけをまとめた外部スタイルシートやフォント類の設定だけをまとめた外部スタイルシートなど
外部スタイルシートだけで5フォルダ22ファイルにしてそれらをstylesheetフォルダに入れ、各HTML文書からはどのCSSを参照させるかを選ばせています。（ファイル数がとても多いHPなので）

それでも欠点だらけで、外部スタイルシートをどのようにまとめ・分類して管理しやすくするかは、どんなコンテンツを用意するかの次に重要な事だと思っています。これはもうあらかじめじっくり練らねばならない「戦略」ですね。これを行き当たりばったりでどんどん書き加えてゆくと皆目見当がつかなくなります（で、整理し直して上記のようなフォルダが出来上がりました）

さて、引用された記述は外部CSSでの記述なのでしょうか。もしまだ外部スタイルシートをお使いでなかったらこの際に種類別目的別に書き分けた数種類の外部CSSへの移行をお勧めします。一枚のHTML文書の中に全てを書き込まない、これがご質問に対するお答えの大きな部分です。兎も角自分に取って判りやすいので管理が楽です。

具体的なご質問に対するお答えは：
基本スタイルは全て外部CSSに記述し、ある箇所だけに適用する特例的なスタイルは各HTML文書の<STYLE type="text/css"></STYLE>の間で<!--TABLE {　　　}-->の中に記述する（これが解りやすくてベター）、あるいはインラインで記述する（これはHTMLをずっと読み下さないと解らないのであまり薦められない）というのは如何でしょうか。

お礼

mariocecさん、ありがとうございます。

>引用された記述は外部CSSでの記述なのでしょうか。
スタイルシートは全て外部ファイルで、小規模から中規模サイトは1つのCSSファイルに全てを記述しています。

>5フォルダ22ファイル
すっすごいですね。。mariocecさんのおっしゃるような方法もあるんだと目から鱗です。

貴重なご意見ありがとうございました。

回答No.2

flowermaze

特定のテーブルというのは１ページ内にひとつだけですか？
それならclassとIDの併用がすっきりするかも。
（.w550の設定は生かして、border-colorだけ変えたいのですよね）

table, td, th　{border: 1px solid; border-collapse: collapse}
.w550, .w550 td, .w550, th {border-color: #8AC5D4;}
.w550　　　　　{width:550px}
.w550 td　　　 {text-align: center}
.w550 th　　　 {padding: 5px; padding-left: 10px; color:#2A6D90}
#gray, #gray td, #gray th {border-color: #666666;}

一般のテーブル
<table class="w550"><tr><th>...
枠線#666666のテーブル
<table class="w550" id="gray"><tr><th>...

お礼

ありがとうございます。

>.w550, .w550 td, .w550, th {border-color: #8AC5D4;}
>#gray, #gray td, #gray th {border-color: #666666;}

今まで上記の方法が分からずに、CSSファイルの中がぐちゃぐちゃになっていたので大変参考になりました。

classとIDの使い分けもすっきりさせるコツなんですね。
どうもありがとうございました。

回答No.1

2NN

table, td, th　{border: 1px solid; border-collapse: collapse}
.w550a　　　　　{border-color: #8AC5D4; width:550px}
.w550b　　　　　{border-color: #666666; width:550px}
.w550 td　　　 {border-color: #8AC5D4; text-align: center}
.w550 th　　　 {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90}

こんなんでいいですか？

お礼

早速アドバイスいただきありがとうございました。
参考にさせていただきます。