HTMLの書き方について質問です(初心者)。どうして正しく表示されないのか?

このQ&Aのポイント
  • HTMLを勉強中の初心者が質問です。特定の修正をしないと正しく表示されない理由を教えてください。
  • 正しく表示されるために必要な修正内容について教えてください。
  • また、修正後のコードの一部が不足しているように見えるのですが、なぜこれで正しく表示されるのでしょうか?
回答を見る
  • ベストアンサー

HTMLの書き方について質問です(初心者)。

[HTML & スタイルシート トレーニングブック]という本を見ながらHTMLを勉強中です。 この本ではHTMLの書き出し部分は下記のようになっております。 ================================================================================== [ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [ 2 ] Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [ 3 ] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> [ 4 ]<head> [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [ 6 ]<title>Osteria Grazie[イタリア料理の店]</title> [ 7 ]<link href="message.css" rel="stylesheet" type="text/css" /> [ 8 ]</head> ================================================================================== ところがこのままテキストで書き写し使用しても正しく表示されません。 (具体的に言うと感じやひらがなが文字化けしてしまいます。) こちらの [ 5 ] を下記のように修正すると正しく出力することができます。 ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ここに[ " ]を書き加える。 ================================================================================== ただし、サンプルディスクに入っているhtmlデータは上記のままで動きます。 どうしてなのでしょうか? 分かる方がいらっしゃいましたら回答お願いします。 また、修正後の ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="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>Osteria Grazie[イタリア料理の店]</title> <link href="message.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <h1>Message</h1> <h2>ご意見ご感想をお書きください</h2> <form action="mailto:sotechsha@html.sever" method="post" enctype="text/plain"> ■名前<br /> <input type="text" name="name1" size="30" /><br /> ■メールアドレス<br /> <input type="text" name="email" size="30" /><br /> ■メッセージをお願いします<br /> <textarea name="message" rows="6" cols="50"></textarea><br /> </form> <div id="gotop"> <a href="index.html">Topページにもどる</a> </div> </div> </body> </html> ==================================================================================

  • HTML
  • 回答数2
  • ありがとう数14

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

  • ベストアンサー
noname#212058
noname#212058
回答No.1

HTML を入力しているソフトウェアは何でしょうか? メモ帳でしょうか? 解決案A) ファイルを保存するときに表示されるダイアログに「エンコード」 または「文字コード」という項目がないかを確認しましょう。ある 場合は、その選択肢から UTF-8 を選択して保存してみてください。 解決案B) メモ帳の場合[5]を以下のように修正してください。 × <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ○ <meta http-equiv="Content-Type" content="text/html; charset="shift_jis" /> ※解決案A・Bは、どちらか片方を実施してください。  両方とも実施すると、文字化けが直りません。

その他の回答 (1)

  • hoge3600
  • ベストアンサー率31% (5/16)
回答No.2

使っているテキストエディターの文字コードがutf-8ではない場合に そうなる場合があります。 Windowsに最初から入っている「メモ帳」は「shift-jis 」か「 unicode 」以外の コードになっていると文字化けするので 他のエディターを使うか、 メタタグの中の文字コードを <meta http-equiv="Content-Type" content="text/html; charset="Shift-jis" /> にすれば直ると思います。

mayakanatan2204
質問者

お礼

確認してみたのですが、確かに「shift-jis 」になっておりました。 修正したところ"を省いてもうまく動作させることができました。 回答が同じ内容でしたのでベストアンサーは早かったほうの方とさせていただきましたが、 大変感謝しております。 ありがとうございました。

関連するQ&A

  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 (教則本がIE7以降対応だった為) safari firefoxd IE7では表示がうまくいくのですが、 IE6では全く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" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • PHP、どうして認識しないのですか?

    現在の私のサイト(shtml)のソースは次のとおりです(甲)。これを下記(乙)のように書き換えてアップしましたが”こんにちは”の文字が現れません。 レンタルサーバーの問題ですか?ソースの問題ですか? (甲) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"> <TITLE>○○○</TITLE> (乙) <!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> </head> <body> <!--shtmlのソースの中に次を挿入しました--> <p> <?php echo "こんにちは。<br />"; echo "こんにちは。<br />"; echo "こんにちは。<br />"; echo "こんにちは。<br />"; ?> </p> ----------------------- これが表示されません。 教えて下さい。どうしてですか? 宜しくお願いします。

    • ベストアンサー
    • PHP
  • XHTML meta属性 文字化け

    XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>

    • ベストアンサー
    • HTML
  • 初歩的な質問で恐縮ですが、教えてください。

    すみませんが、教えてください。 入力フォームでデータが送れなくて、困っています。 下のコードに問題点はあるのでしょうか? 自分では、分からないので、よろしくお願いいたします。 test1.php------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <form method="post" enctype="multipart/form-data" action="./test2.php"> <input type="text" name="fmTitle" ><br /> <input type="submit" value="次へ" > </form> </body> test2.php-------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <?= $fmTitle . "<br />" ?> </body>

    • ベストアンサー
    • PHP
  • 多言語ページのエンコード記述が分かりません

    友人に頼まれてサイトの挨拶文のようなページを、英語バージョンと中国語バージョンで作っています。 ナビゲーションなどは日本語のままで、メインのコンテンツエリアのみ英語や中国語を書くので2つの言語が交じるページとなります。 文字化けを防ぐためのエンコードがいまいち分かりません… 分からないなりに書いては見たものの、これであっているのかも分かりません。 (確認する方法はあるのでしょうか) コードを書いてみました。 添削やアドバイスをお願いします。 ───────────────────────── 【英語と日本語のページ】 ※エンコードを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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── 【中国語と日本語のページ】 ※ネットで検索してcharset=bg2312、 lang="ja,zh" xml:lang="ja,zh"を書きましたがこれでいいんでしょうか? <!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,zh" xml:lang="ja,zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=bg2312" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── また、友人のサイトを見てみるとその他すべてのページはShift_JISで作られています。 これは海外の人が開くと文字化けしてしまうということなのでしょうか? 日本語の表示のままでいいのですが、UTF-8にしたほうがいいのでしょうか? わからない事だらけでスミマセン(;_;) よろしくお願いします。。

  • 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 &gt; </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span> 文字色が変わりません。 どなたか指摘願います。

  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか? ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング: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" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • charsetとフォーム入力文字

    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" /> ・・・ で始まります。 このファイルのフォームに入力した文字はUTF-8で送られるのでしょうか。 それともOSの文字コードに依存するのでしょうか?

    • ベストアンサー
    • HTML
  • firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。

    初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。(ファイルはローカルでデスクトッップに置いてあります。) 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 (未チェックですが、恐らくIE関係も全滅だとは思います。) ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>

    • ベストアンサー
    • Mac

専門家に質問してみよう