- ベストアンサー
ＣＳＳの関与した表以外の表を作りたい
ホームページ作成初心者です。コンテンツ部分に表（テーブル）を作りました。 ＣＳＳでパディング、マージンだけ指定してます。 ほとんどの表はこれでいいのですが、これとは別に表を作りたいのです。 その場合ＣＳＳが関与してしまいますが関与しないようにするにはどうすればいいのでしょうか？ 何種類か作らないといけないので困っています。できれば横に２列（個）、下に３列（個）を 少しだけ間を空けてくっつけたいのですが作りかたが分かりません。画像添付しました。 どなたかご教授ください。
- kasai2050
- お礼率88% (63/71)
- ホームページ作成ソフト
- 回答数7
- ありがとう数5
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
<table> <tr> <td colspan="2" style="width:50%"> </td> <td colspan="2" style="width:50%"> </td> </tr> <tr> <td style="width:33%"> </td> <td colspan="2" style="width:33%"> </td> <td style="width:33%;"> </td> </tr> </table> これで、横に２列（個）、下に３列（個）の要望の形にはなります。 違うスタイルを当てたいとの事なので、先頭の<table>を<table class="style-none">とでもしておいて .style-none{padding:0;margin:0;}/*style-noneのクラスのついた表に対するスタイル*/ .style-none td{padding:0;margin:0;}/*当該表の中のtdに対するスタイル*/ などと、別のスタイルの数値を当てればいくつでも、関与するスタイルを変更できます。 本来ですと、デザインに対するクラス名を付けるのは間違いですが、わかりやすいようにstyle-noneとしました。このように、｛の前の場所の指定する場所をセレクタといいます。クラスやidで局所化を図れます。 前の質問で、＃ヘッダ｛などとされていましたので、局所化は既に利用されていると思います。セレクタが前述の方法では、既存のセレクタに詳細度で負けてしまい表示できない場合もありえますが、それは質問者さんのソースを見ないと、誰にもこたえられません。 上記のサンプルですと、style="width:??%"としていますが、これをインラインスタイルシートといいます。勿論、インラインでないスタイルシートでも、クラスわけをするとできますので、チャレンジしてください。 ｃｓｓは自分でやらないと上達しません。誰かにやって欲しいなら、業者に頼みなさい。自分でやるなら、つまみぐい勉強法も可能ですが、体系的にも基本をすこし学ばれることをお勧めします。 掛け算、引き算が出来ない人には、割り算のやりかたを簡単に教えるのは難しいですし、やり方を聞いても、理解しにくいため、教わるほうもそんなことを聞いているんじゃないんだとなってしまいます。トランプのカードを一枚ずつ人数の前に配っていく方法なら、割り算を知らなくても可能ですので、つまみぐい勉強法も否定はしませんが、非効率だと思いますよ。
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞以後、私の回答をしないでください。 それは失礼しました。でもきっと先で、「ORUKA1951はそんなこと言ってたな」とヒントになると期待しています。 ちょっと早とちりして、ずれていたと思いますが、簡単な例を挙げておきます。 <div class="tables"> <table class="two"></table> <table class="two"></table> <table class="tree"></table> <table class="three"></table> <table class="three"></table> </div> div.tables{position:relative;}/* サイズの基準となるので */ div.tables table.two{width:45%;} div.tables table.three{width:31%;margin-top:20px;} div.tables table{flat:left;} とか・・ 具体的なソースがあると適切なアドバイスが出来るかも。 ＞ベストアンサー率、お礼率も低いようですね。 ポイントも、ベストアンサー率、お礼率もあまり期待していません。それらは目標にはしていません。私もつい昨年までは、スタイルシートもさっぱりわかりませんでした。もうしっかり高齢者の仲間入りをしてしまった(還暦迎えた(^^))のですが、人に教えようとするとどうしても勉強しなくてはなりません。それが身につける早道ですから・・。 まあ、懲りずにお付き合いください。すぐ追いつけますよ。若いのですからね。
お礼
ORUKA1951さん、初心者向けの回答ありがとうございました。 私のＨＰにかかわる仕事は出来上がったＨＰを更新したり、たまに少しリニューアルしたりする程度ですが制作が本業ならともかく、私の仕事の中で3～5％ぐらいの比率しかありません。 年に数えるほどしかＨＰをいじることがないので、覚えたり勉強したりしても忘れてしまうのです。 そのために時間もお金もかけられないのでこのようなサイトを利用しています。 大変、助かっています。 皆さんには「ちゃんと一から勉強しろ」と言われるのも分かりますが 私もORUKA1951と年齢があまり変わりません。 ６０才前なので本を読んでもネットでも眠たくなるばかりです。 こういう利用者もいることをご理解ください。
- DrFell
- ベストアンサー率55% (305/551)
それって表なの？ただ並べるのに初心者だから、表のセルを利用すればやりやすいと思ったんじゃないのかな？テーブルは表に使うものであってデザインの配置に使うものではない。 初心者なら、ｈｔｍｌとｃｓｓを初心者的に基礎から学んだほうが早いと思うけど、そうすればこんな初歩的な質問でない。ご教示したくても、そういうデザインにしたい意味や、文章構造が示されないとｈｔｍｌやｃｓｓは書けないものなんだ。そのあたりを理解して欲しい。 でもそんなことはどうでもいいんだ！そういうデザインをやりたいっていうんだから、そういうふうに見えるものを間違っているけど、kasai2050さん的にはわかりやすいんじゃないかなっていうことと、インライン要素やブロックライン、インラインブロック要素を初心者はまず把握すべきという意味プラスおそらく使えないだろうなぁという悪意をもって、おいちゃんが、ご教示する。単独でトライして、それから、実際の場所にはめ込んで、悩めばいい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style type="text/css"><!-- div{ background:#0a509f; margin-right:2px; padding:0; display:inline-block; } .hyou{ width:158px; height:67px; } .table{ width:104px; height:50px; margin-right:3px; margin-top:2px; } --></style> </head> <body> <div class="hyou"></div><div class="hyou"></div><br> <div class="table"></div><div class="table"></div><div class="table"></div> </body> </html>
お礼
回答ありがとうございました。少しは前に進めそうです。 「テーブルは表に使うものであってデザインの配置に使うものではない。」はい、最近はそのようですね。今回は価格表など表が多くあるので質問しました。 以前はテーブルレイアウトも良かったので見やすかったのですがＣＳＳを使うようになり、私の中ではややこしくなりました。 皆さんには「ちゃんと一から勉強しろ」と言われるのも分かりますが 私のＨＰにかかわる仕事は出来上がったＨＰを更新したり、 たまに少しリニューアルしたりする程度ですが、制作が本業ならともかく、 私の仕事の中で3～5％ぐらいの比率しかありません。 年に数えるほどしかＨＰをいじることがないので、覚えたり勉強したりしても忘れてしまうのです。 そのために時間もお金もかけられないのでこのようなサイトを利用しています。 年のせいではないかもしれませんが６０才前なので本を読んでもネットでも眠たくなるばかりです。 ご容赦ください。
マルチを平然と自白とか… 思いますってなんだ？他人が書いたソースをいじっているのか？ さて、「具体的で簡単な記載例を教えてください」とのわがままなご要望ですが、こんなものはHTMLとCSSの基礎なので自分でネットでも本でも使って調べてください。1分で分かることです。 <table class="xxx"> .xxx { xxxx: xxxx; } 確かにORUKAの長文原理主義屁理屈はウザいが、だからと言ってその程度の基礎中の基礎まで自分で調べられないレベルの人にはそれ以前の問題。
お礼
回答ありがとうございました。少しは前に進めそうです。 「他人が書いたソースをいじっているのか？」＝いえ、違いますが、 ＣＳＳ自体が良く分かっていないので思いますと書きました。 皆さんには「ちゃんと一から勉強しろ」と言われるのも分かりますが 私のＨＰにかかわる仕事は出来上がったＨＰを更新したり、 たまに少しリニューアルしたりする程度ですが、制作が本業ならともかく、 私の仕事の中で3～5％ぐらいの比率しかありません。 年に数えるほどしかＨＰをいじることがないので、覚えたり勉強したりしても忘れてしまうのです。 そのために時間もお金もかけられないのでこのようなサイトを利用しています。 ６０才前なので本を読んでもネットでも眠たくなるばかりです。 ご容赦ください。
今はtableにスタイルを適用しているということ？ だとすれば一番簡単なのは区別したい<table>にidかclassをつける。
補足
回答ありがとうございます。 「今はtableにスタイルを適用しているということ？」はそうなっているのだと思います。 「区別したい<table>にidかclassをつける。」の具体的なで簡単な記載例を教えてください。 下記に同じ質問をしています。見本の画像もあります。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1378007133 １個１個の表（テーブル）を並べるか、全体で１つのテーブルでもいいのですが、個々には並ばないし 全体でも作るとどうも上の２個と下の３個のセルの縦の区切りが揃ってしまうので困っています。 初心者なので、なるべく具体的に解説のほどよろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
チェックしてなかった・・ table{ border-collapse:collapse; } table,table td{ border:solid 1px black; } table td{ padding: 5px 10px; } table+table,table+table td{ border-color:red; } table+table+table,table+table+table td{ border-color:green; } table+table+table{ border-color:green; } table[summary="test1"]{ background-color:yellow; } table+table{margin-top:20px;} です。 HTML4.01、XHTML1.0では、tableのsummaryは必須なので書かれていると思いますが、それを使うのがもっとも楽です。 <table summary="菓子 洋菓子"> <table summary="菓子 和菓子"> <table summary="果物"> と書いてあれば、 table[summary~="果物"]{ font-weight:bold; } table[summary~="洋菓子"]{ color:green; font-size:2em; } とも、書けますね。~=はクラスと同じように、属性の値が半角スペースで区切られている場合、そのうちひとつにその値があれば適用されます。 現実にはtableにclass名をつけたり、tableが存在する場所で指定することが多いでしょう。 div.section table{} 本文中のtable div.section div.aside table{}補足記事中のtable とか・・
お礼
ORUKA1951さんは以前も回答を頂いてますが、 貴方の回答がすらすらとわかるようであれば質問しないのでなないでしょうか？ もう少し専門知識があるかた向けの回答かと思います。 失礼ですがベストアンサー率、お礼率も低いようですね。 つまり相手の思うことに回答してないと言うことではないかと思います。 せっかくですが私のスキルでは理解しがたい説明です。 以後、私の回答をしないでください。
補足
失礼しました。画像がＵＰできてませんでした。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSでは、セレクタを使ってスタイルを指定する対象を区別します。セレクタとは文字通り識別子です。 セレクタには 基点セレクタ 全称セレクタ タイプセレクタ それに続くセレクタ 子孫セレクタ 子供セレクタ 隣接セレクタ オプションセレクタ 属性セレクタ クラスセレクタ(HTMLのみ) 一意セレクタ 擬似クラスセレクタ 擬似要素セレクタ などがあります。 tableが何らかのセレクタの組み合わせで区別できればよいですね <table summary="test1"> <tbody> <tr> <td>一列</td><td>ニ列</td> </tr> <tr> <td>1</td><td>2</td> </tr> </tbody> </table> <table summary="test2"> <tbody> <tr> <td>一列</td><td>ニ列</td> </tr> <tr> <td>1</td><td>2</td> </tr> </tbody> </table> <table summary="test3"> <tbody> <tr> <td>一列</td><td>ニ列</td> </tr> <tr> <td>1</td><td>2</td> </tr> </tbody> </table> と三つ並んでいた場合 table{ border-collapse:collapse; } table table td{ border:solid 1px black; } table td{ padding: 5px 10px; } table+table{ border-color:red; } table+table+table{ border-color:green; } table[summary="test1"]{ background-color:yellow; } table+table{margin-top:20px;} としたり、・・・ このセレクタと、詳細度の計算はCSSのカスケーディングと共に最も重要なポイントです。 『ＣＳＳでパディング、マージンだけ指定してます。』 というプロパティを学ぶより、先にしっかり学ばないと、余計なクラス名やIDをつけたり、無駄なdivで囲んだりと、無駄なHTMLやCSSを書くことになり、デザインを変えるたびにHTMLを書き直す直すなど、CSSを有効に使えなくなります。 ★5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ★6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 仕様書でも当然、プロパティの説明より前にある。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
回答ありがとうございました。ＨＴＭＬもＣＳＳもあまり良く分からないままＨＰの制作にかかわっています。私のＨＰにかかわる仕事は出来上がったＨＰを更新したり、たまに少しリニューアルしたりする程度です。皆さんには「ちゃんと一から勉強しろ」と言われるのも分かりますが制作が本業ならともかく、私の仕事の中で3～5％ぐらいの比率しかありません。 年に数えるほどしかＨＰをいじることがないので、覚えたり勉強したりしても忘れてしまうのです。 そのために時間もお金もかけられないのでこのようなサイトを利用しています。 年のせいではないかもしれませんが６０才前なので本を読んでもネットでも眠たくなるばかりです。 こういう利用者もいることをご理解ください。