HTML5の外部スタイルシートで文字化け

2023/09/05 12:50

このQ&Aのポイント

HTML5の外部スタイルシートを使用してh1の文章にCSSを適用させたところ、文字化けが発生します。
htmlの宣言文が間違っているまたは<h1>要素の配置が間違っている可能性があります。
CSS3を使用する場合、HTMLの宣言文に指定する必要があるかもしれません。

ベストアンサー

html5の外部スタイルシートで文字化け

2013/10/29 10:51

いつもお世話になっております。当方、htmlとcssについてはごく初心者。主なツールはSeamonkeyとalphaEDITとcssはTeraPadを使っております。ｈｔｍｌに外部cssを適用させてh1の文章にcssを適用させたのですが、何故だか文字化けが出ます。ソースを書いておきます。 html側　index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css.css"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>index</title> </head> <body> <h1 class="headding01">見出しタイトル1 title</h1> <br> </body> </html> css側　css.css .headding01 { margin:0 0 30px 0; padding:12px 10px; border-left:5px solid #1871B8; background: #1D8ADE; color:#FFF; } です。 http://blog.3streamer.net/html5-css3/css3-styling-231/ ここのサイトをコピペしただけなのですが文字化けします。私が考えた理由は htmlの宣言文が間違っている htmlの<h1>要素の置き場所が間違っている。これくらいでしょうか。それとcss3はhtmlの宣言文にしなければならないと言うような事が書いてあったのですがそうしなければならないのかな？と思ったりするのですがどうなのでしょうか？それはともかく、まずは、この文字化けの原因は何なんでしょうか？親切な方、ご指摘、ご解説の程を宜しくお願い致します。

RIOT1970
お礼率44% (87/195)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

play_with_you
ベストアンサー率37% (112/301)

2013/10/29 11:51 回答No.1

「何が」文字化けしたのかがどこにも書いてないんですが、とりあえずhtmlとcssはちゃんとUTF-8で保存されてますか？文字化けって言ったら大抵保存する文字コードの間違いなんですが、まあそれもどこにも記載されてないので確認です。

質問者

お礼 2013/10/29 18:06

もう一回、今度は、メモ帳にペースト、そのソースをコピー、UTF-8で保存したらローカルでも上手くいきました。なんだったんだろう。スペルミスだろうか？？でもなぜサーバにアップしたソースは文字化けしなかったんだろう。ともあれ、解決しました。有難うございました。

質問者

補足 2013/10/29 12:38

あ。UTF-8、これは知らなかったです。ありがとうございます。で、とりあえず、UTF-8で保存して http://xampp.utun.net/ にアップしてみたんですが、ご覧のとおり文字化けしてないんですね、不思議です。ローカルだとUTF-8で保存しても文字化けするのはなぜなんでしょうね？

関連するQ&A

