スタイルシートでテーブルやセルを管理する概念と仕組み、HTML

締切済

質問者：koichan55
質問日時：2009/06/24 10:52
回答数：4件

はじめまして。宜しくお願いいたします。
テーブルやセルの詳細指定について（例えばalignやpaddingなど）、
これまでは個別にやってきました。
しかし上級者の方に「スタイルシートで一括管理を学んだほうが良い」とアドバイスをいただきました。

ただ私は入り口の素人で、スタイルシートについてはまだよく理解ができていません。
概念、しくみ自体が理解できていないのです。

以下、心配な点を挙げてみました。
上級者の方、どうぞお教えください。

1.スタイルシートでテーブルやセルにalignやpaddingなどをやっておくと、
これから新しく作る新規テーブルや新規セルには、alignやpaddingなどを書き込まなくても、それらが効いた状態になるのでしょうか。
またその状態で、当然ながら幅や高さは変えられます…よね？

2.テーブルやセルのいくつかには個別で、すでに、alignやpaddingなどを書き込んでいる場所があります（いわゆる個別で条件が違う部分ですが）。
これら“もともと個別指定があるもの”への影響はどうなるのでしょうか。
個別指定のときには、個別指定のほうが「優先される？」こう考えて正しいでしょうか？

3.テーブルやセルの情報を、「パターンA」「パターンB」「パターンC」のようなイメージでスタイルシートに名付けしておして、
名前を指定して呼び出し反映させる。そういった機能もありますでしょうか。
このテーブルには「パターンA」を呼び出そう。
このテーブルには「パターンB」を呼び出そう。こんな使い方です。
もしあれば、HTMLの基本的な記述方法を教えてください（HTMLの記述については、お時間のある方で結構です）。

参考までに使用ソフトはDreamweaverMX2004です。
宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： abril
回答日時：2009/06/24 15:44

1～3へのご質問に対する直接的な回答は既に皆様の仰っている通りですので、実例を挙げておきます。

下記のサンプルを作って実際に試してみて下さい。ファイルとフォルダの構成は以下の様に仮定してあります。

├ css
│ └ sample.css
├ sample_1.html
├ sample_2.html
├ sample_3.html

----------------------------------------------------------------------
【CSS】(1)　※sample.css
----------------------------------------------------------------------
table {
width: 500px;
border-collapse: collapse;
margin-bottom: 2em;
}
th, td {
padding: 5px;
text-align: left;
background: #fff;
border: solid 1px #000;
color: #000;
}
th {
width: 20%;
}
td {
width: 40%;
}
----------------------------------------------------------------------
【HTML】(1)　※sample_1.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル1">
<caption>【サンプル1】外部スタイルシート（sample.css）による記述のみ</caption>
<tr>
<th>見出し</th>
<td>データA</td>
<td>データB</td>
</tr>
</table>

</body>
</html>
----------------------------------------------------------------------
HTML(1)の表示結果はCSS(1)でのスタイルの指定通り、【サンプル1】のテーブルの幅は500px、セルの文字色は黒・背景色は白・余白は上下左右に5px、となります。

次に、CSS(1)はそのままで、HTMLを下記の様に変更してみます。
----------------------------------------------------------------------
【HTML】(2)　※sample_2.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
<style type="text/css">

</style>

</head>

<body>
（以下同じ）
</body>
</html>
----------------------------------------------------------------------
HTML(2)の表示結果は、【サンプル1】のテーブルの幅・上下の余白はHTML(1)と変わりませんが、セルの文字色は赤・背景色はピンク・左右の余白は10px、に変わります。
これは何故かというと、後者の部分のスタイル（color、background、padding）に関しては、CSS(1)でのスタイルの指定とぶつかっており、その場合は”より直近に指定されたスタイルの方が優先される”というルールがある為、外部スタイルシートであるsample.cssが読み込まれた後にhead内でstyle要素で指定されているスタイルの方に上書きされています。

