はじめての親子ハイキングに挑戦!! >>

市販の解説書を見ながらDreamweaverを勉強中です。
入門書にそっての作業ですので、大して難しいことをしているわけではないのですが、編集作業で画像を差し替えたりしていたところ、なにかのきっかけでページ全体が文字化けを起こしてしまいました。(添付写真の状態)
取り消し作業や、DreamweaverやMacの再起動を行なってっも解決しませんでした。
なにか解決方法はありますでしょうか?
使用環境はMac OS 10.6、DreamweaverはCS5です。

「Dreamweaverでページ全体が文字」の質問画像

このQ&Aに関連する最新のQ&A

素材 作り方」に関するQ&A: 素材の作り方

A 回答 (5件)

別の方がおっしゃっている通り、


Dreamweaver自体の問題ではないのは間違いありません。

おそらく、考えられるのは、
「HTMLファイル内のhead要素内のエンコード設定と
実際にHTMLファイルの保存エンコードがバラバラになってしまった。」
だと思います。
書籍側の素材ファイルの作り方に問題があるかもしれません。


まず問題のHTMLファイルを保存して、
そのファイルを直接開いてブラウザで閲覧したみましょう。
その時にも、文字化けが起こりますか?


実際にファイルを開いてみて、文字化けが起こるのであれば、
メニューから[表示]-[エンコード]をチェックしてしましょう。
どのブラウザでも実装されていますので、
この[エンコード]の出てくる一覧から、それぞれのエンコード名に切り替えてみます。
もし、文字化けしないエンコードがあったら、実際はそれで保存されている、ということになります。

もしブラウザを開いた際には文字化けが起こらないのであれば、
同じように「エンコード」一覧を開くと、文字化けの起こらないエンコード名が正しい保存形式です。


head内の「charset=」部分と、
Dreamweaverの環境設定内の「新規ドキュメント」設定にある「エンコード初期設定」が
それぞれ同じになっているかを確認してみてください。


もしすべてがバラバラであれば、どれか1つに統一するのがまず第一。
現在のファイルは、「TeraPad」などのテキストエディタソフトをダウンロードしてきて、
文字化けしなかったエンコーディング設定に保存し直す必要があります。
「Dreamweaverでページ全体が文字」の回答画像4
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

問題のHTMLファイルを直接ブラウザで閲覧しても同様の結果となりました。
ブラウザ内でもエンコードを変えて見ましたが、結果は同じとなりました。
head内の「charset=」部分ですが、検索をかけたところ「charset=」という部分が出て来ませんでした。

メールでもたまに、どのエンコードにしてもということがありますが、これと同じでしょうか?

入門書にそった内容ですので、初心者の私が見ても、複雑なことやトラブルが起こりやすいことは書かれてないので、やはり原因不明のまま、最初からやり直すしかないのかなと途方にくれてます…

お礼日時:2011/12/23 12:24

文字化けの様子から、UTF-8で保存しているものをS-Jisで開いているように見えるのですが、下記の方法(ブラウザで文字コード・dreamweaverからも)ダメとなると、0からやったほうが早い気がします。



文字コードの説明がない解説書なんか売るなよ~って思っちゃいますね。

とりあえず、<head>直下に

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

を追加してみてください。そして保存。もう一度開いてみる。これで治るなら、上記の方法でも反応があった筈なのでだめもとですが。

また、macとのことですが、safari?でチェックしておられますか?Safariは新しい目のバージョンを使っておられますでしょうか?古いsafariは文字化けがよく起こった、charsetも効かなかったように記憶しています。
    • good
    • 1
この回答へのお礼

ご回答ありがとうございます。
<head>直下に~というのを試しましたが、またダメでした。
テストしたブラウザはChorme、Firefox、Safariのそれぞれの最新バージョンです。

正直、ちょっとわかりにくい解説本で苦労していますが、まさかこんなことになるとは…
文字コードの説明ってかなり重要なのですね。
一通りこの本で頑張ったら、もう一冊入門書を買ってみようと思います。

お礼日時:2011/12/23 22:07

チェックしろとは指示していません。

2で書いたのは

1.解説書を見ながらの問題のある1ページをdreamweaverで開く。
2.Ctrl+J(または、修正 > ページプロパティ )
3.タイトル/エンコーディング をクリック
4.エンコーディングで変更したい文字コード今回はutf8
5.OKボタン
確認。

だめなら
もう一度。ただし、4.ではEuc
確認。

だめなら
もう一度。ただし、4ではs-jis
確認


してくださいということです。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
やはり、エンコードをすべて変えてテストしてみましたが、ちゃんとした表示になることはありませんでした。

お礼日時:2011/12/23 12:30

いやいや、新しいページは、新しくソース、保存ともマッチしたページを作るので文字化けしません。

当たり前です。ドリが壊れているわけではありません。

文字化けするページは、ソースと文字コードがマッチしていないので文字化けします。文字化けするページを開いて#1のことを試してみてください。全体におかしいのではなく、特定のファイルのソースがおかしい筈ですので、1ファイルずつ直す必要があります。
    • good
    • 0
この回答へのお礼

再度のご回答ありがとうございます。
文字化けするページと言っても、解説書を見ながらのこの1ページ(htmlとCSS)のみです。
解説書から外れた、特殊なことは一切やってない(出来ない)です。
配置していたJPEG画像を差し替えたときに、突然このような状態になったので、とまどうばかりです。
特定のファイルソースをチェックすると言っても、正直全くの初心者で、どこをどうチェックしたらいいかわからない状態です。
どこからチェックしていったらよろしいでしょうか?

