- 締切済み
cssが反応しない
cssの一部が反応しません・・・。 具体的にはcssの#contents内のmargin：autoがp要素に反応しないんです・・・・。 ですので、ブラウザ表示した時にpのtext-align:leftだけ反応してしまい、 一部の文章だけ左詰めになってしまうのです。 初心者なのですが、一向にわからないのでどなたかにアドバイス頂けると幸いです。 よろしくお願い致します！ 以下、htmlとcssのコードです。 ------------------------------------------------------------------------------------------------- 【html】 ------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XTML 1.0 Transutional//EN" "http://www.w3.org/TR/xhtml1-transitonal.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <h1>Menu</h1> <h2>屋台のコース cucina volante</h2> <p>夕方、ひと仕事を終えた漁師たちが集まる所と 言えば屋台！</p> <h2>郷土料理のコース cucina locale</h2> <p>食いしん坊の国の人々に愛され、世代を超えて 伝承されるイタリアの郷土料理。</p> <h2>アラカルト Alla Carta</h2> <p>単品からのご注文も承ります。「きょうはパス タをたくさん食べたい！』</p> </div> </body> </html> ------------------------------------------------------------------------------------ 【css】 ------------------------------------------------------------------------------------ body{ text-align:center; color: #666666; } #contents{ margin;auto } h1{ font-size:36px color:#943434; font-family:georgia,"times new roman", times,serif; } h2{ font-size:18px; color:#ff9900; } p{ font-size:14px; text-align:left; } ----------------------------------------------------------------
- so050071
- お礼率50% (1/2)
- その他（ビジネス・キャリア）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- kosukejlampnet
- ベストアンサー率44% (126/282)
p{ font-size:14px; text-align:left; border: 1px solid #333; } にして、確認してみること。
- kosukejlampnet
- ベストアンサー率44% (126/282)
margin;auto 入力ミスに気づきませんか？ セミコロン→コロン
関連するQ&A
- css 各divの内容を上に揃えたいです。
こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"ＭＳ 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }
- ベストアンサー
- HTML
- css 初心者です。（壁紙について
外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか？お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //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" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ？画像欠けてない？</p> </body> </html> 以上をよろしくお願いします。
- ベストアンサー
- HTML
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- CSSが反映されない！ソース公開
なぜかCSSが表示されずに困っています。 解決方法をご指導願います。 CSS↓（ファイル名screen.css） * { margin: 0; padding: 0; list-style: none; text-decoration: none; } body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; } #container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; } h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; } h1 span.highlight { color: #efefef; } h1 span.small { font-size: 11px; color: #333; } h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; } INDEX.HTML↓（前半部分のみです） <!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="pl" lang="pl"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen"> </head> <body> はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。
- ベストアンサー
- HTML
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 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" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- xhtml,css cssの取り込み
xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!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" /> <title>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }
- 締切済み
- その他([技術者向] コンピューター)
- MacからアップしたCSSがWinで反映されな
こんにちは。現在、Macでホームページを作っています。 その際、CSSでレイアウトやフォント等を設定したのですが、アップロードしたCSSがWindowsでは反映されません。Macではすべてしっかり反映されています。 ブラウザごとの振り分け等、色々と調べて試しましたが変わりませんでした。 どこかおかしなところがあれば指摘、アドバイスの方よろしくお願い致します。 ↓<head></head>内 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>（タイトル）</title> <link rel="stylesheet" type="text/css" href="main.css"> ↓main.css * { margin: 0; padding: 0; } body,table,tr,td { font-size: 10px; font-family: "Times" ""Osaka"; line-height: 160%; text-align: left; } a:link {color: #000000; text-decoration: none; } a:visited {color: #000000; text-decoration: underline; } a:active {color: #000000; text-decoration: underline; } a:hover {color: #000000; text-decoration: none; } #layout { width: 650px; margin-top: 10px; margin-left : auto; margin-right : auto; text-align : center; } .header { margin: 5px 0px 3px; padding: 20px 10px; border: 1px solid #c0c0c0; background-image: url("（画像URL）") } #main { float: left; width: 436px; margin: 10px 14px 0px 0px; } .entry { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 30px; overflow: auto; } .entry_navi { text-align: left; } .entry_title { font-size: 13px; font-family: "Times"; border-bottom: 1px dashed #c0c0c0; color: #000000; } #side { float: right; width: 200px; margin: 10px 0px ; } .pict { margin: 15px 0px; padding: 8px; border: 1px solid #c0c0c0; } h1 { font-size: 20px; font-weight: bolder; font-family: "Times"; margin: 0px 0px 5px 0px; padding: 0px; color: #ffffff; } h1 a, h1 a:link, h1 a:visited, h1 a:active, h1 a:hover { color: #ffffff; text-decoration: none; } .description { font-size: 10px; color: #ffffff; padding-bottom: 30px; } .list { border: 1px solid #c0c0c0; margin: 0px 0px 14px 0px; padding: 10px 20px; } .list_title { font-family: "Times"; font-size: 16PX; font-weight: bolder; color: #000000; border-bottom: 1px dashed #C0C0C0; }
- ベストアンサー
- CSS
- CSSで背景画像をウインドウの中心（横方向）に配置する方法？
過去質問したのですが、解決していないのでまた質問させて頂きます。CSSでウインドウの大きさを変えても指定した背景やコンテンツがずっと中心にいさせる方法はありますか？Yahooのような縦長のページにしたいと思っています。いまの段階は760pxの幅でずっと左側にいるようになっています。中心に移動させたいです。以下に参考のためにソースをのせておきます。 --- css --- h1{ margin-top: 0px; margin-bottom: 10px; text-align:center; } p{ text-align:center; margin-top: 0px; margin-bottom: 10px; } body{ margin-top: 0px; } #maincontents{ width:70%; background-image:url(../img/sakanay.jpg); background-position: center; margin-right: auto; margin-left: auto; } --- html --- <body> <div id="maincontents"> <p align="left"><font size="-3">Team X</font></p><br> <h1><img src="img/ten02.jpg"></h1> <p><img src="img/2005g.jpg"></p> <hr> <a>Copyright(c)2006 TX All rights reserved.</a> <p> </p> <br> </div> </body>
- ベストアンサー
- HTML
- CSSファイルのコメント
CSSファイルにコメント（/*・・・・*/）を入れるとIEで表示されないことがあります。 ftpするとWEB上では表示されるようです。 ローカル環境だけで起こるようなのですが、このような現象後存知ですか？ たとえば、CSSの内容は /*ヘダー*/ h1,h2,h3,h4,h5,h6,ul,ol,dl,p { margin-top: 0px; margin-bottom: 0px; } /*内容*/ body { margin: 0px auto; width: 750px; font-size: 0.8em; color: #333333; line-height: 1.5em; 宜しくお願いします。
- ベストアンサー
- CSS
- Dreamweaver CSS
Dreamweaver 8をMac OS10.5で使用しているものです。 Dreamweaverで、htmlファイルを作成し、CSSを添付しています。 Dreamweaver上では、問題なくCSSが反映されていますが、SafariやFireFoxなどのブラウザでプレビューで見ると、一部しかCSSが反映されていません。 WEBで検索して、文字コードなどを変更してみたのですが、改善されません。 簡単なミスかも知れませんが、コードを記述しておくので、ご指摘いただけると幸いです。 ちなみに、症状としては、CSSで設定したheaderの背景色は、htmlでは反映されているのですが、h1の文字色の変更などは、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" /> <title>無題ドキュメント</title> <style type="text/css" media="all"> <!-- @import url("price.css"); --> </style> </head> <body> <div id=wrapper> <div id=header> <h1>ヘッダー</h1> </div> <div id=content>本文</div> </div> </body> </html> ━━htmlここまで━━━━━━━━━━━━━━━━━━━━━━ ━━CSSここから━━━━━━━━━━━━━━━━━━━━━━ @charset "UTF-8"; /* CSS Document */ #wrapper { width: 800px; margin-right: auto; margin-left: auto; } #header { background-color: #00FFCC; height: auto; width: auto; padding-top: 5px; padding-bottom: 5px; } h1 { font-size: 2em; color: #FFFFFF; } ━CSSここまで━━━━━━━━━━━━━━━━━━━━━━━
- 締切済み
- CSS
お礼
ミスタイプに気付く事が出来て良かったです！ ありがとうございます！ あれから検証したのですが、どうもmargin:～pxは反応するんですが、margin:autoが反応しないみたいなんです。
補足
ご回答ありがとうございます！！ ミスタイプかと思ってmargin;auto⇒margin:autoに直しましたが、やはりp要素が左詰めになってしまいます。何故でしょうか・・・・。