ウォッチ
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時：2014/10/14 19:54
＞というスタイルシートがある場合、まとめることは可能でしょうか？
つまみ食いはダメですよ。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
→5.8 属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
★発想が違う!!!・・・とても大事な考え方ですから、しっかり自家薬籠中のものにすること。
スタイルシートを使ってデザインする最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。極論するとHTMLは徹底的に文書構造だけをマークアップします。それをどのように表現するか（プレゼンテーション）は、もっぱらスタイルシートに任せます。
ふたつのtableが同じデザインになると言う事は、この二つは同じ文書構造にあると言う事です。
例えば一つの文書内にいくつものtableが存在するとします。
<body>
<div class="header">・・・・</div>
<div class="section">
・・・・
<table summary="世界の国別 人口">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
・・・・・
<table summary="日本の県別 人口">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
・・・・・
<div class="figure">
<table summary="人口 推移">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
</div>
<div class="nav">
<table summary="10月 カレンダー">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
<table summary="11月 カレンダー">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
</div>
<div class="aside">
<table summary="関連商品">
<tbody>
<tr><td>・・・・</tr>
</tbody>
</table>
</div>
</div>
<div class="footer"></div>
</body>
だとします。
注】header,section,aside,figure,footerなどのclass名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )に合わせています。class名は、このように文書構造を示すために使用する。
これだと
※本文中のtableだと
div.section table{}で、figure,aside,nav内も含めてすべてのtableのデザインができる
div.section div.aside table{}で、aside中のtableだけ
div[summary~="人口"]{}だと、summaryの値リストの一つに"人口"をもつもの
div.section * table{}だと、sectionの孫以下のtable
div.section>table{}だと、div.sectionの子供のtable(子孫じゃない)
というふうに、セレクタで特定することができるのです。
＞というスタイルシートがある場合、まとめることは可能でしょうか？
＞table[summary="test1 test2"]{
これはsummary属性に"test1 test2"の値を持つものになりますから、違います。
table[summary="test1"],table[summary="test2"]{}
になりますが、それ以前に!!!。同じデザインに死体と言う事は、HTMLにきちんと文書構造が示されていれば、（上記の例だと）
div.section>table{}
div.sectionの直接の子供であるtableと指定できるのです。
セレクタを含むカスケーディングの仕組みは、CSS--Cascading Style Sheetsの根幹ともいえる最重要な部分です。それを知らなきゃCSS使うことができないです。
プロパティだけ説明してある、役に立たないサイトがあまりに多すぎる。
-
-
- 0
- 件
-
No.1
- 回答日時：2014/10/12 19:04
border=1 はともかく、cellspacing=1 cellpadding=20は非推奨です。
スタイルシートを使いましょう。★スタイルシート使えばお茶の子さいさい
「スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
<table summary="テストの表" border="1">
<tbody>
<tr>
<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
</tr>
<tr>
<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
<tr>
<tr>
<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
</tr>
<tr>
<th abbr="た">た行</th><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td>
</tr>
</tbody>
</table>
にて、上に10px,下に20px、左右に一文字分、ただしthは左に二文字とか・・自在にできる
一行おきに背景色を変えるとか・・もね。
最後にサンプルあげて置きます。
★ HTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたが、HTML5では完全にプレゼンテーションに関わる要素、属性は廃止です。
HTML4.01strictに適合するHTMLを書くようにして、プレゼンテーションはすべてスタイルシートに任せたほうが楽です。
「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
サンプル
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェック済みのHTML4.01strict+CSSです。
★タブは＿に置換してあるので戻す。
★もっともっと色々な設定ができますが、ごく一部だけ・・・
<!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">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
/* tableのデザイン */
table[summary="テストの表"]{
border:gray outset 10px; /* tableの外枠の色と形とサイズ */
border-collapse:collapse;/* セル間を空けない */
border-color:red orange yellow lime;/* 上下左右の色を変えてみた */
}
table[summary="テストの表"] th,
table[summary="テストの表"] td{
border:gray solid 2px;/* セルの枠線の色と形 */
padding:10px 1em 20px 1em;/* 上下左右のpadding */
}
table[summary="テストの表"] th{
padding:10px 2em 20px 1em;/* 右がの余白をあけて */
border-right-style:double;/* 見出しの右枠は二重 */
}
table[summary="テストの表"] tr:nth-child(2n) th{
background-color:yellow;/* 偶数行は黄色背景 */
}
table[summary="テストの表"] tr:nth-child(2n) td{
background-color:rgb(255,255,180);}
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<table summary="テストの表" border="1">
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="た">た行</th><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2014/10/14 17:39
無事できました。ありがとうございました！コードも参考になります。
ちなみに
table[summary="test1"]{
width: 100%;
}
table[summary="test2"]{
width: 100%;
}
というスタイルシートがある場合、まとめることは可能でしょうか？
table[summary="test1 test2"]{
だと、適用されませんでした。
最後ご回答いただければ幸いです。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
関連するQ&A
- 1 <td></td> と、<td><BR></td>
- 2 <TABLE><TD><TR>~内のアンカー
- 3 CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか?
- 4 ■ <table><tr><td>~~ を表示することはできますか?
- 5 <td>が空欄でもtable{table-layout:fixed;}で<td>の幅が狭くなった。
- 6 <TD><input type="text"></TD>でテキストボックスとセルの間にわずかな隙間があいてしまう・・
- 7 <table>の<thead>をposition:fixed;にすると<th>の幅が変わってしまう。
- 8 <table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる
- 9 表のセル(<td></td>)に外部ページを呼び出し
- 10 <table>~</table>内のテキストのサイズ
関連するカテゴリからQ&Aを探す
このQ&Aと関連する良く見られている質問
■
| ～～ を表示することはできますか？
おすすめ情報 人気Q&Aランキング
おすすめ情報 |
