DreamWeaverでのスタイルシート適用後のプレビューについて
- DreamWeaverでテーブルからCSSデザインに乗り換えようとしていますが、スタイルシートが適用されません。
- デザインビューではスタイルシートが適用されているのに、プレビューでは適用されません。
- 外部スタイルシートを適用し、HTMLでプレビューしているのにスタイルシートが反映されない原因は何でしょうか？
- ベストアンサー
DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 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=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが 適用されません。 デザインビューでは適用されているのですが、、、 何が原因なのでしょうか?
- typo1981
- お礼率57% (15/26)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />を <meta http-equiv="content-type" content="text/html; charset=UTF-8"> に変えてください。 xhtmlではjisは使えないと思います。
関連するQ&A
- スタイルシートでテーブル
とても基本的な事なのですが、 以下のコードを実行すると IE6 で見た時に セルの下に隙間が出来てしまいます。 Firefox 2.0 で確認した場合すっきり表示されてるのですが、 なにかアドバイスありますでしょうか？ ------------------------------------------------------------- <!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=shift_jis" /> <title>[ Picture ]</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #container { width: 750px; border: 1px solid #ccc; background: #fff; margin: 0 auto; } #section1 { text-align: center; background: blue; } #section2 { text-align: center; background: red; } --> </style> </head> <body> <div id="container"> <div id="section1"> <img src="images/picture01.jpg" /> </div> <div id="section2"> <img src="images/picture02.jpg" /> </div> </div> </body></html> -------------------------------------------------------------
- ベストアンサー
- CSS
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。 多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!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=shift_jis" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
- xhtmlのスタイルシートについて
<?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <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" /> <style type="text/css"> t { color : 407133; k { color : 337060; r { coior : 454580 > </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span> 文字色が変わりません。 どなたか指摘願います。
- ベストアンサー
- その他（インターネット・Webサービス）
- “タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」 よろしく、お願いします。 <!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 text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- iframeを使わずに上下50%ずつに分割したい
タイトルどおりですが・・・ frameやiframeを使わずに上下２分割させ、50%ずつ固定にしたいのですが、うまくいきません。 高さ100%は http://black-flag.net/css/20110621-3232.html で再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。 表現する方法はあるでしょうか。 <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS HEIGHT 100% SAMPLE</title> <meta http-equiv="content-style-type" content="text/css" /> <style type="text/css"> *{ margin: 0; padding: 0; } html,body { height: 100%; } body { font-size: 100%; line-height: 160%; font-family: Arial,Helvetica,sans-serif; color: #000; text-align: center; background: #cccccc; } #container { margin: 0 auto; width: 800px; height: 100%; min-height: 100%; text-align: left; background: #fff; } body > #container { height: auto; } .half{ margin:0 auto; min-height:50%; height:50%; width:800px; } #container > .half { height: auto; } </style> </head> <body> <div id="container"> <div class="half"> <div> 上のコンテンツ。固定にしたい </div> </div> <div class="half"> <div style="overflow:scroll"> 下のコンテンツ。スクロールさせたい </div> </div> </div><!--/#container--> </body> </html>
- ベストアンサー
- 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
- CSSの質問です。
親子枠の関係です。 親を縦横300px x 300pxと指定した場合、子に縦横300px x 300pxと指定すると親枠からはみ出るんでしょうか？ <!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"> <!-- #oya { background-color: #006666; height: 300px; width: 300px; } #kodomo { background-color: #006699; height: 300px; width: 300px; } --> </style> </head> <body> <div id="oya"> <div id="kodomo"> </div> </div> </body> </html> 経験者若しくはプロの方のアドバイスを願います。
- ベストアンサー
- HTML
- DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML
- DIV 右寄りにしたい
<!DOCTYPE html "-//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" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- div.右, div.左{ background-color: #ffff00; display:inline; border: 1px #BDBDBD solid; padding: 10px 6px; } div.右{ text-align:right; } --> </style> </head> <body> <div class="左"> 左 </div> <div class="右"> 右 </div> </body> </html> 上記のコードで、 一つのDIVは右寄り、もう一つは左寄りにしたいのですが 右寄りの仕方がわかりません。 どうやらdivはtext-align:right;では右に寄らないのですが どうすれば右に寄せられますか？ 右divも左divも同じ位置に左右に表示させたいです。
- ベストアンサー
- HTML
お礼
設定を変えたら表示されました。 大変お騒がせいたしました。 感謝しております。 ありがとうございました。
補足
ありがとうございます。 いまやってみたのですが変わりません。 このCSSだと灰色の線で囲まれるはずなのですが デザインビューでは表示されFIREFOXやsafariで プレビューしてみたのですがtest web siteと表示 されるだけです。 普通はローカルプレビューでも表示されますよね? たまにプレビューされないことがないあるよなこと どこかで拝見したのですが。 なるべくサーバーにアップロードしてプレビュー したほうがよいでしょうか?