直接書き込むCSSを外部ファイルに設定したい

締切済

質問者：jack_ss
質問日時：2011/07/17 20:26
回答数：4件

CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。
タグに直接書き込むタイプのCSSが多いのですが、
このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？

【外部に設定したい項目】
★タイトル下線のMARGIN-RIGHT: 47%
★真ん中の線(画像位置)BACKGROUND-POSITION: 53%
★一番下線のMARGIN-LEFT: 53%;

外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って
いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<)

【全タグ】
<html>
<HEAD>
<TITLE>TITLE</TITLE>
</HEAD>
タイトル
<H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1>
<DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y">

<DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%">
<P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV>
<DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px">
<DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px">

<H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000">
<font color="#ffffff">コンテンツ</font></H2></font>
<div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div>
<div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div>
<div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div>
</DIV></DIV>

<DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid">
<P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px"
align=right></DIV></DIV>
<P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right>

</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2011/07/18 22:37

＞ソースは同じで外部ファイルだけパソコン用と携帯用、それぞれ読み込む形にしたいのですが、

それはすでに何度も・・
/* 固定(永続的)スタイルシートすべてのUA,代替スタイルシートに適用 */
<link rel="styleSheet" type="text/css" href="./styleSheet/default.css">

/* screenUA(いわゆるPC用やi-phone,i-padのブラウザ) */
<link rel="styleSheet" type="text/css" media="screen" href="./styleSheet/screen.css">

/* 携帯電話など固定フォント,PDA用スタイルシート */
<link rel="styleSheet" type="text/css" media="tty,handheld" href="./styleSheet/tty.css">

<HEAD>内に書くときも
<style type="text/css" media="screen">

</style>
<style type="text/css" media="tty">

</style>

外部スタイルシートに
@media{}を使って書く方法もありますが、対応機種が少ないかも -->

14.2.4 出力メディア型 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
7.2 媒体依存型のスタイルシートを指定する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

- 0
- 件

通報する

この回答へのお礼

私の返答がわかりにくかったかもしれません。すみませんでした。
パソコン用と携帯用、それぞれ外部ファイルを読み込む方法はわかっていたのですが、
ソースに直接書き込むタイプのCSSを外部に移す具体的な記述がわからなかったのです。
先ほど、idの使い方を検索していて、何とか解決できました。
（以前は失敗したのですが、記述の順序が間違っていたのか今回は出来ました）
またわからない点があったら投稿させて頂きますが、一旦質問を締め切ります。
CSSは本当初心者で、もっと勉強しなければ…と思いました。
ご回答本当にありがとうございましたm(_ _)m

通報する

お礼日時：2011/07/18 23:40

No.3

回答者： ORUKA1951
回答日時：2011/07/18 18:36

＞外部CSSに対応していない機種は、HEAD内に書き込むCSSにも対応していない事が多いので、

＞デザインは「外部CSS対応している機種だけ」に反映出来れば良いと思っています。
は、言い変えると
「スタイルシートを認識しないユーザーエージェントには、HTMLの属性で指定する。」
「スタイルシートに対応しているユーザーエージェントは外部スタイルシートを読み込ませる」
と言うことでよいですか？

　ドコモの古いiモードでは、原則style要素にしか対応していないため、もしそれらを対象にstyle要素で指定してしまうと、今度は詳細度の関係で外部スタイルシート、HEAD内のスタイル要素でも上書きできなくなります。!!
★カスケーディング
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
* {}　　　　　　 /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {}　　　　　　/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} 　　　　/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {}　　　/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {}　/* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {}　/* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {}　　　　 /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""　　　　 /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 ★*/
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html#specificity )］より

