文字の指定がソース冒頭に記載されるのを防ぎたいのですが・・



0   名前: スタイルシート初心者です。 : 2007/02/05(月) 19:44  ID:70j/MHZK sub-bK
このような外部cssを使ってサイトを作っています。
テーブルを使わずにcssで構成される2カラムです。

この下の#rightboxにあたる部分がメインの文章にあたるのですが、色々と色やサイズを変えてメリハリのある文にしていきたいのですが、文字の色、サイズを指定していくとhtml上に次々に新たにソースが追加されてしまいます・・・・
これを外部スタイルシートの中に記述して出来る限りサイトを軽くしていきたいのですがどうすればいいでしょうか?

セレクタタイプというあたりをいじればうまく指定できるのかなと思うのですが、いまいちやり方がわかりません。
どなたか初心者にわかりやすく説明して助けて頂ければ大変嬉しいです。
宜しくお願いします。


#header {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
border: 1px solid #000000;
height: auto;
}
#mainbox {
width: 750px;
margin-right: auto;
margin-left: auto;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #999999;
}
#leftbox {
width: 180px;
background-color: #E3FDF1;
padding: 5px;
font-size: 12px;
margin-left: 5px;
}
#rightbox {
font-size: 12px;
width: 515px;
background-color: #FFFFFF;
padding: 15px;
float: right;
margin-left: 0px;
}
#header p {
font-size: 12px;
line-height: 130%;
color: #666666;
}

#footer {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
font-size: 12px;
border: 1px solid #000000;
height: 80px;
text-align: center;
padding-top: 30px;
}


.sidemenu {
font-size: 12px;
line-height: 15px;
}

.catbox {
font-size: 12px;
border: 1px solid #FFCC00;
background-color: #CCCCCC;
padding: 10px;
width: 350px;
margin-right: auto;
margin-left: auto;
color: #000000;
}
.side_catbox {
background-color: #6699CC;
padding: 10px;
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
}



p {
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-align: left;
}



1   名前: K+S : 2007/02/05(月) 19:44  ID:nROqylMa sub-YS
> 文字の色、サイズを指定していくとhtml上に次々に新たにソースが追加されてしまいます・・・・

あなたが指定しているのではないのですか?
「追加されてしまいます」って何が追加するのでしょうか?

オーサリングソフト等を用いているのであれば、その旨を示してください。
また、より的確な回答を得たいのであれば、十分な(HTML)ソースを併せて示してください。

2   名前: スタイルシート初心者です。 : 2007/02/05(月) 19:44  ID:70j/MHZK sub-bK
お返事遅くなり申し訳ありません。

ドリームウィーバー8を使っています。

HTMLのソースはこちらです。

このrightboxの中がメインの文章になるのですが、現状スタイルシートで記述している

#rightbox {
font-size: 12px;
width: 515px;
background-color: #FFFFFF;
padding: 15px;
float: right;
margin-left: 0px;

により黒の12pxしか文字が出せません。
これに他の色、サイズなど織り交ぜてメリハリの文章を作るにはどのように指定すればよろしいでしょうか?

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>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title></title>
<meta name="Keywords" content="キーワード" />
<meta name="Description" content="" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>&nbsp;</h1>
</div>
<div id="mainbox">
<div id="rightbox">
<h2>&nbsp;</h2>
</div>
<div id="leftbox">
<h5>&nbsp;</h5>
</div>
<br style="clear:both;" />
</div>
<div id="footer">
<p>&nbsp;</p>
</div>
</body>
</html>

3   名前: 匿名 : 2007/02/05(月) 19:44  ID:qjeIgoBI sub-Cl
新規CSS生成のウィンドウ下部に「定義場所」というのがありますので、そちらで外部CSSを指定すれば外部のCSSに記述してくれますよ。
指定したCSSファイルがない場合は勝手に生成してくれますので、適当に「○○.css」と名前をつけて作成しましょう。
以降そのCSSファイルに作成するようにすれば、そちらに書き足していってくれます。

外部CSSに記述されているCSSを使用すると、HTMLに勝手に外部CSSの読み込みも記述してくれた・・・はず。
今までにHTML上に作成したCSSは、外部CSSに切り取り→貼り付けして、まとめてしまった方が手っ取り早くていいと思いますよ。

4   名前: Z ◆XTzyosZXcL : 2007/02/05(月) 19:44  ID:CSqyQR5N sub-Cl
>>2
>これに他の色、サイズなど織り交ぜてメリハリの文章を作る
「何のために?」と思うのですけれど・・・強調ならEM要素やSTRONG要素、定義語ならDFN要素、という風に「何を意味したいのか」で使う要素は変わってくると思います。

参考・個々の語句に対する要素の指定などの話:
http://www.kanzaki.com/docs/html/htminfo14.html

 CSS(カスケーティングスタイルシート)の仕様上での話であれば、属性セレクタや子孫セレクタ、IDセレクタなどを使うことによってかなり細かい条件分岐ができます。

参考・CSS2リファレンス「セレクタ」:
http://hp.vector.co.jp/authors/VA022006/css/selector.html

 ただ、実際にはUAの対応状況がまちまちで、仕様書どおりに書いてもUAによってはうまくいかないため、どの辺りで割り切るかが悩みどころかも(理想は多環境対応ですけど)(^^;

参考・CSS対応状況表:
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html

 なお、Dreamweaverなど市販アプリケーションではユーザー同士によるフォーラムなどもありますので、操作関係の話はそちらをご覧になるとよいのではないかと思います。

Dreamweaver サポートセンター:
http://www.adobe.com/jp/support/dreamweaver/

5   名前: JAB : 2007/02/05(月) 19:44  ID:VVFscBB9 sub-gm
たいていのHP作成ソフトには何かしろ、「〜が勝手に変更されてしまう」というデメリットがあります。
それが嫌ならそのファイル(ページ)にはテキストエディタを使って作ってしまうのが一番手っ取り早いと思います。

一覧へ戻る