- ベストアンサー
外部スタイルシートについて・・・
peronの回答
- peron
- ベストアンサー率45% (43/95)
ＣＳＳというフォルダに○○というＣＳＳがあるとします 本文の<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は拡張子です） Ｑ１ 代わりに<LINK REL=～ を書きます Ｑ２ コメントは書けます <!-- ＆ -->は必要ないです Ｑ３ ＮＮ３以下はＣＳＳに対応してません 又 ＩＥ３もです（ＣＳＳの意味が理解出来ないブラウザです） ですから、そのようなブラウザで見たらＣＳＳのない状態として表示されます と こんなところですが、ＣＳＳを読み込めないようにしている方とか、ＣＳＳの解釈の違うブラウザがありますので、本文では、最低限の情報が判り、ＣＳＳでデザインする（あまりシビアにしないで）という考え方でされた方が良いと思います
関連するQ&A
- ＩＥ７でスタイルシートの表示がうまくいかなくなった
これまで使っていたスタイルシートがＩＥ７ではＩＥ６までの時のように表示されなくなりました。 ＩＥ７環境でもＩＥ６環境と同じように表示させるには、スタイルシートをどのように直したらよいでしょう。 ■スタイルシートのソース <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> ■想定している表示（ＩＥ６で実現できている表示） <div class="blocka"> 以下を左側に６９％幅で表示 </div> <div class="blockb"> 以下を右側に表示 </div> <div class="blockc"> 以下をａ｜ｂの下に表示 </div> ａ（69%）｜ ｂ －－－－－－－－－－－ ｃ
- ベストアンサー
- CSS
- 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におけるフォントの大きさの制御と外部ファイルについて
現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常の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
- 外部ＣＳＳをかくには。
ＨＰのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部ＣＳＳでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <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
- スタイルシートでオンマウスで下線を表示させないには
以下のような外部スタイルシートを作ったのですがうまくいきません。 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"> <!-- 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
- CSS外部呼び出し
今ジオシティーズでスタイルシートの外部呼出しをやってみたんですが、 いくつか繁栄されないものがあるんですが、記述で間違っている所がありましたら直していただきたいのです。 A { text-decoration: none; } A:visited {text-decoration:none} A:link {text-decoration:none} A:hover {color:red; text-decoration:underline} P { font-size: 12pt; } Body,Td {line-height:15pt;} Body {scrollbar-arrow-color: #000000; scrollbar-face-color: #ffffff;scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-track-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #000000} これに更に A:link { color: blue; } A:visited { color: #8080FF; } A:hover { color: #FFFF00; } A:active { color: red; } を足したいのですが、可能でしょうか？
- ベストアンサー
- CSS
- スタイルシートでリンク色を
現在、以下のようなスタイルシートを外部スタイル シートにして使っています。 H1 {COLOR: SILVER;} TD {COLOR: INDIGO;} TBODY {FONT-SIZE: 12px; LINE-HEIGHT: 18px;} A {COLOR: #INDIGO; TEXT-DECORATION: none;} A:hover {COLOR: DEEPPINK; TEXT-DECORATION: underline;} A:active {COLOR: DEEPPINK; TEXT-DECORATION: underline;} この場合で、H1タグを使用したテキストにリンクを 貼ると4行目のスタイルが優先されてしまい、テキス ト色がINDIGOに変更されてしまいます。H1タグのテ キストは、リンクの有無にかかわらず、SILVERにし たいのですがスタイルシートを書き換えることで対応 できますでしょうか。 このスタイルシートを使用したHTMLファイルが既に かなりのページ数になっていますので個別にHTMLファ イルをいじるのは避けたいのです。どなたか解決法を ご教示くださいませ。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSS：スタイルシートでテキストリンク
教えてください！！ 外部ファイルのスタイルシート（ＣＳＳ）を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 ＩＥ6.0では問題なく起動していますが、ＮＳ7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか？ ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のＣＳＳの記述】 .menu { font-family: "ＭＳ Ｐゴシック", 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; }
- ベストアンサー
- その他（プログラミング・開発）
- 次のスタイルシートにおいて
<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
お礼
とても丁寧でわかりやすくお知らせをしていただき ありがとうございました。