CSSファイルを指定したら元のHTMLファイルが破損してしまった!初心者が失敗してしまった理由とは?

このQ&Aのポイント
  • 初めてCSSを使うものです。いままでは、ワードとかからHTML出力していましたが、今回初めてコンポーザーでHTMLでシンプルに作っていました。CSSをまともに作り始めたのは初めてです。で、HTMLからCSSを指定すると元ファイルが壊れました。どこが悪いのでしょう。すみませんがアドバイスお願いします。
  • CSSファイルを指定したらHTMLファイルが壊れてしまう問題に遭遇しました。初心者の私は、今までワードからHTMLを出力していたのですが、今回はコンポーザーでシンプルなHTMLを作成しました。CSSを使うのも初めてだったため、どこが原因なのか分かりません。アドバイスをお願いします。
  • 初めてCSSを利用したところ、HTMLファイルが壊れてしまいました。これまではワードからHTMLを作成していたのですが、今回はコンポーザーを使用してシンプルなHTMLファイルを作成しました。CSSを正しく作成するのは初めてだったので、どこが間違っているのかわかりません。アドバイスをお願いします。
回答を見る
  • ベストアンサー

CSSファイルを指定したら元のHTMLファイルが

破損してしまったようです。 初めてCSSを使うものです。 いままでは、ワードとかからHTML出力していましたが、今回初めて コンポーザーでHTMLでシンプルに作っていました。 CSSをまともに作り始めたのは初めてです。 で、HTMLからCSSを指定すると元ファイルが壊れました。 どこが悪いのでしょう。すみませんがアドバイスお願いします。 壊れたHTMLファイル !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="keywords" content="LM386,繝溘ル繧「繝ウ繝・繝「繝九ち繝シ繧「繝ウ繝・髮サ蟄仙キ・菴・繝繧、繧ス繝シ縺ョ繧ア繝シ繧ケ"> <meta name="description" content="繝繧、繧ス繝シ縺ョ繧ア繝シ繧ケ繧剃スソ縺」縺溘Α繝九い繝ウ繝・&gt; &lt;link rel=" stylesheet="" href="../style.css"> <title>繧キ繝ウ繝励ΝLM386繝「繝九ち繝シ繧「繝ウ繝励・陬ス菴・/title&gt;</title> </head> <body> <h1>繧キ繝ウ繝励ΝLM386繝「繝九ち繝シ繧「繝ウ繝励・陬ス菴・/h1&gt; </h1> <h2>髮サ蟄仙キ・菴懊・雜・ョ夂分LM・難シ假シ悶い繝ウ繝励r陬ス菴懊>縺溘@縺セ縺励◆縲・/h2&gt; </h2> <h2>邁。蜊倥↑繧「繝ウ繝励r陬ス菴懊@縺ヲ縺ソ繧医≧縲・/h2&gt; </h2> <h2>讎りヲ・/h2&gt; <p>縺セ縺壹∬」ス菴懊・繝昴Μ繧キ繝シ縲・ 菴ソ逕ィIC縺ッ繧ゅ■繧阪sLM・難シ假シ悶・br&gt; 邁。蜊倥↑繝「繝九ち繝シ繧「繝ウ繝励→縺励※菴ソ縺・◆縺・・br&gt; 繧イ繧、繝ウ縺ッ螟ァ縺阪¥縺励◆縺・・br&gt; 以下略

  • denza
  • お礼率80% (647/806)
  • CSS
  • 回答数5
  • ありがとう数4

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

  • ベストアンサー
回答No.5

 私も HTML と CSS を勉強中で、昔おなじことに相当悩みました(^_^)  最近は《UTF-8》が一般的なそうなので、まずは   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> を   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> に直します。  そのうえで、《UTF-8N》という文字コードに対応したエディタを使います。つまり、《content="text/html; charset=UTF-8" /》で作成したウェブページを、《UTF-8N》形式で保存するのです。『メモ帳』は、こうした細かい設定ができないために文字化けするそうで、私も失敗しています。  なお、そのときは下記の過去質問とエディタが役に立ちました。このエディタは、《タグ入力補完機能》があるので便利ですよ。   ◆shift_jisとutf-8 | その他([技術者向] コンピューター)のQ&A【OKWave】    http://okwave.jp/qa/q3178822.html   ◆HeTeMuLu Creator - Hosiken Labs    http://hosiken.jp/dev/hetecre/

