• ベストアンサー

CSSの複数使用について、（一つのページで）

CSSの複数使用について、（一つのページで） <head> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./table2.css" type="text/css"> <link rel="stylesheet" href="./table.css" type="text/css"> </head> <body> <div style='width:35%'> <span class="roundcorner_box"> <span class="roundcorner_box1"><span></span></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box5"></span> </span> <div class="roundcorner_box_content"> ここに文字 </div> <span class="roundcorner_box"> <span class="roundcorner_box5"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box1"><span></span></span> </span> </div> このようなソースで、（外部ファイルは略）として、外部ファイルと「table」と「table2」にしたときに、 二つ指定する方法が分かりません。どうしたらいいですか？ 外部ファイルのtableとtable2の内容は別になっている。

noname#57880
noname#57880
  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは 外部ファイルを略されているので具体的に何をしたいのか半分把握でき、半分把握できないといった状態です（＞＜） ＞半分把握 外部ファイルを複数利用する　→　<head>内のこの記述でできると思います ＞把握できない 外部ファイルを2個使用するのは↑でできると思うのですが何ができなくて質問されているのかわからないです ・CSSがまったく効いていない →<link rel="stylesheet" href="./table2.css" type="text/css">などの外部ファイルのパスなどは適切ですか？ →ファイル内のclass名やstyleの記述は適切ですか？ ・CSSが片方しか効いていない →同じclass名、style属性を指定していませんか？ 予想としては片方で角丸ボックスのCSSを、 もう一方でコンテンツ内のCSSを、 といった感じだと思うのですが何が出来ていないのか分からないのでこれ以上は・・・（－－；） 簡単ですがサンプル 『table.css』 #roundcorner_box { width:35%; } #roundcorner_box span { background-color:lavender; height:1px; overflow:hidden; display:block;} .roundcorner_box5 { margin:0px 5px; } .roundcorner_box4 { margin:0px 4px; } .roundcorner_box3 { margin:0px 3px; } .roundcorner_box2 { margin:0px 2px; } .roundcorner_box1 { margin:0px 1px; } 『table2.css』 .roundcorner_box_content { border:2px solid lavender; height:500px; background-color:white; } 『html』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="./table.css" type="text/css"> <link rel="stylesheet" href="./table2.css" type="text/css"> </head> <body> <div id="roundcorner_box"> <span class="roundcorner_box5"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box2"></span> <span class="roundcorner_box1"></span> <div class="roundcorner_box_content"> ここに文字 </div> <span class="roundcorner_box1"></span> <span class="roundcorner_box2"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box5"></span> </div> </body> </html>

noname#57880
質問者

お礼

大変詳しい説明と解説ありがとうございました。 勉強になりました。

その他の回答 (1)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

http://okwave.jp/qa3315188.html まっとうなｃｓｓを学ばれるといいですよ。CSSの複数使用なんて基本中の基本です。 聞いておいて、利用しないなら、聞くな！！！！ HTMLが出来る人がする質問ではないです。

noname#57880
質問者

お礼

すいません＾＾ 勉強不足でした....

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSのMETA http-equiv・・・・

    <link rel="stylesheet" href="style.css" type="text/css"> と ところどころ<span>でCSSを利用していますが、 <META http-equiv="Content-Style-Type" content="text/css"> を書いたほうがいいのでしょうか。 もし、<span>を使用しなければ書かなくても良いものなのでしょうか。

    • ベストアンサー
    • HTML
  • CSSが適応されない

    ジオシティーズなどのHPにスタイルシートを適応させたいのですが、適応されず困ってます。 <meta http-equiv="content-style-type" content="text/css"> <link href="stylesheet.css" rel="stylesheet" type="text/css"> としてHPに記述してstylesheet.cssという外部ファイルを読み込ませたいのですが適応されません。 どうすればいいのでしょうか？ ご回答宜しく御願い致します。

  • ＣＳＳ今度は外部ファイル！

    前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名　hp-name.css ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • CSSについて初歩的ですがわかりません

    こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters &amp; Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません

  • ｃｓｓでtableをセンター表示

    現在dreamweaverを使用してホームページを作成中のHTML初心者です。 外部cssを使って、各ページをセンター表示させたいのですが、うまくできません。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>***</title> <link rel="stylesheet" href="common.css" type="text/css" > </head> <body> <div class="header"> このcss[header]でマージン指定をしたのですが、 テーブルは右側に寄ったままです。 どなたかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • 閲覧用CSSと印刷用CSSを分けることは可能ですか？

    現在、WEBページをtable無しのCSSで作成しています。 普通に閲覧する場合には問題ないのですが、 印刷しようとすると外部CSSで指定している画像が 印刷できないため、#fff部分が消えてしまいます。。 その為、media="screen"とmedia="print"で使い分けて 印刷時には#fffを#999などにしようと思ったのですが、 閲覧時にそれが反映されてしまって、黒い画像に#999文字になってしまい上手くいきません。 現在の記述は、 <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css media="print"> です。 色々サイトを見たところこの方法であってると思ってたのですが 何が間違っているのでしょうか？？ もしくは、他に印刷時も閲覧画面と同じように見せる方法があれば 教えてください。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 印刷曜CSSがどこかおかしい・・・非常に困っています。。。

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "ＭＳ Ｐゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか？

    • ベストアンサー
    • HTML
  • ＣＳＳについて

    前回「ＣＳＳ今度は外部ファイル！」で質問をさせていただきました http://okwave.jp/qa4254612.html ＃２の回答者様の記述ソースをコピペしてＣＳＳファイルと、ＨＴＭＬファイルを作ったところ、ＨＴＭＬファイルに外部ＣＳＳが反映されて表示されました。 しかし、このＣＳＳファイルの中身（だけ）とファイル名を変更したところ、今度は反映されなくなりました。 ■ＣＳＳファイルの変更■ 変更前 body { color: blue; font-size:30px; 変更後 .hpname{ font-size:50ox; color:#006666 text:align:center; } ■ＣＳＳファイル名 半角小文字でhpname.css ■ＨＴＭＬファイル 変更前 <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> 背景色は青で文字は30px </body> </html> この中の <link rel="stylesheet" type="text/css" href="test.css"> を変更。 href="test.css">を href="hpname.css"> にしました。 ///////////////////////////////////////////////////////////// ＣＳＳファイルの作りかたがいけないのでしょうか？ 「.」をつけてはいけない？ それとも外部ファイルを読み込むパスを絶対指定などしなくてはならないのでしょうか（同じフォルダ階層内です） 何回やり直しても結果が同じなので、また質問させていただきました。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する