
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>というスタイルシートがある場合、まとめることは可能でしょうか?
つまみ食いはダメですよ。
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使うことができないです。
プロパティだけ説明してある、役に立たないサイトがあまりに多すぎる。
No.1
- 回答日時:
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>
無事できました。ありがとうございました!コードも参考になります。
ちなみに
table[summary="test1"]{
width: 100%;
}
table[summary="test2"]{
width: 100%;
}
というスタイルシートがある場合、まとめることは可能でしょうか?
table[summary="test1 test2"]{
だと、適用されませんでした。
最後ご回答いただければ幸いです。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DreamWeaverで複数ワードを一気...
-
テーブルのセルに画像をピッタ...
-
テーブル(表)を2つ横に並べて...
-
テーブルタグの中に<ol><li>を...
-
cssで、表示されるテキストによ...
-
tableの中にtableを作りスクロ...
-
表の中の列の順番を入れ替える...
-
テーブルの任意の列を非表示に...
-
サイト作成中・・・表の両端に...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
スタイルシートは直接指定より...
-
nth-childをtrとtdに同時に使う...
-
tableにul,または,olを入れられ...
-
文字の中央そろえを一括で指定...
-
Tableの途中にスペースを入れた...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
<img>タグにCSSのclass設定可能?
-
テーブルを使ったレイアウトで
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
javascriptを使って、指定行以...
-
テーブルのセルに画像をピッタ...
-
cssで、表示されるテキストによ...
-
中に<table></table>が使えるア...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
ホームページ 表の上の余白を...
-
逆L字の表(table)組み
-
EXCELからhtmlへの変換で罫線が...
-
表の中の列の順番を入れ替える...
-
テーブルの表示がずれます
-
htmlのtable内に画像
-
表の1列だけをCSSを使って右揃...
-
カレンダー内の数字を左上に配...
-
HTMLのテーブルで桁をそろ...
-
テーブルの行の高さを指定する...
おすすめ情報