外部スタイルシートについて・・・

外部スタイルシートを書きたいのですが、 まだ良くわかってない点があるので教えてくださると嬉しいんですが・・・(TT) ...

elttac さんからの 回答

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

  • 2004/06/30 19:40
  • 回答No.5
  • ベストアンサー
elttac

ベストアンサー率 70% (592/839)

 順にお答えします。

Q1
 スタイルシートのファイルをほかに用意した場合,お示しになったコードですと,

a:link, a:visited {font-size: 11pt; text-decoration: none; color:#C7A17E;}
a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;}
a:active {font-size: 11pt; text-decoration: none; color:#C7A17E;}
td {font-size: 11pt;}
span {font-size: 11pt;}
body {font-size: 11pt;}
li {font-size: 11pt;}

(少し手を入れさせていただきました)のみを記述したファイルを保存してください(拡張子は,一般に「.css」とします)。
 それで,取り込み方法は 2 つあります。ひとつは link 要素を使用する方法,もうひとつは @import を使用する方法です。
 link 要素は,head 要素内に

<link rel="stylesheet" type="text/css" href="***.css">

となります。この場合,style 要素は使用しません。
 @import を使用する場合は,style 要素を使用し,

<style type="text/css">
@import url(***.css);
</style>

とします。同じものと思ってくださってよいでしょう。

Q2
 コメントは,スタイルシート内の語を分断しない限り,自由に用いて構いません。形式は,「/*」ではじまり,「*/」で終わります。

Q3
 お示しになった程度のものでしたら,CSS の実装に問題がある Internet Explorer 3,Netscape 4 でも,少なくとも出力が乱れることはありません。もっと複雑なスタイルシートを書くようになると,この問題に頭を悩ませることになるでしょう。

 それから蛇足ですが,a:*** は,a:link,a:visited→a:hover→a:active の順で指定してください。思いどおりに解釈されないことがあります。
 また,フォントサイズを 11 ポイントで決め打ちしていますが,これは必ずしも好ましいこととは言えません。読者に快適な閲覧環境を与えることも,ページ作成者が考慮すべき問題であると考えます。

 最後に,CSS について学習できるサイトをご紹介します。ご健闘をお祈りします。
お礼コメント
lan_lan

お礼率 66% (8/12)

提案と含めとてもわかりやすく回答いただき
初心者の私でもとても嬉しい回答でした。
ありがとうございました。
投稿日時:2004/06/30 21:45
この回答にこう思った!同じようなことあった!感想や体験を書こう!
この回答にはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
  • CGIの外部スタイルシート CGI

    お世話になっております。 CGIをIFRAMEの中にいれたところ、外部スタイルシートが反映されなくなってしまいました。 色々と書き換えて試してみましたが、反応がありません。 どのような記述を入れれば、反応するようになるのでしょうか。 index(ここにIFRAMEがあります。)  | cgi-binの中にcgiとフォルダー(style.cssが入ってます。) CGIのスタイルシートの指定は下記のようになってます。 print "<title>$title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"$base/style.css\"></head>\n"; スタイルシートは a { text-decoration:none; } a:hover {color:#ff0000} body,table { font-size: 10pt; } 漠然とした質問の方法ですみません。 宜しくお願いします。...

  • 外部CSSをかくには。 HTML

    HPのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部CSSでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY {  letter-spacing:7px;  line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。...

  • スタイルシートでオンマウスで下線を表示させないには CSS

    以下のような外部スタイルシートを作ったのですがうまくいきません。 p.menu a{ font-size: 12px; } p.menu a:link{ text-decoration:none } p.menu a:visited{ text-decoration:none; } p.menu a:hover{ text-decoration:none; } p.menu a:active{ text-decoration:none; } noline a{ text-decoration:none; } 以下はHTMLの抜粋です。 <noline> <TR> <TD>●<a href="http://www.hogehoge.net/" style="text-decoration:none" target="_blank"><font color="black" onMouseover="this.color='#ff8800'" onMouseout="this.color='black'">ああああ</font></a></TD> </TR> </noline> 結局外部スタイルシートを使わずにWEBPAGEを作成しましたがとても手間がかかりました。今後のために原因を知っておきたいので宜しくお願いします。...

  • スタイルシート2 その他(プログラミング・開発)

    1.スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか? <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ!! といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような(くどい^^)気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ 2.さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル(省略できない)。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか^^ リンクできるのは、見やすく便利ですが・・・...

  • CSSで、外部スタイルシートを2つ指定した場合。 HTML

    たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように2つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。...

ページ先頭へ