- ベストアンサー
ｃｓｓの、一つ目の記述がHTML側に反映されません。
スタイルシートの超初心者です。 <style type="text/css"> body {background-color:#87cefa;} h1 {background-color:#ffddaa;} と記述すると、bodyの記述がHTMLの表示に反映されず、順番を入れ替えても、一つ目になった記述が反映されません。 <style type="text/css"> } body {background-color:#87cefa;} h1 {background-color:#ffddaa;} 試しに、上の様に「}」を挟んだら反映されたのですが、こんなのをダミーで入れているのは、とっても納得が行きません。どなたか、原因を教えて頂けないでしょうか？
- prussianblue
- お礼率85% (46/54)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
cssは別ファイルでもっているんですよね？ cssを反映させるHTMLファイルには ---------------------------------- <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="css置いてあるディレクトリとファイル名.css"> ---------------------------------- cssファイルには、 ---------------------------------- body {background-color:#87cefa;} h1 {background-color:#ffddaa;} ---------------------------------- と、<style type="text/css">を記述する必要はありませんよ。
その他の回答 (2)
- koutarou504
- ベストアンサー率44% (182/407)
推測するにその（ダミーを入れた）あたりに ゴミが入っているのではないでしょうか。 とにかく一つ目といわれる記述の前に不適切な何かがあり それが一つ目の記述を適切に１つの塊（または開始）と認めていないのでしょう。 尚、ゴミとは目に見えるとは限りませんので・・・。 どうしてもダミーでの回避しか実現できなかった場合は、 body {background-color:#87cefa;} body {background-color:#87cefa;} と繰り返し２つ以上書くとか body {color:#000000;} body {background-color:#87cefa;} h1 {background-color:#ffddaa;} と無効になってもよさそうな記述をとりあえず書いておくとか・・・。 一応 <style type="text/css"> \ body {background-color:#87cefa;} h1 {background-color:#ffddaa;} と「\」を明確にゴミとして記述する事でも再現しました。 とりあえずその空白の１行が気になる処です・・・。
お礼
有難う御座います。独立ファイルとしてのcssと明記し忘れた為に、ご迷惑をおかけ致しました。
補足
早々のご回答有難う御座います。見えないゴミ説を元に、一から新しいファイルを作って記述し直して見たのですが、やはり、同じ状況でした。書き忘れてしまいましたが、別ファイルとしてcssファイルを作っています。サーバに置かずローカルで確認している状態ですが、自宅・職場、どちらのＰＣにおいても状況が変わらず、ダミーの記号を入れると作用することから、htmlファイル側の記述ミス、ＰＣのブラウザ側の設定、どちらの可能性も低そうなのですが・・・。
こんばんは。cssを使うとデザインの自由度が増しますね。 ご質問者さんの例文をコピペして下のように不足のタグを加えてみましたが、特に問題はなくボディの空色もh1の肌色も背景色は表示されたようですが・・・？どうなんでしょう。 <HTML><HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- body { background-color:#87cefa;} h1 { background-color:#ffddaa;} --> </STYLE></HEAD> <BODY> <H1>あ</H1> </BODY></HTML>
お礼
有難う御座います。独立ファイルとしてのcssと明記し忘れた為に、ご迷惑をおかけ致しました。
補足
早々のご回答有難う御座います。一から新しいファイルを作って記述し直して見たのですが、やはり、同じ状況でした。書き忘れてしまいましたが、別ファイルとしてcssファイルを作っています。エディタにはノートパッドを使っているのですが・・・。ちなみに<STYLE type="text/css"> を削除して、 body { background-color:#87cefa;} h1 { background-color:#ffddaa;} だけにしたら、ＯＫだったのですが、やはり本来の記述ルールとしては、 <STYLE type="text/css"> を付けるのですよね・・・？
関連するQ&A
- ＣＳＳが反映されません
勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 ＣＳＳを勉強しているのですが、反映されません （本や、サイトのサンプルとおり記述しても、です） （タグ、スペルの間違いがないかは１０回以上確かめています） （ＣＳＳサイトのサンプルをクリックすると、それは表示されます） ●ヘッダー内に指定すると、反映されない ○例 <!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番号 などしてみても、黒のまま 文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ （標準）になる ○<!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> ・・・結果・・・ ブラウザになにも表示されない ●ＢＯＤＹ内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○２回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○３回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・
- ベストアンサー
- その他（インターネット・Webサービス）
- 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
- CSSでの記述についてです。
CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 １、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 ２、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 ３、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。（それを保ちたいのです） ４、しかしひとつ階層が上の（フォルダ外）のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- ＜間隔がきちんとある方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="torikago1.html">戻る</a> <a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- ＜間隔が狭くなる方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート＞文書フォルダ となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか？ 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部CSSの一部が反映されません。
ホームページビルダーとメモ帳でサイトを作っています。 外部スタイルシートを指定したのですが、一部分だけ反映されません。 反映されないのは下二行のテーブルへのclass指定です。 CSSは以下になります。 * { margin : 0 ; padding : 0 ; } body{ width :100% ;} body,table {font:normal 13px;} table {margin : 0 ; padding : 0 ;} #my_body { margin: 0 auto; width : 700px ; } #my_navigation { float : left ; width : 150px;} #my_contents { float : left ; width : 550px ;} #my_header { width : 100% ; height : 97px;} #my_footer { width : 100% ; clear : both;} /*リンク*/ A:HOVER{color : #006500;text-decoration : none;} A{color : #00a600;text-decoration : none;} /*指定テーブル内*/ table.a01{width:150;background-color:#cccccc;} html内には <TABLE class="a01"> のように記述しています。 試しにCSSの下一行以外の全ての記述を削除してみても反映されません。 tableでなく、tdで指定してみても反映されません。 ビルダーのページ指定画面では反映されるのですが、プレビュー画面や アップロード後のIE7やFierfoxで見ると反映されていません。 同じ記述をhtml内に<style type="text/css">で指定すると反映されます。 CSSに詳しい方いらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 【フォント】記述した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
- スタイルシートの記述について
例えば、文字を黒く、背景色を白くしたい場合ですが、どちらの記述が正しいですか？ (1)は兄が教えてくれたタグの書き方で、(2)はネットで見かけたタグ（CSSについて説明していたサイト）の書き方です。 カッコの違いが気になっています。 ネット検索をしたところ、(2)の形で書かれているほうが多かったです。 今は『<!-->』は、もう古かったりなどして使わない形なのでしょうか。 それとも(2)の『{}』のみの形はCSSとして使う場合なのでしょうか。 (1) <style type="text/css"> <!--P{color:#000000;}--> <!--BODY{background-color:#ffffff;} </style"> (2) <style type="text/css"> p{color: #000000;} body{background-color:#ffffff;} </style">
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
- スタイルシートが反映されません。
本の通り、スタイルシートを記述しましたがIE5.5では背景が反映されず NN4.75ではHTMLの内容までも消えて、何も表示されません。 htmlファイルのすぐ上のimagesフォルダにbggreen.jpgを入れてあり、 ディレクトリは間違いないと思うのですが、何がおかしいのかわかりません。 よろしくお願い致します。 <TYPE="text/css"> <!-- body { background-image: url('images/bggreen.jpg'); background-repeat: repeat-y } --></STYLE>
- ベストアンサー
- HTML
- Ultimate CSSのhtml側の記述について
いつもお世話になっております。 当方、htmlとcssについてはごく初心者。 主なツールはSeamonkeyとalphaEDITとcssはTeraPadを使っております。 さて、質問ですが、初歩的なものかもしれませんが、 webで検索しても出てこなかったので質問させて頂きます。 Ultimate CSS Gradient Generatorという自動cssソース作成サイトで、 cssの記述は掲載されているのですが、html側の記述が掲載されていません。 初歩的すぎな事なので記載されていないだけなのかもしれませんが, html側には何と指定してやったら良いのでしょうか？ 因みに、cssは「style.css」としております。 html側のソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="./style.css" rel="stylesheet" type="text/css"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>index</title> </head> <body> </body> </html> としております。 どなたか、親切な方、ご指導、解説のほどを宜しくお願い致します。
- ベストアンサー
- CSS
- cssがhtmlに反映しません
.style01 { font-size: 120%; color: red; font-weight: bold; } .style02 { color: blue; font-weight: bold; } .style03 { background-color:yellow; text-decoration: underline; } .style01.style02は反映しますが、 .style03 の{ background-color:yellow; text-decoration: underline; } background-color:yellow;の部分が全く反映しません。 なぜでしょう。
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
有難う御座います。納得です。書店で購入した書籍で、独立ファイルにしたcssの記述例にも先頭に<style type="text/css">が記述してあったのですが、きっと私が解釈を誤ったのですね。