フルCSSプロフェッショナルテンプレの表作成

質問

ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。

１、まったく別の表のためのCSSはどのように書けばいいのでしょうか？
２、それをどのように記述すればよいでしょうか？

３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？）

↓↓こんな感じで書いてみたのですが・・・。
CSSコード
.example table {
width: 640px;
border: 1px #ff6347 solid;
border-collapse: collapse;
}

.example td {
border: 1px dashed;
background-color: #ff6347;
padding: 0 6px;
}

.example th {
border: 1px dashed;
background-color: #9acd32;
}

HTMLコード
<div class="example">

<table>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>

</div>

回答No.2

DrFell · ベストアンサー

>早速回答でいただいたソースを入れてみましたが、ビルダーのフルCSSプロフェッショナルテンプレートでは、親要素の勝ちでした。相変わらず地味な2色の表になっていました。

ビルダーに頼らずｃｓｓを勉強することをお勧めします。ビルダーの「親要素の勝ち」とおっしゃいます。それは正しいです。勝ち負けを決めるのはｃｓｓのセレクターの詳細度です。ビルダーが持っているテンプレートでは、.example tableつまり、クラスセレクター1つと疑似要素セレクター1つでは、元のセレクターに負けるのです。いまのまま、html構造を変えなくても同点もしくは勝てます。が勝つためには相手の強さを知り、それと同等以上にしなければなりません。そのためには、ｃｓｓの知識は不可欠です。同点の場合は、後述するものが採用されます。
http://w3g.jp/css/guide/cascading_order

>せっかく派手な色のソースなのにやっぱりフルCSSプロフェッショナルテンプレは、そのまま使うようにできているんでしょうね。

最終的には、ｈｔｍｌとｃｓｓを出力します。ですから、ｈｔｍｌやｃｓｓのルールに従います。ソフトにやってもらうのなら、そのまま使うように出来ているのかもしれません。ｃｓｓの基本、セレクタ（選択肢）の詳細度を学ばれて、詳細度を上げれば派手な色にすることはできます。

今回のビルダーはIE8でビルダーどうりの表示になると思いますが、他のブラウザでは崩れることもあります。IE8はシェア30％程度です。他の70％の人たちには見えない、読めない、まったく表示されないこともあります。そういういみでも、ビルダーにだけ頼るのは止めて、htmlやｃｓｓの基礎だけでも学ばれることをお勧めします。

お礼

回答ありがとうございます。

＞他のブラウザでは崩れることもあります
ああ、そうなのですね。考えもしませんでした。また、リンク先を読み、もう少しCSSの知識が必要なことを実感しました。

CSSって、いろいろなことができておもしろいと思うようになりました。

回答No.1

DrFell

ビルダーよりｃｓｓを勉強しましょう。
質問は、継承および選択肢だと思います。
http://www.y-adagio.com/public/standards/css1/cssmain.htm
1.3 継承
1.4 選択子としてのクラス
1.6 文脈選択子
あたりを一読ください。

ご希望のソース的には
css------------------------
table{margin-bottom:20px;}
table.example {
width: 640px;
border: 1px #ff6347 solid;
border-collapse: collapse;
}

.example td{
border: 1px dashed;
background-color: #ff6347;
padding: 0 6px;
}

.example th {
border: 1px dashed;
background-color: #9acd32;
}
/*全く変えたい*/
table.example1 {
width:320px;
border: 2px #333333 solid;
border-collapse: collapse;
}

.example1 td {
border: 1px solid #666666;
background-color: #aaaaaa;
padding-right:10px;
text-align:right;
}

.example1 th {
border: 1px solid #333333;
background-color: #444444;
color:#ffffff;
}
/*一部変えたい*/
.type2{
font-size:xx-large;
}
.type2 *{
border:solid;
}
.type2 td{
background-color:#cce698;
}
html------------------------
<table class="example">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<table class="example1">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<table class="example type2">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>

お礼

回答ありがとうございました。文脈選択子？？？難しいですね。理解できませんでした。

早速回答でいただいたソースを入れてみましたが、ビルダーのフルCSSプロフェッショナルテンプレートでは、親要素の勝ちでした。相変わらず地味な2色の表になっていました。

せっかく派手な色のソースなのにやっぱりフルCSSプロフェッショナルテンプレは、そのまま使うようにできているんでしょうね。

CSSのソースの書き方、基本的なこともろくに知らずに作業しています。だから、.type2などの書き方は勉強になりました。