次に、CSS(1)に更に以下の様な指定を「追加」してみます。これをCSS(2)とします。
----------------------------------------------------------------------
【CSS】(2)　※sample.css
----------------------------------------------------------------------
（ここまではCSS(1)と同じ指定）
table.category {
width: 600px;
}
table.category td {
color: #090;
}
table#flower td {
background: #fc9;
}
table#vegitable td {
background: #cfc;
color: #90f;
}
----------------------------------------------------------------------
そして、HTMLの方は上記の外部スタイルシートCSS(2)の読み込みをした上で、以下の様にサンプルのテーブルを増やしてみます。
----------------------------------------------------------------------
【HTML】(3)　※sample_3.html
----------------------------------------------------------------------
（bodyの前まではHTML(1)と同じ）
<body>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル1">
<caption>【サンプル1】外部スタイルシートのスタイルのみ適用</caption>
<tr>
<th>見出し</th>
<td>データA</td>
<td>データB</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル2">
<caption>【サンプル2】tableの構成要素にstyle属性で直接記述</caption>
<tr>
<th>見出し</th>
<td style="padding: 5px 20px; background: #ccf; color: #00c;">データA</td>
<td>データB</td>
</tr>
</table>

<table cellspacing="0" cellpadding="40" border="0" summary="サンプル3">
<caption>【サンプル3】tableの各構成要素に各属性（cellpaddingやalign属性）で直接記述</caption>
<tr>
<th>見出し</th>
<td align="right">データA</td>
<td>データB</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル4" class="category">
<caption>【サンプル4】table毎のclass設定によるスタイルの振り分け（複数回使用可）</caption>
<tr>
<th>品物ランキング</th>
<td>データA</td>
<td>データB</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル4A" class="category" id="flower">
<caption>【サンプル4A】table毎のid設定によるスタイルの振り分け（同一HTMLファイル内では1回のみ出現可能なユニークな存在）</caption>
<tr>
<th>花</th>
<td>チューリップ</td>
<td>カーネーション</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル4B" class="category" id="vegitable">
<caption>【サンプル4B】4Aと同様。比較してみて下さい。</caption>
<tr>
<th>野菜</th>
<td>キャベツ</td>
<td>タマネギ</td>
</tr>
</table>

</body>
</html>
----------------------------------------------------------------------
各々の表示結果の違いはこうなります。

【サンプル1】
sample.cssでの指定通り。

【サンプル2】
データAのセル（td）のスタイルは【サンプル1】のままと変わりないのに対し、データBのセルのスタイルはstyle属性で指定された方が優先され、CSS(1)での指定とぶつかったスタイル（color、background、padding）に関して、文字色は青・背景色は薄紫・左右余白は20px、と変更されます。

【サンプル3】
HTMLの要素（タグ）に直接属性で記述した、「cellpadding="40"」と「align="right"」は、sample.cssで指定されたtdのスタイル「padding: 5px;」と「text-align: left;」の方が適用される為、無効になります。

