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

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

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

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数153
  • ありがとう数5

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

  • ベストアンサー
  • 回答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 について学習できるサイトをご紹介します。ご健闘をお祈りします。

参考URL:
http://www.tg.rim.or.jp/~hexane/ach/

共感・感謝の気持ちを伝えよう!

質問者からのお礼

提案と含めとてもわかりやすく回答いただき 初心者の私でもとても嬉しい回答でした。 ありがとうございました。

関連するQ&A

  • 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; } 漠然とした質問の方法ですみません。 宜しくお願いします。

    • 締切済み
    • CGI
  • 外部CSSをかくには。

    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> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML
  • cssにおけるフォントの大きさの制御と外部ファイルについて

    現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと(特にお年寄りには)見づらいページになってしまうような感があります。 そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。 <style type="text/css"> <!-- a:link {font-size: 10pt; text-decoration:none; color:#000000; } a:visited {font-size: 10pt; text-decoration:none; color:#000000; } a:active {font-size: 10pt; text-decoration:none; color:#000000; } a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; } --> </style> しかし、全く見られないなど(おそらくブラウザのバージョンにも依存するのだと思いますが)の意見もあり、困っています。 個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。 そこでご存じの方に教えていただきたいのですが (1)あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか? (2)cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?) お手数おかけしますがよろしくお願いいたします。

    • ベストアンサー
    • HTML

その他の回答 (4)

  • 回答No.4
  • peron
  • ベストアンサー率45% (43/95)

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

参考URL:
http://www.toyfish.net/docs/css-mobile/

共感・感謝の気持ちを伝えよう!

質問者からのお礼

URL参考にさせていただこうと思い、今から少し 読んで勉強したいと思います。 丁寧にご指導いただきありがとうございます。 //コメントの件、お知らせをありがとうございます。 私もお手数かけてしまって質問の仕方も悪かったと思います。本当にありがとうございます。 実験的にコメントを実装までしてくださってありがとう!

  • 回答No.3

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

すいません。お礼を書こうと思ったら、間違えて 補足で書いてしまいました。大変失礼してしまい申し訳ないです。すいません(TT)

質問者からの補足

とても適切なアドバイスをいただけありがとうございました。 mediumかsmallをお勧めくださったので、私も見る側で フォントサイズ調整ができないより、調整できる方がいいのかな?とも思い同感です。 mediumかsmallについて調べてみようかと思います。 URLもお知らせありがとうございました。 とても適切なアドバイスでした。本当にありがとうございました。

  • 回答No.2

補足します。 CSSのコメントアウトは<!-- -->ではなく /* */で挟みます。 例: /* コメントアウト*/ htmlのhead内にCSSを書いてしまうと外部CSSよりhead内のCSSを優先して表示します。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

教えてくださってありがとうございます。 /**/これで囲む事を知らなかったので大変勉強になりました。 ありがとうございました。

  • 回答No.1
  • peron
  • ベストアンサー率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でデザインする(あまりシビアにしないで)という考え方でされた方が良いと思います

共感・感謝の気持ちを伝えよう!

質問者からのお礼

とても丁寧でわかりやすくお知らせをしていただき ありがとうございました。

関連するQ&A

  • スタイルシートについて教えてください。

    <style type="text/css"> <!-- .copy { font-size: 10pt} .privacy { font-size: 7pt} .news_midashi { font-size: 10pt; color: #333333} .news_honbun { font-size: 10pt} --> </style> という形で指定しています。IEで見たときは特に問題ないのですが、 Netscape6.0で見た場合、スタイルシートで決めたはずのテキストの 大きさが変更できるようになってしまいます。 この場合、どういった形で指定すればよいのでしょうか。 教えてください。

    • ベストアンサー
    • HTML
  • 外部CSSの読み込みがうまくできない

    <head>~ <link href="basic.css" rel="stylesheet" type="text/css"> ~</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか? それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

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

    以下のような外部スタイルシートを作ったのですがうまくいきません。 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を作成しましたがとても手間がかかりました。今後のために原因を知っておきたいので宜しくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシート

    スタイルシートで、<style type="text/css"> で始まりますが、フォントなどの色を変える時に span style="font-size:20pt">大きなフォント</span> のように、後の="text/css"はつけなくてもよいのでしょうか?

  • スタイルシートの使い方

    職場のイントラネット内のページ全部を明朝体印刷に統一したいのですがスタイルシートで可能でしょうか。 全パソコンIE.5.0使用。 下記のように外部ファイルを使用して、 <link rel="stylesheet" href="style.css" src="style.css" type="text/css"> 下記で明朝を指定しているつもりなのですがうまくいかないようです。 BODY{background:white; margin-left:3mm; margin-right:3mm; margin-top:3mm; font-size:30pt; font-family:MS明朝体; line-height:120%; text-decoration:none; color:black;}

  • cssの外部ファイルでのリンクの装飾

    学校の課題で今HPを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもHEAD内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか? つまり↑の内容(リンクの装飾)を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

    • ベストアンサー
    • HTML
  • 次のスタイルシートにおいて

    <style type="text/css"> <!-- a:link { color:#333333;text-decoration:none; } a:visited { color:#333333;text-decoration:none; } a:active { color:#ff0000;text-decoration:none; } a:hover { color:#ff0000;text-decoration:none; } --> </style> a:linkなどがA:linkになっているものを見かけますがaを小文字で書くよりも大文字で書くほうが望ましいのでしょうか? 特にxhtml1.1の観点から教えてください

    • ベストアンサー
    • Flash
  • CSSの記述

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • IE7でスタイルシートの表示がうまくいかなくなった

    これまで使っていたスタイルシートがIE7ではIE6までの時のように表示されなくなりました。 IE7環境でもIE6環境と同じように表示させるには、スタイルシートをどのように直したらよいでしょう。 ■スタイルシートのソース <style type="text/css"> p {font-size=12pt;Letter-spacing:0.3pt;line-height:15pt;} a:link {color:blue;text-decoration:none;} a:active {color:blue;text-decoration:none;} a:visited {color:lightseagreen;text-decoration:none;} a:hover{text-decoration:none;background:brown;color:white} <!-- body{ scrollbar-shadow-color:blue; scrollbar-face-color:antiquewhite; scrollbar-Highlight-Color:cornflowerblue; scrollbar-arrow-color:dodgerblue; } --> div.blocka { float: left; width: 69%; } div.blockc { clear: both; } </style> ■想定している表示(IE6で実現できている表示) <div class="blocka"> 以下を左側に69%幅で表示 </div> <div class="blockb"> 以下を右側に表示 </div> <div class="blockc"> 以下をa|bの下に表示 </div>  a(69%)| b  -----------      c

    • ベストアンサー
    • CSS