外部スタイルシートが読み込めない
こんにちは。外部スタイルシートが読み込めず困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。もちろん同じディレクトリであり何度も確認しています。ブラウザは、IE7です。ヘッダー部分にスタイルシートを書くと当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。何が悪いのか、全くわかりません。何か分かる人がいましたら、よろしくお願いします。
- ベストアンサー
- HTML
スタイルシートで指定した大きさにならない・・・
スタイルシートにチャレンジしているのですが、文字の大きさが指定したとおりになりません。以下のようにした場合、ＢＯＤＹの文字を１２ＰＸにしているのですが、１４ＰＸの文字の方が大きく見えてしまいます。 ---------------------------------------------- <HTML> <HEAD> <TITLE>CCS勉強</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY><SPAN class="16">16pxの文字</SPAN> <BR> <SPAN class="14">14pxの文字</SPAN><BR> <SPAN class="10">10pxの文字</SPAN> <P>ＢＯＤＹのもじ12px</P> </BODY> </HTML> ---------------------------------------------- 初心者なのでどこが間違っているのかよく分からず困っていますので、ご存知の方がおられましたらよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
スタイルシートでの文字サイズ指定について
ホームページの文字表示サイズについての質問です。私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを <Font Size="サイズ"> で指定するやり方では、ＭＡＣで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まずs.cssに、 BODY { font-size: 13px } と書き、index.htmlに <head> <style Type="text/css">  </style> <link href="s.css" rel="stylesheet" type="text/css"> </head> と打ち込んでみました。しかし、こうするとMacX10.5では文字化けを起こしてしまいました。 <link href="s.css" rel="stylesheet" type="text/css"> を挿入するやり方がどこかおかしいのでしょうか。または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。
- 締切済み
- HTML
スタイルシートを取り込みたい
CSSファイルを作成して、それをHTML内に取り込みたいのですが、うまくいきません。ベクターにある「ABStyle」なるソフトを使用して、CSSファイルを作成しました。（ファイル名は「sf01」スタイル名も「sf01」です）これを新規のHTMLに取り込むようにしたいのですが、いろいろなHPを見てやってみるのですが、なにかがおかしいらしく、ちっとも読み込んでいないようです。新規のHTMLの <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>無題標準ページ</title> </head> <body bgcolor="#FFFFFF"> </body> </html> ここの、どこに、どうやって、すればいいのかお教えください。。。。新規HTMLは「safety」というファイルにありまして、CSSファイルも同じフォルダーに入っております。 CSSの場所を指定すればいいと思うのですが、具体的な記述方法をお教えいただければ幸いです。（すみません、超初心者です）当方W98,FPEは2.0です。宜しくお願い申し上げます。
- ベストアンサー
- CSS
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> と書きプレビューしてみたのですがスタイルシートが適用されません。デザインビューでは適用されているのですが、、、何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
文字化けについて
<?php //文字化け $a = "あいうえお"; ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF8"> <title><?php echo $a;?></title> </head> </html> ========================================================== 宣言以前のマルチバイトに対する対策はどのようにしたら良いでしょうか？
- 締切済み
- PHP
MacIEだけに読込ませる外部スタイルシート
Band Pass Filterとやらを使って、MacIEだけに読込ませる外部スタイルシートを実現したいのですがうまくいきません。どこのが悪いのでしょうか。下記の記述が間違っていなければ、IE6やFirefoxでは文字は赤に、MacIE5.xでは文字は黒になるはずなんですが…　ご教授ください。【html】 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <p>あいうえお</p> </body> </html> 【main.css】 p{color:#FF0000;} /*\*//*/@import ("ie5mac.css");/**/ 【ie5mac.css】 p{color:#000000;}
- ベストアンサー
- HTML
検索結果が文字化けしてしまう。
数週間前にアップロードしたサイトを検索にかけると文字化けして出てきてしまいます。アップした当初は問題なかったのですが…三日前から文字化けすようなってしまいました。文字コードがおかしいのか思ったんですが…原因がわからなくて困っています。どなたか教えてください！！下記がソースです↓ <!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 name="generator" content="Adobe GoLive 4"> <meta name="description" content="○○○○"> <meta name="keywords" content="○○○○"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>○○○○</title>   <style type="text/css"> <!-- #index-01 { position: absolute; top: 0px; left: 0px; width: 333px; height: 95px; visibility: visible }--- このあとも続きますが、問題解決に必要であればまた載せます。よろしくお願いします。
- ベストアンサー
- HTML
ファイヤーフォックスでの文字化け
<?xml version="1.0" encoding="utf-8"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> </head>までの部分をコピーペーストしてみましたが、昨日、<body>～<body>部分で更新をしようと思い、予定情報の終了した分の文字を削除して、ローカルで確認したところ、そのページすべてが文字化けしていました。アップロードしても文字化けはなおりませんでした。因みに文字コードはUTF-8に設定して（いるつもり?）作成しており、これまでＩＥもグーグルクロームもファイヤーフォックスもしばらく使ってそのようなことはありませんでしたので、何が原因なのかわかりません。（現在、ファイヤーフォックスです。）詳しい方教えて下さい！！
- ベストアンサー
- HTML
なぜ文字がでかくなってしまうのでしょうか？
http://masaboo.cside.com/new_css1/cs_11.htmを見てるのですが ************************************** <HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <H1>レベル1の見出しは赤色です。</H1> <P>段落は、緑色です。</P> </BODY> </HTML> ************************************** のサンプルの意味がよくわからないのですが、なぜ、 H1 { color:red; } を宣言するだけで、文字がでかくなってしまうのでしょうか？フォントサイズに関する記述がないのに、赤文字が大きくなる理由を教えてください。
- ベストアンサー
- HTML