【サンプル4】
tableにclass属性を与えてCSS(2)で「table.category {～}」で設定済みのclass名”category”を参照します。すると、全table要素対象のスタイルとして設定されていた「width: 500px;」の部分が「width: 600px;」に上書きされる為、テーブルの幅が伸びます。これは、要素（table）に対する指定と要素＋classセレクタ（table.category）の指定でスタイルがぶつかった場合はclassセレクタの指定の方が優先されるからです。
更に、セル（td）に対しても「table.category td { color: #090; }」で同様の優先順位が発生する為、td内の文字色が黒から緑に変更されます。

【サンプル4A】
【サンプル4】のtableに更に今度はid属性を追加して、「table#flower td {～}」で設定済みのid名”flower”を参照します。すると今度はtd内の背景色が白からベージュへ変わります。これは、要素（td）に対する指定と（親要素＋）idセレクタ＋（子）要素（table#flower td）の指定でスタイルがぶつかった場合はidセレクタの指定の方が優先されるからです。

【サンプル4B】
【サンプル4A】同様、こちらも【サンプル4】でのclassセレクタ”category”が継承された上で、idセレクタ「table#vegitable td {～}」で指定された要素が優先して適用されてtdの背景色が薄緑に変わります。4Bとの相違点は、こちらのidセレクタでは文字色も指定されており、これがclassセレクタ”category”での指定「color: #090;」とぶつかります。この場合、classセレクタよりidセレクタの方が優先される為、文字色も緑から紫に変更されます。

だいたいのところはおわかり頂けたでしょうか？
なお、分かり易い様に、優先度とか優先順位とか表記しましたが、実際には「詳細度」と言います。「CSS　セレクタ　詳細度」などのキーワードでググるなり、解説本を読むなりして詳しいルールを把握しておく事をお奨めします。CSSを学ばれる際には最初の段階で理解しておく事が望ましいことですので…

- 0
- 件

通報する

No.3

回答者： neko-ten
回答日時：2009/06/24 11:37

「スタイルシート(CSS)で一括管理をする」

ということの意味ですが、
「いわゆるpaddingやalignなどの「見た目」にかかわる部分はCSSで設定をし、HTMLではコーディングしない」
と言いたかったのかな？と思います。

1.
これはCSSの書き方です。
tableに対してCSSを設定すれば、すべてのtableが対象になります。
特定のクラス(Ex.hoge)に対して指定すれば、classがhogeである要素が対象になります。
このように、対象の変更も可能です。

2.
前提として、CSSでデザインを行うのであれば、個別の指定もCSSで行うべきです。
（つまり要素にclassを指定して、そのclassに対してCSSを記述する）
つまり、今現在HTMLに記入しているpadding/alignは削除する、てことです。
優先は一応HTML側だったかな

3.
Class指定してあげればできます。
簡易的に。
<html>
<head>
<! ---- titleなどは割愛 ---- //>
<style type="text/css">
.SampleTable1{
border:1px solid #aaaaaa;
font-size:20px;
}

.SampleTable2{
border:1px solid #acacff;
font-size:15px;
}
</style>
</head>
<body>
<table class="SampleTable1">
<tr><td>
hoge
</td><td>
huga
</td></tr>
</table>
<table class="SampleTable2">
<tr><td>
foo
</td><td>
bar
</td></tr>
</table>
</body>
</html>

厳密なルールに関してはご容赦ください・・・

- 0
- 件

通報する

No.2

回答者： nori_007
回答日時：2009/06/24 11:31

今のままで良いのではないでしょうか？

スタイルシートを導入するので有れば、テーブルでのレイアウトは行い方が良いと思います。

テーブルを単に表として利用しているので有れば、html では以下の記述にとどめ
<table>
<tr>
<td>
</td>
</tr>
</table>

<td> にスタイルを与えたいので有ればスタイルシートで以下の記述をします。

.patternA {
margin: 10px 10px 10px 10px;
padding: 0;
}

html では
<td class="patternA">
とすれば該当のセルにスタイルが反映します。

注記
通常クラス名に「patternA」等と抽象的な名称は通常付けません。
単に表組する程度有れば、セル毎に個別にスタイルを指定するは余り無いと思います。テーブルをレイアウトに用いないこと。

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2009/06/24 11:26

スタイルシートをつかう利便性のイメージとしては

(1)全体にかける
(2)グループにかける
(3)個別にかける
(4)親子関係をつかってかける

の４つがメインになります。（そのたいろいろありますが）
(1)については特定のタグなどを一括で変更ができます。
新規でタグを追加すればそれにも適応されます。

(2)については一般にclassをつかいます。
おなじclassを設定したものは、同じような属性をもちます。

(3)については一般にidをつかいます。
idはそのページにおいてユニークなものを指定します。

(4)(1)～(3)の組み合わせになります。
たとえば、liタグのなかのaにはメニュー用の修飾をするなど
単純なものから、idが"hoge"のdivの中にあるaタグのうち、
classがfugaのものを修飾するなど、複雑なものまで
いろいろ設定ができます