背景色が反映されない問題について
- 背景色を指定したにも関わらず反映されない問題について解決方法を探っています。
- HTML <body>間で背景色のみを表示する方法を知りたいです。
- CSSを外部ファイルに記述しているにもかかわらず、背景色がうまく表示されない問題に困っています。
- ベストアンサー
背景色を指定したのに反映されません。
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
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 sample.cssのファイルの中身が記載の通りでしたら間違いです。 .cssファイルにはスタイル定義のみ書きます。<style>タグはいりません。 div.color1 { width: 100%; height: 150px; color: black; background-color: blue; }
関連するQ&A
- PHPファイル内でCSSが反映されない
php5&MySQL5&XPでプログラム作成中です。 phpファイル内のhtmlの中に簡単なスタイルシートを埋め込んでいるのですが、 スタイルシートの部分が反映されません。 ご教授いただけると幸いです。 --haikei.css p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} --login.php <?php --phpのプログラム ?> <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>
- ベストアンサー
- PHP
- スタイルシートの指定に関して
<body>タグにクラスを与えて、以下のようにしました。 <body class="home blog"> 一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。 2つのファイル home.html と index.html ファイルを作成しました。 html の記述は全て同じとします。参照する CSS ファイルを同一とします。 上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として home.html には、class="home" のみを反映し、 index.html には、class="blog" のみを反映させたい。 以下にサンプルを表記します。 html ファイル home.html / index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テストページ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="home blog"> <div id="container"> <p>テストページ</p> </div> </body> </html> css ファイルは home.html / index.html で共通 @charset "UTF-8"; body { margin: 0; padding: 0; text-align: center; background-color: #FFF; } .home #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FFE; } .blog #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FEE; } 上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。 <body class="home blog"> の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。 自分のスキルでは無理だと思うのですが・・・。 CSS の記述でデザインを別けることが出来るのでしょうか。
- ベストアンサー
- 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番号 などしてみても、黒のまま 文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ （標準）になる ○<!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サービス）
- 指定した背景画像をサイトを訪れるたびに切り替える
Javascript初心者で、全く見当がつきません。 お力をお貸しください。 参考サイトのように、 Bodyではなく、DivのID一部分のみ、 背景画像がサイトを訪れるたびに切り替わるようにしたいのですが， どのサンプルも「Body」の背景が変わってしまいます。 どなたか、お答えして頂けないでしょうか？ <参考サイト> http://www.upenn.edu/ <現在記述中のソース> <html> <head> <style type="text/css"> #content { color: #ffe700; font-size: 30px; height: 600px; } </style> <title>見る度に背景色が変わります</title> <script language="JavaScript"> <!-- function color(){ bgcolor = "#"; for(i = 0 ; i < 6 ; i++) { //0から15の乱数を発生させる color = Math.floor(16 * Math.random()); //16進数に変換 color = color.toString(16); //つなぎ合わせる bgcolor = bgcolor + color; } //文字列を背景色に document.bgColor = bgcolor; } //--> </script> </head> <body onLoad="color()"> 見る度に背景色が変わります<br> <div id="content"> ここの背景にランダムに画像が変更して欲しい。Bodyではなく、Divの指定したID内にのみ表示して欲しいのです</div> </body> </html>
- ベストアンサー
- JavaScript
- ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません
外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin: 0px auto; }
- 締切済み
- CSS
- CSSの背景を半透明
http://www.tacky.cc/program/htm_tips/html/style01a.htmのサイトからサンプル抽出して、色々手を加えていますが、 よく分からなくなってしまいました。そこで質問ですが、下記のプログラムでわからない事があります イメージとしては、アップルの場所は忘れましたが、透明の画像が、3.4重に重なっている感じにしたいと思っています。 <HTML><HEAD> <STYLE TYPE="text/css"> <!-- DIV.sample01 { background-color:#000000; position:relative; top:-70px; right:-00px; height:20px; width:1100px; filter:Alpha(opacity=50); z-index:0; color:#000000; font-size:x-small; padding:3px;} } DIV.sample02 { background-color:#ffffff; position:relative; top:-1100px; right:-100px; height:-100px; width:250px; filter:Alpha(opacity=60); z-index:2; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここから黒の色--> DIV.sample03 { background-color:#2E2921; position:relative; top:-500px; right:-100px; height:300px; width:500px; filter:Alpha(opacity=60); z-index:3; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここまで黒の色--> DIV.sample04 { background-color:#F7CE71; position:relative; top:3000px; right:-10px; height:180px; width:200px; filter:Alpha(opacity=40); z-index:1; color:#000000; font-size:x-small; padding:3px;} } --> --> </STYLE></HEAD> <BODY> <BASEFONT SIZE="2"> <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> </BODY></HTML> このようなプログラムにしましたが、何も表示されなくなってしまいました。 原因はpositionの指定が悪いと思います（pxを変更後おかしくなりました）で、「top:*px;」「right:*px;」 「height:*px;」「width:*px;」の意味がわかりません。高さや長さというのはわかりますが、 それから、「DIV.sample*」の中に「background-color:#F7CE71;」があるのに、さらに「color:#000000;」の二つある 意味がわかりません。サンプルをコピーして、手を加えたので、理解していない部分があるので、参考になる アドバイスお願いします。
- ベストアンサー
- HTML
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- tableのheight指定が効かない
tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 /*----外部CSS----*/ .sample{ color: #ffffff; background-color: #000000; height: 500px; width : 90%; overflow:scroll； } /*----ソース-----*/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html 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" type="text/css" hrefstyle.css"></head> <body> <table class="sample"><tbody><tr> <td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr> <td class="a0"></td><td class="a0"> <div class="text">本文（heightが700pxくらいの内容）</div> </td><td class="a0"></td></tr><tr> <td class="a3"></td><td class="a0"></td><td class="a4"></td> </tr></tbody></table> ※tdのclassはテーブルのふちに用いてる画像を指定してあります。 </body> </html> 解決方法をご存知の方、よろしくお願いします。
- ベストアンサー
- HTML
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
- 背景色を入れたいのですがよろしくお願いいたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
お礼
おお!できました。 ありがとうございます。 でも、他の<div class>で指定したものについては表示されるんですよね・・・。 超がつくほどの初心者なので、 また質問したら回答お願いします。