そのため、style属性ではなくHTMLの属性を使うことになりますが、今度は機能が極めて限定的なものになります。
そこで、通常はHTMLはスタイルシートに対応していない端末に対してはデザインも凝りません。凝るべきではないです。
それよりもWeb標準に従った正しいHTMLを書いておくべきです。
・ナビゲーションリストはナビゲーションリストとして
具体的には

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
<meta name="author" content="ORUKA">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:ORUKA1951@hoge.com" title="send a mail" >
<link rel="styleSheet" type="text/css" href="./styleSheet/default.css">
<link rel="styleSheet" type="text/css" media="screen" href="./styleSheet/screen.css">
<link rel="styleSheet" type="text/css" media="tty,handheld" href="./styleSheet/tty.css">
<link rel="START" href="./index.html">
<link rel="NEXT" href="./page1.html">
</head>
<body align="center">
<div class="nav">
<h1 width="200">コンテンツ</h1>
<ol>
<li><a href="./book">小説</a></li>
<li><a href="./book2">小説2</a></li>
<li><a href="./other">その他</a></li>
</ol>
</div>
</body>
</html>

のように、きちんと正統な方法でマークアップして、外部スタイルシートで分けます。
これは、Transitionalですから、HTMLの属性を使って可能な範囲でデザインすると良いでしょう。

この回答への補足

ありがとうございます(^^)

>「スタイルシートを認識しないユーザーエージェントには、HTMLの属性で指定する。」
>「スタイルシートに対応しているユーザーエージェントは外部スタイルシートを読み込ませる」
>と言うことでよいですか？

いえ、CSS対応している機種と、していない機種を分けて対応しなくて構いません。
非CSS対応機種で見た場合、対応していない要素は無視されてとてもシンプルなデザインに
見えてしまいますが、それはそれで良いかなと思います。

ソースは同じで外部ファイルだけパソコン用と携帯用、それぞれ読み込む形にしたいのですが、
ソースの【外部に設定したい項目】を外部ファイル・HTML内に記述するには
具体的にどういう書き方をしたら良いでしょうか？
（「id」や「class」を使うのだと思いますが、詳しい書き方がわからないのです(;_;)

補足日時：2011/07/18 19:43

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/07/17 23:02

大事なこと忘れてた。

HTMLの属性としてかかれたデザインは、CSS2.1では詳細度0,0,0,0ですから、全称セレクタ以外なら上書きされます。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2011/07/17 22:59

携帯電話には外部スタイルシートを読めないものも結構あるので、それを考えると最もよいのは、HTMLにはスタイルシート以外の方法で記述して、順次<HEAD>内、外部と書き重ねていく方法です。

HTML内のエレメントのstyle属性に書いてしまうと、詳細度がa=1になってしまうため、どのように外部に記述しても上書きがされません。
6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )

<p class="important"><font color="red">ここは赤字</font></p>
<HEAD>ないに
<style type="text/css" media="tty">

</style>
<style type="text/css" media="screen">

</style>
<link rel="../CSS/screen.css" media="screen">
とか、この場合、linkで呼び出されるスタイルシートは登場した順番で、詳細度の計算が高ければ、<style></style>内の記述を上書きできます。
6.4.1 Cascading order ( http://www.w3.org/TR/CSS2/cascade.html#cascading … )
　すみません、CSS2.1が現在のスタイルシートの標準なのですが、CSS2.1の邦訳は知らないのです。CSS2は、( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )にあるのですが、このカスケーディングの説明は2から2.1になったとき、少々変わったので原文を見てください。翻訳サイトで翻訳できる程度の説明なのでCSS2の説明と合わせて読めば何とかなるでしょう。

この回答への補足

ご回答いただきありがとうございます！
外部CSSに対応していない機種は、HEAD内に書き込むCSSにも対応していない事が多いので、
デザインは「外部CSS対応している機種だけ」に反映出来れば良いと思っています。

ちょっと私には難しそうですが、なんとか出来そうでしょうか？

【外部に設定したい項目】
★タイトル下線のMARGIN-RIGHT: 47%
<DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%">

★真ん中の線(画像位置)BACKGROUND-POSITION: 53%
<DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y">

★一番下線のMARGIN-LEFT: 53%;
<DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid">

を外部に記述・style属性なしでHTML内に記述するにはどうしたら良いのでしょうか？