お礼日時:2011/12/18 13:05

保存されている文字コードが合っていないのだと思います。



1.Ctrl+J(修正メニュー > ページプロパティ > タイトル/エンコーディング を選択
3.エンコーディングで変更したい文字コードを選択(日本語だとutf8、Euc、s-jisのどれか)
4.OKボタン
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
エンコーディングを変えて試して見ましたが、やはり文字化けは治りませんでした。
新規に作ったページでは普通に日本語が打てるので、Dreamweaver自体がおかしくなっていないとおもうのですが。
引き続きアドバイスあれば、お願いします。

お礼日時:2011/12/18 10:07

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QDWで、デザインビューに表示されないのはどうして?

おはようございます。
よろしくお願い致します。

知人からHTMLのソースを受け取り、編集しようと思っています。
ところが、DWで開くと、タグは全部あるのに、デザインビューでは途中がすっぽり抜けているのです。
でも、ブラウザのプレビュー機能で見ると、ちゃんと全部表示されているんです。
どうしてでしょうか?
どうやったらデザインビューにも全部表示されるようになるのでしょうか?

よろしくお願い致します。

Aベストアンサー

私にも経験がありますが、
HTMLにテーブルなどを使用している場合に
タグの閉じ忘れをしているとブラウザでは
反映されるのに
DWのデザインビューには反映されない事があります。

DWのコードビューでテーブル系のタグを追っていって
閉じ忘れ箇所を修正すれば直ると思いますよ。

Q【DreamWeaver】「コード」画面の文字を大きくしたい

ドリームウィーバー8(Win)使用者です。
HTMLを表示する「コード」画面の文字が小さくて目が疲れるため、もう少し大きくならないかと考えています。
DreamWeaverの機能としてなんとかなりませんでしょうか?
お詳しい方、よろしくお願いいたします。

Aベストアンサー

「編集」「環境設定」「フォント」を選択。
「コードビュー」「サイズ」を16ptを選択。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Qイラストレーターのアウトライン化の解除方法??

ウィンドウズのイラストレーターの機能についての質問です。
アウトライン化がすでに実行されている文字の修正をする場合に、アウトライン化の解除はどうようにすれば出来るのでしょうか??
いろいろな本をみると、一度アウトライン化を実行すると、解除ができないと記載されていました。
ご指導頂きたくお願い申し上げます。

Aベストアンサー

それらの本に書かれている通り、一度アウトライン化をすると元には戻せません。

ただし、Ctrl+zやコマンド+zなどで作業を一つ前に戻すなどが出来るので
間違えたり、やり直したかった場合はそれで対処するしかないですね。

アウトライン化したデータを保存してしまった場合はどうやっても解除できないので
アウトライン化したデータを作った場合はアウトラインする前のデータも
別名保存などで残すのが一般的です。

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

QPhotoshop で8bit /チャンネル と 16bitどちらを選ぶべき?

Photoshop 6の、イメージ→モードで、CMYKカラーやRGBカラーを選択しますが、同様に8bit /チャンネル, 16bit /チャンネルというものがあります。これはどちらを選んでおくべきでしょうか?
使用目的としては、photoshopで写真をレタッチしてから保存し、それをイラストレータに配置して印刷会社に出します。

Aベストアンサー

レタッチの内容とパソコンのスペックで使い分けて下さい。
8ビットと16ビットの違いは、階調数の違いです。たとえば1チャンネル当たり白から黒まで8ビット階調で表すなら2^8=256階調使えますが、16ビット階調なら2^16=65536階調使えます。チャンネルはRGBやCMYKのそれぞれのプレーン(RGBなら3原色だから3つ・CMYKなら4原色だから4つ)に相当します。
写真の明るさやコントラストなどを調整したり、色の濃淡をいじると、トーンジャンプを起こします。修正の前後でトーンカーブを見比べると一目瞭然ですが、修正後はトーンカーブが櫛の歯状になり画像の階調が失われたことがわかります。櫛の歯の山と山の間ではグラデーションが滑らかにつながらず、色の段差が発生するのです。軽い補正ならまずわかりませんが、大きく補正した場合にたとえば青空の緩いグラデーションに色の段差が見えることがあります。
16ビット階調のメリットは、このトーンジャンプを軽減できることです。16ビットモードに変換してから補正すると、トーンカーブのでこぼこが小さくて済みます。階調がほとんど失われずに画像補整が可能になります。
デメリットとして16ビット階調の方が当然データ量は倍になるので、パソコンに負担がかかります。また16ビット階調の画像を扱えるソフトは多くはないので、他の人にデータを渡す場合は、補正後に8ビットに変換して戻しておく必要があります。
Illustratorに配置する場合も8ビットに戻して置く方が無難です。

レタッチの内容とパソコンのスペックで使い分けて下さい。
8ビットと16ビットの違いは、階調数の違いです。たとえば1チャンネル当たり白から黒まで8ビット階調で表すなら2^8=256階調使えますが、16ビット階調なら2^16=65536階調使えます。チャンネルはRGBやCMYKのそれぞれのプレーン(RGBなら3原色だから3つ・CMYKなら4原色だから4つ)に相当します。
写真の明るさやコントラストなどを調整したり、色の濃淡をいじると、トーンジャンプを起こします。修正の前後でトーンカーブを見比べると一目瞭然ですが、修...続きを読む


人気Q&Aランキング