- ベストアンサー
外部スタイルシートへの記入方法について
- 外部スタイルシートへの記入方法について知りたいです。
- 外部ファイルにまとめて記載する方法を教えてください。
- タイトルや本文を指定した外部スタイルシートに記載する方法を教えてください。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
１つのクラスには複数のスタイルを指定することは出来ません。 そのため、ネットで探してこられたサンプルのように、複数のdivタグで箱を作ってデザインする必要があります。 書き方は他にもありますが、例として下記のような形になります。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- .wrap{ width:400px; border:1px solid #333; } .wrap2{ padding:1px; background:#D0D0D0; border:1px solid; border-color:#FFFFFF #999999 #999999 #FFFFFF; } .wrap_title{ padding:3 3 4 3px; text-align:center; } .wrap_contents{ border:1px solid; border-color:#999999 #FFFFFF #FFFFFF #999999; } .wrap_contents_bg{ padding:10px; background:#FFF; border:1px #333333 solid; } --> </style> </head> <body> <div class="wrap"> <div class="wrap2"> <div class="wrap_title">- タイトル -</div> <div class="wrap_contents"> <div class="wrap_contents_bg"> ここに本文を入力します。<br /> サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。 </div> </div> </div> </div> </body> </html> 上記サンプルはCSSをHTMLのheadに直接書き込んでいますが、この設定を外部ファイルとして読み込む場合は、下記の部分のスタイル設定をCSSファイルにして、HTMLのheadにCSSファイルを読み込むタグを挿入します。 .wrap{ width:400px; border:1px solid #333; } .wrap2{ padding:1px; background:#D0D0D0; border:1px solid; border-color:#FFFFFF #999999 #999999 #FFFFFF; } .wrap_title{ padding:3 3 4 3px; text-align:center; } .wrap_contents{ border:1px solid; border-color:#999999 #FFFFFF #FFFFFF #999999; } .wrap_contents_bg{ padding:10px; background:#FFF; border:1px #333333 solid; }
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
聞きたいことが、上のシンプルなHTMLと、下の悲惨なHTMLとがつながらなくて、分からなかったのですが、下のtableを表示させて意味がわかりました。 それにしても下のTABLEでマークアップしたHTMLは酷いですね。 このコメントの最後にHTMLの全ソースを書いておきます。CSSもその中にあります。 ★HTML自体は、シンプルにして、classやidは使っていません。 ★CSSは基本的にタイプセレクタや子孫セレクタ、子供セレクタ、隣接セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#type-selectors )をつかっています。 私は、後での修正等が面倒になるので、idやclassセレクタは、必要ない限り使いません。 その分、一般/初心者向けの解説とは違う。 ★CSSはHTMLを置いた同じディレクトリにCSSホルダを作成して、そこにsample.cssという名前で保存すること ★文字コードは、すべてShift_JISで統一すること ☆HTMLはAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ☆CSSはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証してあります。必ずチェックする癖をつけましょう。 下記は、下の<TABLE>についてのコメントです。 CSSの基本は、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より HTMLで文書を正しくマークアップした上で、プレゼンテーション(表現)をスタイルシートに任せようというのは、 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) のためなのです。 示されたHTMLは、 ×デザイン・配置のために表を使用している。 →http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ×余白の制御のために<br.>を連続させている。 →http://openlab.ring.gr.jp/k16/htmllint/explain.html#continuous-brs ×<center>のような非推奨要素を使っている →http://openlab.ring.gr.jp/k16/htmllint/explain.html#deprecated-tag →http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER 以下は、HTML全ソース（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 http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <link rel="stylesheet" type="text/css" href="./CSS/sample.css" > </head> <body> <div> <h1>外部スタイルシートへの記入方法について</h1> <div> <p class="Question">下記ボックスを利用したいのですが、外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。</p> <p>どなたか詳しい方にご教授願えないでしょうか、</p> <p class="message">よろしくお願い致します。</p> <h2>HTML</h2> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ***** <link rel="stylesheet" type="text/css" href="./CSS/sample.css" > ***** </head></pre> <h2>CSS</h2> <pre>@charset "Shift_JIS"; html,body{ margin:0px; padding:0px; background-color:rgb(60,60,255); } body>div{ width:60%; min-width:500px; max-width:800px; margin-left:auto; margin-right:auto; margin-top:20px; background-color:rgb(200,200,200); border:outset 2px gray; } body>div h1{ font-size:1.4em;margin:0.2em;text-align:center; } body>div>div{ border:inset 2px gray;background-color:white; } body>div>div p{ text-align:center;margin:0.2em 1em; } p.Question,p.message{ text-align:left;text-indent:1em; } body>div>div pre{ margin:0.5em 1em; padding: 0.5em 1em; border-style:inset; border-width:2px 4px 4px 3px; border-color:green; line-height:1.3em; color:white; background-color:rgb(0,60,10); } /* ./CSS/sample.css */</pre> </div> </div> </body> </html>
お礼
高尚で私にはよく理解できませんでしたが きっと模範的な素晴らしい回答をしていただいたように思います。 ネットで見つけて利用させて頂いてましたcssテーブルを何とか勉強がてら 簡単にできないか試行錯誤しましたがギブアップしてこちらでお聞きしようと 思い投稿させていただきました。 矢印等は本文を削除したため他のタグとともに残ってしまい 見て頂いた方に誤解を与えましたことも今後の反省とさせていただきます。 ご親切にありがとうございました。お礼申しあげます。
- 0909union
- ベストアンサー率39% (325/818)
もう一度、基本的なことをおさらいするといいですね。 よく見ると、Class名指定の構成です。でもＨＴＭＬオブジェクトにはそのクラス名が指定されていません。当然、反映されませんよね。 --------あなたの指定は全てクラス名指定ですね---------- .box{ } .title{ } ------改変後-------- .box_01{ } .title{ これは指定されているＨＴＭＬオブジェクトはありませんね } この指定方法は、ＣＳＳのバージョンによって拡張されています。ブラウザがどのバージョンに対応しているかで、動作が異なります。下記のサイトは割りと正確に記載されているので、参考にするといいでしょう。正確にはＷ３ＣのＨＰで確認を。 http://hp.vector.co.jp/authors/VA022006/css/selector.html http://msdn.microsoft.com/en-us/library/aa358816(VS.85).aspx （ＩＥ専用でもあるが、CSS3 バージョンがそれぞれに記載されている）
補足
不慣れで誤記載（転載）ですみません。 ************** .box_01{ } ************** は当然 ************** .box{ } ************** の事だったのですが <div class="box"> <div class="title"> </div> </div> よろしくお願い致します
- neko-ten
- ベストアンサー率55% (1287/2335)
したいことがさっぱりわからないのですが・・・。 各要素にClass指定してそれぞれのStyleを定義するのじゃだめなんですか？
補足
下記のようにしましたがうまく表示できませんでしたので お聞きしたかったのですが・・・ .box{ width : 400px; border-width : 1px;border-color : #333333 ;border-style : solid; border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid; background-color : #D0D0D0;padding : 1px; border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid; border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px; } .title{ padding : 3 3 4 3px;text-align : center; }
お礼
ご回答ありがとうございました。 質問するのもなかなか難しいものだと思いましたが、意味を汲んでいただき当にこのようにできたらいいなと思いいろいろやってみましたができませんでした。 このようにシンプルにできるとDIVボックスのひとつひとつがよく理解できるようになりました。 このまま即外部ファイルとして使えますので助かります。 この見本は５重に線を重ねているためとても立体的に見えてぜひ色々使いたいと思っていたので 本当に嬉しいです。 半分諦めていましたので助かりました。ありがとうございました。