CSSが反映されない… 初心者です

このQ&Aのポイント
  • <html><head><title>タイトル</title><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><style type="text/css">フォントサイズ10pxの"book antique"というフォントが指定されたスタイルシートが反映されず、画面が真っ白になってしまいます。ブラウザをFirefoxやIEでも試しましたが、同じ結果です。他のサイトのCSSを試したところ問題なく反映されたので、自分の書き方に問題があるかもしれません。geocitiesを利用しています。
  • CSSが反映されず、画面が真っ白になる問題が発生しています。指定されたスタイルシートはフォントサイズ10pxの"book antique"を使用するものです。FirefoxやIEでも同じ結果で、他のサイトのCSSを試したところ反映されました。自分の書き方に問題があるのかもしれません。利用しているのはgeocitiesです。
  • 初心者ですが、CSSが反映されない問題に直面しています。指定されたスタイルシートはフォントサイズ10pxの"book antique"を使用するものです。FirefoxやIEでも同じ結果で、他のサイトのCSSを試したところ反映されました。自分の書き方に問題があるのかもしれません。利用しているのはgeocitiesです。
回答を見る
  • ベストアンサー

CSSが反映されない… 初心者です。

<html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- .f1{ font-family: "book antique"; font-size: 10px; } --> </head> <body> <span class="f1">本文</span> </body> </html> という簡単な指定をしてみたのですが、実際には何も書かれていない真っ白な画面になり、スタイルシートが反映されないです。 ブラウザが悪いのかと思いFirefoxとIEで試したのですが、やはり真っ白な画面になってしまいます…。 他のサイトのCSSを含んだソースをコピーして試したところ、問題なく反映できるのでブラウザのせいではないと思うのですが、自分で書いた書き方では反映されないので、やはり書き方に問題があるのでしょうか? geocitiesを利用しております。 よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • tabide
  • ベストアンサー率44% (148/331)
回答No.1

style の終了タグが抜けています。 --> と </head> の間に、</style> を挿入しましょう。

shitimi
質問者

お礼

回答ありがとうございます。 </style>を挿入したところ、無事表示できました! 勉強になります。 ありがとうございました。

関連するQ&A

  • CSSが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 CSSを勉強しているのですが、反映されません (本や、サイトのサンプルとおり記述しても、です) (タグ、スペルの間違いがないかは10回以上確かめています) (CSSサイトのサンプルをクリックすると、それは表示されます) ●ヘッダー内に指定すると、反映されない ○例  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント(色、サイズ)で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ (標準)になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●BODY内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○2回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○3回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • CSSが反映されないで困っています;;

    日本のホストの時は、CSSがHTMLにうまく反映されていたのですが、 ホストを海外の T35Hosting と Graffiti.net で同じ様に挑戦したら CSSが反映されませんでした;; index.htmlのヘッド内に下記を書いて、 top.cssの名前でCSSを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした;; 「/」(ルートディレクトリ)と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。

  • 印刷曜CSSがどこかおかしい・・・非常に困っています。。。

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "MS Pゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか?

    • ベストアンサー
    • HTML
  • cssが反映されません・・・

    HP初心者です。現在ホームページビルダーで編集してます。 もともとあるHPを引き継いで編集しているのですが、2カラムcssに挑戦しました。http://css.uka-p.com/index_2column.shtml やってみたのですが、反映されません。プレビューにするとエラー検出になり、強制的に<body>以下に位置づけられて、ただのテキストとしてHP上にずらずら文字が出てきてしまいます。左右も反映されてません。 ちなみに、こんな感じで書き込みました。 <head> <meta name="ROBOTS" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="style.css" type="text/css" /> body {text-align:center; } outline { width:600px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .contents{width:350px;float:left;} .menu{width:240px;float:right;} .c-both{clear:both;} </head> link以下のbodyからが私の書き込みです。 宜しくお願いします。

  • 【フォント】記述したCSSが反映されない

    ログを検索しましたが同様の質問は無いようなので投稿させて頂きます。 先日PCを買い替えましてXPからVistaへと移行しました。 しかし新しいPCで自分のサイトを見てみると、CSSでフォントをTahomaに指定していたページの文章が何故かゴシック体で表示されています。 (サイトは旧PCでビルダー7を利用して作成したものです) 古いPCからHTMLのデータを移動し早速ソースを確認、上書き保存等してみましたがフォントはゴシック体のまま。 明朝なども試しましたが反映されてくれません。 やはりOSやブラウザの変更が原因なのでしょうか。アドバイスをよろしくお願いします。 ↓HTMLソースの一部を掲載します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <meta name="robots" content="noindex,nofollow"> <STYLE type="text/css"> <!-- body { scrollbar-face-color: #000000; scrollbar-highlight-color: white; scrollbar-shadow-color: white; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: white; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration:none; } --> </style> <style type=text/css> <!-- body,td { margin-top : 50pt; margin-left : 90pt; margin-right : 90pt; margin-bottom : 40pt; font-size :15px; font-family :'Tahoma'; } --> </STYLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>(仮)</TITLE> </HEAD>

    • ベストアンサー
    • HTML
  • 子セレクタがIE8で反映されません。

    子セレクタがIE8で反映されません。 どうしてでしょうか?(firefoxだと反映される) コードは以下のとおりです。 <html> <head> <title>子セレクタ</title> <style type="text/css"> <!-- div > span { background-color:green; color:white; } --> </style> </head> <body> <div> <span>スタイル設定対象</span> <h1> <span>スタイル設定対象</span> </h1> </div> </body> </html> OSはVISTAです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS今度は外部ファイル!

    前回「CSSが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない!」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル) .body{ color:#006666; font-size:30px; } ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは30px・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> HP名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか? それとも、外部ファイルの書き方がいけないのでしょうか? 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • safariだけcssが反映されない

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css(以下)を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか?

    • ベストアンサー
    • HTML
  • 現在、携帯用のXHTMLとCSSを勉強中で、いろいろなサイトや本を見な

    現在、携帯用のXHTMLとCSSを勉強中で、いろいろなサイトや本を見ながら勉強しています。 一点教えていただきたいのですが --- <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=shift_jis" /> <meta name="keywords" content="検索キーワード"> <meta name="description" content="サイト紹介文"> <title>■■■</title> <style type="text/css"> .marquee{display:-wap-marquee; -wap-marquee-loop:infinite;} <![CDATA[ a:link{color:#750D0A;} a:visited{color:#750D0A;} a:link#menu{color:#FE9091;} a:visited#menu{color:#FE9091;} ]]> </style> </head> <body style="background-color:#F1EAD8; color:#000000;"> <span style="font-size:xx-small;"> --- いくつか見て、このような<head>の形が基本になっているようなのですが CSSにおいて <style type="text/css"> <![CDATA[ ]]> </style> の中に入るもの、入らないものはどう違うのでしょうか? <style></style> の中に <body style="background-color:#F1EAD8; color:#000000;"> <span style="font-size:xx-small;"> を入れてはいけないのでしょうか? わかりにくい質問ですみません。もしくは根本的に何か分かっていないのかもしれません… どうぞよろしくお願い致します

専門家に質問してみよう