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

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

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

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

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

<BODY>～</BODY> の中に <STYLE type="text/css">～<STYLE> -スタイル- HTML・CSS

重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

10ギガ光回線 OCN×ドコモ光

【GOLF me！】初月無料お試し

教えて!goo >
コンピューター・テクノロジー >
プログラミング・Web制作 >
HTML・CSS