こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;

以下略

投稿日時 - 2013-05-20 23:34:45

QNo.8097555

困ってます

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

 私も 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/

投稿日時 - 2013-05-21 23:27:58

お礼

なんだかわからないけれど、
CSSもしくはHTMLどちらかにSHIFT_JISが書かれていて、一度適用すると文字化けが直らないです。

おっしゃるとおりUTF-8でHTMLを指定したら回復しました。
(CSSもUTF-8にしました)
なんだこれ。ですが、とりあえず作業先に進めそうです。ありがとうございます。

投稿日時 - 2013-05-23 21:14:42

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

>>UTF-8の文書であるのに
恐れ入ります、どこからUTF-8ってわかるのでしょうか?

イトヘンの文字化けはUTF-8をS-jisで見るときに起こる文字化けの特徴ですので、そうじゃないかと。

理由などを説明すると長くなるのですが、charsetでよく起こる文字化けは変化と文字化けでググれば簡単に情報が得られますよ。ちょっとだけ捜したのですが一覧としては見つけられませんでした。

https://twitter.com/hadsn/status/299246035547586560
他にも?だらけとか%、菱形……とそれぞれに特徴があるので、興味があればググってください。

投稿日時 - 2013-05-21 19:49:48

ANo.3

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

投稿日時 - 2013-05-21 09:11:58

お礼

>具体的には、UTF-8で保存して、Shift_JISで開くとそうなります。
参考になりました。

コンポーザーで試してみて、
2つ目のツールとしてEmEditror使ってみます。
もうひとつシンプルなエディター欲しかったので。

回答どうもです。

投稿日時 - 2013-05-21 10:58:14

ANo.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">
に直す。


どちらかの☆で解決すると思います。

投稿日時 - 2013-05-21 04:22:35

お礼

ありがとうございます。

>UTF-8の文書であるのに
恐れ入ります、どこからUTF-8ってわかるのでしょうか?

★shift_jisで保存するか
ちなみにこちらで保存すると文字が化けたまま保存されてしまいます。(メモ帳で開いても)

大変参考になりましたが、さらに疑問が出てしまいました。
よかったらよろしくご指導のほど。

投稿日時 - 2013-05-21 10:54:15

ANo.1

疑問におもうのは、

・なぜ文字化けしてるのでしょうか。

・「壊れる」とは一般的ではない言葉ですが、具体的にどういうことを指しているのでしょうか。

の2点です。
おそらくほとんどの人が何を言ってるのか分からないと思います。

投稿日時 - 2013-05-21 00:19:35

補足

メモ帳で開くと
<!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ファイルをコンポーザーで開いても文字化けは起こりません。

投稿日時 - 2013-05-21 01:13:32

お礼

すみません。よくあることなのかと思い少しはしょりました。
元のHTMLファイルで
<link rel="stylesheet" href="style.css">を指定したところ
その元のHTMLファイルをコンポーザーで開くと上記のようなソースが出てきて
困ってました。

しかし今元のHTMLファイルを、メモ帳で開くと文字化けおよびタグ化けは綺麗です。
コンポーザーと元のHTMLファイルの関係で文字化け等が発生しています。

投稿日時 - 2013-05-21 00:55:06

あなたにオススメの質問