こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

外部スタイルシートへの記入方法について

外部スタイルシートへの記入方法について


下記ボックスを利用したいのですが
外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。

どなたか詳しい方にご教授願えないでしょうか、

よろしくお願い致します。


<div class="box_01">

この中にタイトルを記載と

本文を記載する

</div>





<TABLE width="400"><TR><TD>
<DIV style="width : 400px">
<DIV style="border-width : 1px;border-color : #333333 ;border-style : solid">
<DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;">
<DIV style="background-color : #D0D0D0;padding : 1px">
<DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV>
<DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;">
<DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;">
<br><hr>
↓<BR>
↓<BR>
<center>
↓<BR>
↓<BR>
</center>
↓<BR>
↓<BR>
<hr>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</TD></TR></TABLE>



くれくれで恐縮ですがどうぞよろしくお願い致します。

投稿日時 - 2010-03-21 11:45:03

QNo.5768109

困ってます

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

1つのクラスには複数のスタイルを指定することは出来ません。

そのため、ネットで探してこられたサンプルのように、複数の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;
}

参考URL:http://css.eweb-design.com/0103_bsc.html

投稿日時 - 2010-05-13 18:09:28

お礼

ご回答ありがとうございました。

質問するのもなかなか難しいものだと思いましたが、意味を汲んでいただき当にこのようにできたらいいなと思いいろいろやってみましたができませんでした。

このようにシンプルにできるとDIVボックスのひとつひとつがよく理解できるようになりました。
このまま即外部ファイルとして使えますので助かります。

この見本は5重に線を重ねているためとても立体的に見えてぜひ色々使いたいと思っていたので
本当に嬉しいです。

半分諦めていましたので助かりました。ありがとうございました。

投稿日時 - 2010-05-14 00:14:57

このQ&Aは役に立ちましたか?

11人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

 聞きたいことが、上のシンプルな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>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
*****
&lt;link rel="stylesheet" type="text/css" href="./CSS/sample.css" &gt;
*****
&lt;/head&gt;</pre>
<h2>CSS</h2>
<pre>@charset "Shift_JIS";
html,body{
margin:0px;
padding:0px;
background-color:rgb(60,60,255);
}
body&gt;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&gt;div h1{
font-size:1.4em;margin:0.2em;text-align:center;
}
body&gt;div&gt;div{
border:inset 2px gray;background-color:white;
}
body&gt;div&gt;div p{
text-align:center;margin:0.2em 1em;
}
p.Question,p.message{
text-align:left;text-indent:1em;
}
body&gt;div&gt;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>

投稿日時 - 2010-03-21 16:18:46

お礼

高尚で私にはよく理解できませんでしたが
きっと模範的な素晴らしい回答をしていただいたように思います。

ネットで見つけて利用させて頂いてましたcssテーブルを何とか勉強がてら
簡単にできないか試行錯誤しましたがギブアップしてこちらでお聞きしようと
思い投稿させていただきました。

矢印等は本文を削除したため他のタグとともに残ってしまい
見て頂いた方に誤解を与えましたことも今後の反省とさせていただきます。

ご親切にありがとうございました。お礼申しあげます。

投稿日時 - 2010-03-24 00:21:31

ANo.2

もう一度、基本的なことをおさらいするといいですね。

よく見ると、Class名指定の構成です。でもHTMLオブジェクトにはそのクラス名が指定されていません。当然、反映されませんよね。

--------あなたの指定は全てクラス名指定ですね----------
.box{
}
.title{
}

------改変後--------
.box_01{
}
.title{
これは指定されているHTMLオブジェクトはありませんね
}

この指定方法は、CSSのバージョンによって拡張されています。ブラウザがどのバージョンに対応しているかで、動作が異なります。下記のサイトは割りと正確に記載されているので、参考にするといいでしょう。正確にはW3CのHPで確認を。

http://hp.vector.co.jp/authors/VA022006/css/selector.html

http://msdn.microsoft.com/en-us/library/aa358816(VS.85).aspx
(IE専用でもあるが、CSS3 バージョンがそれぞれに記載されている)

投稿日時 - 2010-03-21 14:18:32

補足

不慣れで誤記載(転載)ですみません。

**************
.box_01{
}
**************
は当然
**************
.box{
}
**************
の事だったのですが

<div class="box">
<div class="title"> </div>
</div>

よろしくお願い致します

投稿日時 - 2010-03-21 15:37:19

ANo.1

したいことがさっぱりわからないのですが・・・。
各要素にClass指定してそれぞれのStyleを定義するのじゃだめなんですか?

投稿日時 - 2010-03-21 12:34:16

補足

下記のようにしましたがうまく表示できませんでしたので
お聞きしたかったのですが・・・


.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;
}

投稿日時 - 2010-03-21 13:26:33

あなたにオススメの質問