ベストアンサー

<BODY>～</BODY> の中に <STYLE type="text/css">～<STYLE>

2009/03/31 21:19

スタイルシートのことで質問があるのですが、 wikiに似たものでxoopsと言うものがあります。現在このxoopsでサイトを構築しているのですが、サイトの見栄えを決定する「テーマ」と言うものがあります。この「テーマ」はhtmlとcssで出来ています。コンテンツの編集にはxoopsにインストールしたエディタ(fckeditor）を使っているのですが（つまりweb上でエディットしています）、その中でスタイルを使う必要が出てきました。具体的には、１ページの中に表をいくつか入れたいのですが、１つ目は表の幅を画面の100%に、２つ目は画面の50%にしたいのですが、２つ目の表も幅が100％になってしまいました。原因は「テーマ」に使われているcssに　　table {width:100%; ～～と記述されていることでした。本来ならば、 <TABLE style="width:50%;"> 　<TBODY> 　　<TR> 　　　<TD style="border: 1px #0000ff dotted;">カラム1</TD> 　　　<TD style="border: 1px #0000ff dotted;">カラム2</TD> 　　</TR> 　　<TR> 　　　<TD style="border: 1px #0000ff dotted;">カラム３</TD> 　　　<TD style="border: 1px #0000ff dotted;">カラム４</TD> 　　</TR> 　</TBODY> </TABLE> のように書くべき何でしょうが、以下のように書いてもうまく表示されました。（IE8、GoogleChrome、Firefoxで確認） <STYLE type="text/css"> #sample1 {width:50%; } #sample2 {border: 1px #0000ff dotted; } </STYLE> <TABLE id="sample1"> 　<TBODY> 　　<TR> 　　　<TD id="sample2">カラム1</td> 　　　<TD id="sample2">カラム2</td> 　　</TR> 　　<TR> 　　　<TD id="sample2">カラム３</td> 　　　<TD id="sample2">カラム４</td> 　　</TR> 　</TBODY> </TABLE> つまり<BODY>～</BODY>のなかにスタイルを記述したのですが、本来はダメですよね？何か、正当ないい方法はありませんでしょうか？ちなみに、テスト表示したxoopsのサイトをブラウザの「ソースを表示」で見てみると、上記の前後に  <a name="top_of_pico_body" id="top_of_pico_body"></a> <div class="pico_body" id="pico_body"> 　　（省略） </div> が付いていました。

Take-bon
お礼率82% (24/29)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

12345963
ベストアンサー率55% (11/20)

2009/04/01 22:44 回答No.4

外部ファイルに書くのも、ヘッダの中に書くのも、ボディ内に書くのも全部正解です。矛盾した時何を適用するかの優先度と関係してきます。そのあたりを考えて、使いやすい用に選んでいくと管理がグッと楽になります。ココでは書ききれないので、説明されたページを紹介します。まずは、解からなくても一度目を通し、次に精読してみてください。そして、目的によって、各場所を決めてください。 http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm そして、詳細度が同じ時のみ、最後に書かれた値が適用されます。また、紹介したページには書かれていませんが、タグにも詳細度の区別があります。例えば、*は0点、fontも0点です。ややこしいですが、便利な物ですので、そんなものがある程度に、頭の隅に入れて置かれるといいと思います。

質問者

お礼 2009/04/05 23:26

ご回答ありがとうございます。 xoopsでは（xoopsだけじゃないでしょうけど）サイト構築にはcssの勉強は必須なようなので、精読しておきます＾＾ xoops意外にも役に立つでしょうし。

その他の回答 (3)

naokita
ベストアンサー率57% (1008/1745)

2009/04/01 00:25 回答No.3

＞この外部スタイルシートをいじると全体のレイアウトが崩れるため触りたくないのです。それなら、そのCSSを書き替えずに追加すれば良い。その同じCSSファイルの一番下にでも絶対混同しない様な id , class 名にすれば、崩れる事は無い。 .sample1-abcdef {width:50%; } .sample2-abcdef {border: 1px #0000ff dotted; } ----------------------------------------------- そもそもxoopsって昔からあるけど <head></head>内に書けば、良いだけなんじゃないの？ #1さんも、そうアドバイスしてますよ。何故 body 内に拘るのかわかりませんが、それがCSSのルールなので・・・現状は、単にブラウザが勝手に解釈してくれているだけであって、過去や将来のブラウザでも表示してくれるとは限りません。そんな条件で強引な他の方法は、・もう一枚CSSをつくる。とか、・width="50%"にする　※CSSを無視するならこれの方がマシ。・<body></body>を削除する。※styleを書くよりマシ。 Strict以外なら大丈夫だと思うけど。結局意味がない。 ----------------------------------------------- <html> <head> <style type="text/css"></style> </head> <body> <table class="sample1"> <tbody> <tr> <td>カラム1</td> <td>カラム2</td> 以下省略。

質問者

お礼 2009/04/01 17:36

naokitaさん、ありがとうございます。あれからも色々調べてみて、結局naokitaさんの仰るような >そのCSSを書き替えずに追加すれば良い。 >その同じCSSファイルの一番下にでも絶対混同しない様な id , class 名にすれば、崩れる事は無い。この方法でやることにしました。具体的には今使っているテーマを丸ごとコピーしてhtmlやcssを書き換え、管理画面からコピー＆改造したテーマを適用させます。どうも、オリジナルのテーマ用ファイルを直接触って後々面倒なことになるのが嫌だったので、なんとか出来ないかと思っていたのですが、結局は「自分用のテーマを作ってしまえ！」と言うことになりました。ありがとうございました。

OKwebb
ベストアンサー率44% (92/208)

2009/04/01 00:12 回答No.2

#1の補足です。 > htmlとスタイルが混合しているのが良くないのは、 > ・XHTML はこの記述をすべきではないとされている。 > ・メンテナンス効率が悪くなる > と言うことでいいのでしょうか？でいいと思います。 htmlはドキュメント内容をcssには見た目を書くってのが最近の流れです。 > この外部スタイルシートをいじると全体のレイアウトが崩れるため触りたくないのです。？？ <HEAD> 省略 <STYLE type="text/css"> .sample1 {width:50%; } .sample2 {border: 1px #0000ff dotted; } </STYLE> </HEAD> では駄目ですか？

質問者

お礼 2009/04/01 17:17

何度もありがとうございます。説明が下手で申し訳ありません＾＾；コンテンツを編集するweb上のエディタ（htmlソースを直に書くモードにして）の中でhtmlを書いていたのです。その中で<HEAD>～</HEAD>のなかに<STYLE>～</STYLE>の形にすると、結果的に以下のようなhtmlになってしまうのです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> 　　　　（～～省略～～） <link rel="stylesheet" type="text/css" media="screen" href="（省略）/xoops.css" /> <link rel="stylesheet" type="text/css" media="screen" href="（省略）/themes/cube_default/style.css" /> 　　　　（～～省略～～） </head> 　　　　（～～省略～～）  <a name="top_of_pico_body" id="top_of_pico_body"></a> <div class="pico_body" id="pico_body"> ---------------------------ここからが私が書いたhtml------------------------------ <style type="text/css"></style> <table class="sample1"> 　　<tbody> 　　　　<tr> 　　　　　　<td class="sample2">カラム1</td> 　　　　　　<td class="sample2">カラム2</td> 　　　　</tr> 　　　　<tr> 　　　　　　<td class="sample2">カラム３</td> 　　　　　　<td class="sample2">カラム４</td> 　　　　</tr> 　　</tbody> </table> ---------------------------ここまでが私が書いたhtml------------------------------ </div> 　　　　（～～以下省略～～） <HEAD></HEAD>が消えてますし・・・＾＾；；しかし結局は回答番号：No.3のnaokitaさんの回答に書いたような方法で実現することになりました。お陰様でスタイルシートのこともxoopsのことも勉強になりました＾＾ありがとうございました。

OKwebb
ベストアンサー率44% (92/208)

2009/03/31 22:17 回答No.1

えーと、ちょっと質問の意図していることと違ったらごめんなさい。まず > 本来ならば、としている方は、htmlとスタイルが混合しているのであまりよいとはいえません。次に > 以下のように書いてもうまく表示されました。の方は・STYLEタグがBODYタグに含まれる点・id属性に同一の値が設定されている点が正しくありません。この STYLEタグをHEADタグに、 id属性をclass属性に #を.に変更すればいいのではないでしょうか。

質問者

お礼 2009/03/31 23:07

>> 本来ならば、 >としている方は、htmlとスタイルが混合しているのであまりよいとはいえません。ちょっと調べてみました。 htmlとスタイルが混合しているのが良くないのは、・XHTML はこの記述をすべきではないとされている。・メンテナンス効率が悪くなると言うことでいいのでしょうか？ >・STYLEタグがBODYタグに含まれる点が良くないのは理解出来ます。 >・id属性に同一の値が設定されている点 <STYLE type="text/css"> .sample1 {width:50%; } .sample2 {border: 1px #0000ff dotted; } </STYLE> <TABLE class="sample1"> 　<TBODY> 　　<TR> 　　　<TD class="sample2">カラム1</td> 　　　<TD class="sample2">カラム2</td> こうすべきでしたね。すみません＾＾；ただ「本来ならば」のところは、サイトの見栄えを決定する「テーマ」のhtml内で外部スタイルシートが指定されているのです。この外部スタイルシートをいじると全体のレイアウトが崩れるため触りたくないのです。（「テーマ」は他人が作ったもので、また、「テーマ」を入れ替えて簡単にレイアウトを変えることが出来るため、外部スタイルシートは触りたくないのです）ならば、<TABLE style="width:50%;"> のような混在で書くしかないのかなぁ・・・と、思った次第です。でも、確かに混在して書くとメンテナンス性が良くないので、混在以外でなんとか<BODY>～</BODY>の中でスタイルを記述する方法が無いかと探しています。

<BODY>～</BODY> の中に <STYLE type="text/css">～<STYLE>