• ベストアンサー
  • すぐに回答を!

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

  • 質問No.910115
  • 閲覧数141
  • ありがとう数5
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 66% (8/12)

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

今はHTMLのヘッダ内に書いております。
<style TYPE="text/css">
</style>
Q1,上の部分は外部スタイルシートにすると、いらないのでしょうか?

Q2,下の部分は外部スタイルシートにしてもスタイルシート内に、書く事ができますか?書くと不具合の原因になるのでしょうか?
<!--
//忘れてしまうので、ここにコメント書きたいです。
できれば、スタイルシートを表示できない?ブラウザの人へ配慮したいと思うので、
<!--
は、あった方が自分が忘れなくていいかと思うのですが・・・。

Q3,ブラウザによって変になる、例えばとっても古いバージョンのネスケなどでも表示できるといいのですが
下記で問題あるのでしょうか?

もし良かったら下の内容をこうした方がいいという
アドバイスがあると嬉しいです。

質問の仕方が良くないかもしれませんが教えて下さい(TT)

<style TYPE="text/css">
<!--
//忘れてしまうので、ここにコメント書きたいです。
a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;}
td {font-size: 11pt;}
span {font-size: 11pt;}
BODY {font-size: 11pt;
}
LI {font-size: 11pt;}
-->
</style>

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

  • 回答No.5
  • ベストアンサー

ベストアンサー率 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

その他の回答 (全4件)

  • 回答No.4

ベストアンサー率 45% (43/95)

#1です 補足させて頂きます
#3様のご指摘通り
H1 { margin: 0.5em } /* em */
という形でコメント出来ます
ただ、W3Cの勧告書では、CSS内で、解析出来ない行は、無視するという事でご質問の//を別にいいかな?と
(というか あくまで慣例であり、こうしなければならないという規定を勧告書はしていないので 実際スクリプトでは、//も使います)
それと 実験的に//コメントを実装してみましたが、何の問題も起きませんでしたので

混乱させて申し訳ございませんた
お礼コメント
lan_lan

お礼率 66% (8/12)

URL参考にさせていただこうと思い、今から少し
読んで勉強したいと思います。
丁寧にご指導いただきありがとうございます。

//コメントの件、お知らせをありがとうございます。
私もお手数かけてしまって質問の仕方も悪かったと思います。本当にありがとうございます。
実験的にコメントを実装までしてくださってありがとう!
投稿日時:2004/06/30 21:40
  • 回答No.3

ベストアンサー率 14% (1/7)

Q1.については、peronさんのおしゃるとおりでいいとおもいます。
Q2.についてですが、スタイルシート内でコメントは
/*コメント*/
のようにスラッシュ,アスタリスク,コメント,アスタリスク,スラッシュの順番に書きます。これは、複数行でも使えます。例えば次のように。
/*
コメント
コメント
コメント
*/
Q3.について、とっても古いブラウザーではスタイルシートそのものを認識しなかったり、怪しい動作をするものがあります。lan_lanさんの示されたソースでは、問題ないかと。直したほうがいいのは、フォントサイズを11ptに固定していることですね。これだと見る側でフォントサイズを調整できないので、ちょっと困ります。mediumかsmallをお勧めします。

もし、これからもサイト制作をしていくのであれば手前味噌で申し訳ないですが、サイト制作に役立つリンクを集めたブックマークもありますのでご利用ください。http://www.seirei.ath.cx/zan/useful_link/
補足コメント
lan_lan

お礼率 66% (8/12)

とても適切なアドバイスをいただけありがとうございました。

mediumかsmallをお勧めくださったので、私も見る側で
フォントサイズ調整ができないより、調整できる方がいいのかな?とも思い同感です。

mediumかsmallについて調べてみようかと思います。
URLもお知らせありがとうございました。
とても適切なアドバイスでした。本当にありがとうございました。
投稿日時:2004/06/30 21:42
お礼コメント
lan_lan

お礼率 66% (8/12)

すいません。お礼を書こうと思ったら、間違えて
補足で書いてしまいました。大変失礼してしまい申し訳ないです。すいません(TT)
投稿日時:2004/06/30 21:45
  • 回答No.2

ベストアンサー率 50% (50/100)

補足します。

CSSのコメントアウトは<!-- -->ではなく
/* */で挟みます。

例:
/* コメントアウト*/

htmlのhead内にCSSを書いてしまうと外部CSSよりhead内のCSSを優先して表示します。
お礼コメント
lan_lan

お礼率 66% (8/12)

教えてくださってありがとうございます。
/**/これで囲む事を知らなかったので大変勉強になりました。
ありがとうございました。
投稿日時:2004/06/30 21:41
  • 回答No.1

ベストアンサー率 45% (43/95)

CSSというフォルダに○○というCSSがあるとします

本文の<HEAD>に下記のように書きます

<LINK REL=STYLESHEET HREF="css/○○.css" TYPE="text/css">

メモ帳なんかで
//忘れてしまうので、ここにコメント書きたいです。
a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;}
a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;}
td {font-size: 11pt;}
span {font-size: 11pt;}
BODY {font-size: 11pt;
}
LI {font-size: 11pt;}
と書き ○○.cssとして保存します(CSSは拡張子です)

Q1 代わりに<LINK REL=~ を書きます

Q2 コメントは書けます <!-- & -->は必要ないです

Q3 NN3以下はCSSに対応してません 又 IE3もです(CSSの意味が理解出来ないブラウザです)
ですから、そのようなブラウザで見たらCSSのない状態として表示されます

と こんなところですが、CSSを読み込めないようにしている方とか、CSSの解釈の違うブラウザがありますので、本文では、最低限の情報が判り、CSSでデザインする(あまりシビアにしないで)という考え方でされた方が良いと思います
お礼コメント
lan_lan

お礼率 66% (8/12)

とても丁寧でわかりやすくお知らせをしていただき
ありがとうございました。
投稿日時:2004/06/30 21:38
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

ピックアップ

ページ先頭へ