denza
質問者

お礼

なんだかわからないけれど、 CSSもしくはHTMLどちらかにSHIFT_JISが書かれていて、一度適用すると文字化けが直らないです。 おっしゃるとおりUTF-8でHTMLを指定したら回復しました。 (CSSもUTF-8にしました) なんだこれ。ですが、とりあえず作業先に進めそうです。ありがとうございます。

その他の回答 (4)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.4

>>UTF-8の文書であるのに 恐れ入ります、どこからUTF-8ってわかるのでしょうか? イトヘンの文字化けはUTF-8をS-jisで見るときに起こる文字化けの特徴ですので、そうじゃないかと。 理由などを説明すると長くなるのですが、charsetでよく起こる文字化けは変化と文字化けでググれば簡単に情報が得られますよ。ちょっとだけ捜したのですが一覧としては見つけられませんでした。 https://twitter.com/hadsn/status/299246035547586560 他にも?だらけとか%、菱形……とそれぞれに特徴があるので、興味があればググってください。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

CSSには関係ありません。 保存した文字コードと開くときの文字コードが違うだけです。 具体的には、UTF-8で保存して、Shift_JISで開くとそうなります。 任意の文字コードで保存、開くができるテキストエディタ(EmEditror http://jp.emeditor.com/ )などでお試しを!!

denza
質問者

お礼

>具体的には、UTF-8で保存して、Shift_JISで開くとそうなります。 参考になりました。 コンポーザーで試してみて、 2つ目のツールとしてEmEditror使ってみます。 もうひとつシンプルなエディター欲しかったので。 回答どうもです。

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

UTF-8の文書であるのに、Shift_JISであるとメタタグで記入している事による文字化けだと思います。 ★shift_jisで保存するか ☆<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> を <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> に直す。 どちらかの☆で解決すると思います。

denza
質問者

お礼

ありがとうございます。 >UTF-8の文書であるのに 恐れ入ります、どこからUTF-8ってわかるのでしょうか? ★shift_jisで保存するか ちなみにこちらで保存すると文字が化けたまま保存されてしまいます。(メモ帳で開いても) 大変参考になりましたが、さらに疑問が出てしまいました。 よかったらよろしくご指導のほど。

  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

疑問におもうのは、 ・なぜ文字化けしてるのでしょうか。 ・「壊れる」とは一般的ではない言葉ですが、具体的にどういうことを指しているのでしょうか。 の2点です。 おそらくほとんどの人が何を言ってるのか分からないと思います。

denza
質問者

お礼

すみません。よくあることなのかと思い少しはしょりました。 元のHTMLファイルで <link rel="stylesheet" href="style.css">を指定したところ その元のHTMLファイルをコンポーザーで開くと上記のようなソースが出てきて 困ってました。 しかし今元のHTMLファイルを、メモ帳で開くと文字化けおよびタグ化けは綺麗です。 コンポーザーと元のHTMLファイルの関係で文字化け等が発生しています。

denza
質問者

補足

メモ帳で開くと <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="keywords" content="LM386,ミニアンプ,モニターアンプ,電子工作,ダイソーのケース"> <meta name="description" content="ダイソーのケースを使ったミニアンプ"> <link rel="stylesheet" href="../style.css"><title>シンプルLM386モニターアンプの製作</title> </head> <body> <h1>シンプルLM386モニターアンプの製作</h1> <h2>電子工作の超定番LM386アンプを製作いたしました。</h2> <h2>簡単なアンプを製作してみよう。</h2> <h2>概要</h2> 以下略 コンポーザーで開くと質問のとおりです。 style.css適用前には起こらなかったことです。 他のHTMLファイルをコンポーザーで開いても文字化けは起こりません。

関連するQ&A

  • 特定のWebページで文字化け・・・

    はじめまして。 インターネット閲覧中ほとんどがちゃんと見れるんですが、特定のページだけ文字化けするんです。 特にひどいのがMicrosoft/Windows update等のページで ”Windows Update 縺ョ繧オ繧、繝医′蠑キ蛹悶&繧後∪縺励◆縲ゅた繝輔ヨ繧ヲ繧ァ繧「縺ョ譁ー縺励>繝舌・繧ク繝ァ繝ウ繧偵ム繧ヲ繝ウ繝ュ繝シ繝峨@縺ヲ縲仝indows Update 縺ョ菴ソ逕ィ繧帝幕蟋九☆繧九↓縺ッ縲ー莉翫☆縺舌う繝ウ繧ケ繝医・繝ォ] 繧偵け繝ェ繝・け縺励※縺上□縺輔縲・ ”の様に全然意味不明です。 エンコードも試してみたんですがダメです・・・ 使用環境 WindowsXP Home SP2 Internet Explorer6.0 です。 解決策分かる方いましたらお願いします。

  • 変なメール。

    今日、変なメールが来ました。 これは悪質な物なんでしょうか? 繝倥Ν繝・繧サ繝ウ繧ソ繝シ | 繝。繝シ繝ォ 繧ェ繝励す繝ァ繝ウ | 繧ケ繝代Β縺ョ蝣ア蜻・/a> 縲舌ヶ繝ォ繝シ繝舌・繝会シ上>縺阪b縺ョ縺後°繧翫・豁後▲縺ヲ縺ソ縺・ 縺ク縺ョ縺ゅ↑縺溘・繧ウ繝。繝ウ繝医↓蟇セ縺励・a href="http://www.youtube.com/user/nekromantix777">nekromantix777 縺輔s縺九i霑比ソ。縺後≠繧翫∪縺励◆縲・ 縺ゅj縺後→縺・#縺悶>縺セ縺呻シセ・セ 繝励Ο縺縺ェ繧薙※縺ィ繧薙〒繧ゅ↑縺・〒縺・^_^;) 縺溘□縺ョ邏莠コ縺ァ縺呻ス樞・ 縺ァ繧ゅ◎縺・>縺」縺ヲ縺上l縺ヲ縺ゅj縺後→縺・#縺悶>縺セ縺吮飭 蠢懈抄縺励※縺上l繧九s縺ァ縺吶°・滂シ・br/>螫峨@縺・〒縺呻シ・^_^) 繧ウ繝。繝ウ繝・/a> 繝壹・繧ク縺九i霑比ソ。縺ァ縺阪∪縺吶・ &copy; 2009 YouTube, LLC

  • 文字化けメールがきました。

    一部分の抜粋。 『鬮俶ゥ区ァ縺薙s縺ォ縺。縺ッ縲・關ス譛ュ縺励※縺・◆縺縺・◆繝・Ξ繧ォ縺ォ荳榊y縺後≠縺」縺溘h縺・〒ウ縺苓ィウ縺ゅj縺セ縺帙s縺ァ縺励◆縲・遒コ隱阪@縺溘▽繧ゅj縺ァ縺励◆縺後∽スソ逕ィ貂∩縺ョ繧ゅ・縺縺」縺溘・縺ァ縺吶・縲・荳譫壼・縺ョ霑秘≡繧偵@縺溘>縺ョ縺ァ縲√♀』 このような文字化けメールがきました。 送信元は友人で今までこんな事はありませんでした。 何が原因かお願いします。 またこの文字化けメールを返信したら元に戻ってる場合ってありえますか?

  • 読めないメール

    過去に同じ質問がありましたら勘弁下さい。 最近出会い系のメールが来るようになりましたが、本文(textではない)が文字化けしていて読めないのです。 別に読みたくもないのですが、気になるので読む方法があったら教えて下さい。 (例) 譛ャ迚ゥ縺ョ繝ュ笳九・繧ソ逕滄浹螢ー閨槭°縺帙∪縺呻シ∫分邨・′髢蛾事縺輔l繧句庄閭ス諤ァ縺悟セ。蠎ァ縺・∪縺吶・縺ァ縺頑掠繧√↓縺ゥ縺・◇縲 03-3406-5932・域声蟶ッ髮サ隧ア縺九i縺ョ縺ソ菴ソ逕ィ蜿ッ・ 逹菫。縺励∪縺励◆繧峨☆縺舌↓1・・r繝励ャ繧キ繝・縺励※縺上□縺輔>縲・

  • この日本語の文章をリコーディングしたいのですが、、、

    宜しくお願い致します。Win2kの環境です。 以下の文章をunicode(UTF-8)でリコーディングしたのですが一部文字化けしまいます(肝心の箇所が!!)。どうすれば文字化け解消できますでしょうか? 譚セ莠輔&繧薙∈縲・/DIV> Email 繧帝√▲縺ヲ縺上□縺輔▲縺ヲ縲√≠繧翫′縺ィ縺・#縺悶>縺セ縺励◆縲ゅ譚セ莠輔&繧薙→縺顔宛縺輔s縺ィ莨壹>縺溘°縺」縺溘〒縺吶ゅ譚セ莠輔&繧薙・繧ケ繧ウ繝・ヨ縺ョ螳カ縺ォ髮サ隧ア繧偵@縺滓凾縲√b縺・ennsylvania Hotel縺ォ陦後″縺セ縺励◆縲ゅ縺昴%縺九i譚セ莠輔&繧薙・繝帙ユ繝ォ縺ョ驛ィ螻九↓髮サ隧ア繧偵@縺セ縺励◆縲ゅ莨晁ィ繧偵@縺セ縺励◆縲ゅ縺阪%縺医∪縺励◆縺九ゅ縺昴・縺ゅ→縺ァ螳カ縺ォ縺句クー繧翫∪縺励◆縲ゅ縺昴@縺ヲ譚セ莠輔&繧薙・莨晁ィ繧定◇縺阪∪縺励◆縲ゅ繧ソ繧、繝溘Φ繧ー縺ョ謔ェ縺輔〒縺励◆縺ュ縲ゅ蜈ィ辟カ蠢・・縺励↑縺・〒縺上□縺輔>縲・/DIV> 譚・騾ア譌・譛ャ縺ォ陦後″縺セ縺吶′螟ァ髦ェ縺ォ縺・∪縺吶ゅ螟ァ髦ェ縺九i髟キ蟠弱∪縺ァ縺。繧・▲縺ィ驕 縺・〒縺吶ゅ谺。縺ョ譌・。後・髟キ蟠弱↓陦後¢縺・°繧ゅ@繧後∪縺帙s縲・/DIV> 繧ケ繧ウ繝・ヨ

  • 文字化けしています。

    送られてきたメールが文字化けしていて、解読したいのですが KANZAKIさんなどを使っても解読できません。 どなたか解読できますか?よろしくお願いします。 莉頑勦縺ッ縲? 菴楢ェソ蝗槫セゥ縺励∪縺励◆縺具シ? 縺セ縺縲∬患縺励¥縺ェ縺代l縺ー縲∽ク玖ィ倡羅髯「繧定ィェ蝠丈ク九&縺? ? 1.蝨ー荳矩延4蜿キ邱壹莠梧搗鬧?4逡ェ蜃コ蜿」縺九i邏?70m逶エ騾イ縲? 縲螟ァ騾壹j菫。蜿キ繧呈ク。繧翫√そ繝悶Φ繧、繝ャ繝悶Φ縺ョ縺ゅk蟒コ迚 ゥ2F 縲繧、繝サ繝溘Φ繧ク繧ァ蟆丞?遘? 縲螂ウ蛹サ繝サ豬キ螟紋ソ晞匱驕ゥ逕ィ蜿ッ閭ス縲? 2.謳コ蟶ッ髮サ隧ア縺ッ縲?150,000won遞句コヲ縺ァ雉シ蜈・蜿ッ縲? 縲譛磯俣譁咎?縺ッ縲∽スソ逕ィ譁咎?縺ォ萓昴j縺セ縺吶′蝓コ譛ャ譁咎?30,000won 遞句コヲ縲? 縺雁、ァ莠九↓縲ゅい繝ウ繝九Ι繝偵繝√Η繝繧サ繝ィ. ?ク?シ

  • 読めないメッセージの受信

    はじめましてメールを受け取った本人です。 メッセージの内容を下記添付いたします、 調査をお願いいたします。                           受信者                                  譁ー縺励>縺顔衍繧峨○縺悟ア翫>縺ヲ縺・∪縺吶€・ 繝槭う繝翫・繝シ繧ソ繝ォ縺ォ繝ュ繧ー繧、繝ウ縺励※遒コ隱阪@縺ヲ縺上□縺輔>縲・ -------------------- 繝槭う繝翫・繝シ繧ソ繝ォ縺ァ繝。繝シ繝ォ騾夂衍繧貞ク梧悍縺輔l縺滓婿縺ク驟堺ソ。縺励※縺・∪縺吶€・ 縺薙・繝。繝シ繝ォ縺ク縺ョ霑比ソ。縺ッ縺ァ縺阪∪縺帙s縺ョ縺ァ縺比コ・価縺上□縺輔>縲・ 繝。繝シ繝ォ驟堺ソ。蛛懈ュ「縺ッ繝槭う繝翫・繝シ繧ソ繝ォ縺ォ繝ュ繧ー繧、繝ウ縺励€悟茜逕ィ閠・匳骭イ螟画峩縲阪°繧峨€瑚。梧帆讖滄未遲峨°繧峨・縺顔衍繧峨○騾夂衍縲阪メ繧ァ繝・け繧貞、悶@縺ヲ縺上□縺輔>縲・ ※OKWAVEより補足:「ひかりTVのサービスやISPぷらら」についての質問です。

  • 解読できますか?

    こんなメールが来たんですが、 縺\x84縺阪<F繧翫ン繝\x83繧ッ繝ェ縺励◆縺代← 縺薙■繧峨%縺昴h繧阪@縺 縺ゅ→縲√∩縺上■繧\x83繧薙<H縲後♀縺シ縺医※縺翫¢ 縲阪▲縺ヲ險 縺」縺ィ縺\x84縺ヲ 縺薙l縺九i繧医m縺励¥縺ュ縲 なんて書いてあるんでしょうか?

    • ベストアンサー
    • au
  • (abc)@msn.com の取得 その2

     (abc)@msn.com の取得の手続きの後、 下記のような中国語のメッセージになってしまいます。 解決法を教えてください。 https://accountservices.passport.net/reg.srf?ns=msn.com&sl=1&vv=400&lc=1041   最終段階で、エラーになってしまいます。     何度も繰り返してしまいます。 隕∵アゅr螳御コ・〒縺阪∪縺帙s縲・/h1> 繧「繧ォ繧ヲ繝ウ繝医・菴懈・荳ュ縺ォ Windows Live ID 縺ァ謚€陦鍋噪縺ェ蝠城。後′逋コ逕溘@縺ヲ縺・∪縺吶€ゅ☆縺舌↓ Windows Live 繧剃スソ逕ィ縺吶k縺ォ縺ッ縲√し繝昴・繝医↓縺雁撫縺・粋繧上○縺上□縺輔>縲・a href="https://support.live.com/default.aspx" target="_top">縺薙%繧偵け繝ェ繝・け縺励※縲ーWindows Live ID] 繧帝∈謚槭@縲√ヵ繧ゥ繝シ繝縺ォ莉・荳九・繧ウ繝シ繝峨r繧ウ繝斐・ 繧「繝ウ繝・繝壹・繧ケ繝医@縺ヲ縺上□縺輔>縲・/p> LEFKPK~OISOMRQVQUWWUY_[

  • 解読求む!!

    件名: ・呎怦・托シ俶律縲〓繧、繝シ繧ケ繧ソ繝ウ繝ェ繝シ繧ー 本文: 蜥檎伐讒・ 縺贋ク冶ゥア縺ォ縺ェ縺」縺ヲ縺翫j縺セ縺吶〓・譁ー譚セ謌クSC縺ョ貂・ーエ縺ィ逕ウ縺励∪縺吶〓・ 縺秘〓」邨。譛蛾屮縺・#縺悶>縺セ縺励◆縲・蠖捺律縺ッ螳懊@縺上♀鬘倥>縺励∪縺吶〓・ 縺贋ク冶ゥア縺ォ縺ェ縺」縺ヲ縺セ縺吶〓・> ツ〓 〓螟ァ逶ク讓。繧オ繝・き繝シ縺ョ蜥檎伐縺ァ縺吶〓・> ツ〓 〓・呎怦・托シ俶律縺ョ莠亥ョ壹〒縺吶〓・> ツ〓 〓縺皮「コ隱阪・遞句ョ懊@縺上♀鬘倥>縺・◆縺励∪縺吶〓・ 上記の文章を解読して下さい。 どうやっても読めません!! 宜しくお願い致します。

専門家に質問してみよう