HTMLコードの文字化け問題と解決方法
- HTMLコードの文字化け問題について説明します。このソースコードでは、文字化けが発生しています。
- UTF-8でエンコードされたHTMLコードでも、文字化けの原因となる要素が存在することがあります。
- 文字化けが発生する原因としては、metaタグのcharset属性が正しく設定されていない、またはファイルの保存形式がUTF-8ではないことが考えられます。
- ベストアンサー
誰か教えてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8 <title>ホームページ</title> </head> <body> <p><a href= "http://***.html.xdomain.jp/homepage.html" >ホーム</a></p> <iframe src="https://scratch.mit.edu/projects/842573840/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe> <p>クレジット</p> <p><a href= "https://scratch.mit.edu/users/poinoki" >自分</a>の作品を載せました</p> </body> <body bgcolor="#00fa9a"> </html> このソースコードで、ミスっているところはありませんか。 なぜか文字化けしてしまうんです。 種類は、UTF-8にしています。
- kotanemu
- お礼率40% (2/5)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
タグが閉じられてないね。 <meta charset="UTF-8 それと、タイプをUTF8にするのと、保存をUTF8にするのは 違いますので、保存がUTF8になってるかも確認。 これらは、文字を変換するものではなく、 ファイルの保存タイプを教えるものなので、 保存がSJISで表示がUTF8なら、確実に文字化けしますよ。 「実際の文字エンコーディングに合わせる事」が 一番大切です。
その他の回答 (1)
- agehage
- ベストアンサー率22% (2554/11361)
4行目がおかしい こうしてください <meta charset=UTF-8">
関連するQ&A
- 単独で開かれたiframeを親ページに表示したい
ブログ記事(blog1.html、blog2.html、blog3.html)を親ページ(index.html)のiframeとして表示しています。 親ページを開いた際には、デフォルトで最も新しいブログblog3.htmlが表示されるようになっています。 ブログ記事が単独で開かれた場合には、 if (window == window.parent) { location.href = "./index.html"; により自動的に親ページに導くようにしていますが、その際に開かれたブログ記事を表示したいと思います。 当たり前ですが、現在はblog3が開かれてしまいます。 どのようにしたらいいでしょうか。 以下、現在確認中のサンプルスクリプトです。 ■親ページ■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <p>index.html</p> <iframe src="./blog3.html" frameborder="2" width="300" height="100"></iframe> <div id="result"></div> </body> </html> ■ブログ1■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog1</title> </head> <body> <p>blog1.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html> ■ブログ3■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog3</title> </head> <body> <p>blog3.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html>
- ベストアンサー
- JavaScript
- ページ内リンクがうまくいきません
ページ内リンクがうまくいきません。 どこか間違っているのでしょうか。 アドバイスよろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ホームページ</title> <style> p{ color:red;} </style> </head> <body> <p>こんばんわ！</p> <p>こんちは！</p> <p><a href="#01">ジャンプ</a></p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p id="#01">ここ</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> </body> </html>
- ベストアンサー
- HTML
- 親ページからインラインフレーム内の<a name="～">リンクへ飛ばしたときのIEの動きについて
例えば、IEで <html> <head><title>index.html</title> </head> <body><center> <p style="margin: 100px auto 50px auto">サンプル</p> <p><a href="a.html#a" target="frame">リンク</a></p> <iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px"> </iframe></center> </body> </html> というソースのindex.htmlに、 <html><head><title>インフレーム・a.html</title></head> <body><p style="margin-top: 500px">余白</p> <p><a name="a">NAME A</a></p> <p style="margin-top: 500px">余白</p> </body></html> というソースのa.htmlというファイルをインラインフレームで読み込み、 index.htmlの「<p><a href="a.html#a" target="frame">リンク</a></p>」をクリックした場合、 インラインフレーム内のa.htmlの「<p><a name="a">NAME A</a></p>」がブラウザの一番上に表示されるよう、 index.htmlのページ全体が上に動いてしまいますよね。 これを、（同じものをOperaで動作させたときのように、） index.htmlのページ全体ではなくインラインフレーム内のa.htmlだけが 動くように表示させたいのですが、何かいい解決策はあるでしょうか？ 最初はIEのバグかと思ったのですが、FirefoxでもMozillaでも 同様なので、Operaの解釈のほうが特殊なのかもしれませんが…。
- ベストアンサー
- HTML
- iframe内をリロードできますか？
たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じでiframe内をリロードできないでしょうか？ お願いします。
- ベストアンサー
- JavaScript
- インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；
現在ホームページを制作中で、初めてインラインフレームを使って制作しています。 まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。 それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。 何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。
- 締切済み
- HTML
- html5を勉強中なのですがリンクがつながりません
Chromeで実行し、リンクをクリックすると、 「このウェブページは見つかりません 詳細 次の file:///Users/◯◯◯/Desktop/“http//google.com” のウェブページは見つかりませんでした:file:///Users/◯◯◯/Desktop/“http//google.com”」 となってしまいます。どうすればいいでしょうか？ コードを貼っておきます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“utf-8”> <title>初めてのHTML</title> </head> <body> <p>こんにちは。</p> <p><a href=“http//google.com”>Google</a></p> </body> </html>
- ベストアンサー
- HTML
- cssが読み込まれません。
VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }
- ベストアンサー
- HTML
- タイトル表示をインラインフレームの<title>内のものにしたい
最初に「index.html」にアクセスしたときは、そのままのタイトル表示 （<title>タグ内のもの）で問題ないのですが、インラインフレーム内 に、例えば「annai.html」を表示させたときに、現在のフレーム内の ページタイトルに変えることは可能でしょうか？ 下に詳しく表記します。 アクセス当初「index.html」 ↓ ・・・・・・・・・・・・・・・・・・・・ <html> <head> <title>インデックス</title> </head> <body> <a href="annai.html" target="NAME">案内</a> <iframe name="NAME" （略）></iframe> </body> <html> ・・・・・・・・・・・・・・・・・・・・ 上記のままだとブラウザのタイトルバーに「インデックス」と表示される インラインフレームに「annai.html」を表示させたとき、 ↓ ・・・・・・・・・・・・・・・・・・・・ <html> <head> <title>案内</title> </head> <body> </body> <html> ・・・・・・・・・・・・・・・・・・・・ タイトルバーを上記の<title>タグ内の、「案内」に変えたい 返ってややこしい説明になっていましたら、スイマセン。 回答よろしくお願いいたします。
- ベストアンサー
- HTML
- ホームページのリンクについて
http://beginners.atompro.net/exphtml_htm08.htmlを参考にして次のページにリンクさせるために下のようにやったのですが、リンクできませんでした。一応文字は青に下線になっているのですが…。どこかが間違っているのでしょうか？どなたか教えてください。 <html dir="ltr"> <head> <title>タイトル</title> </head> <body> <p><a href="top.html">タイトル</a></p> <p> </p> </body> </html>
- ベストアンサー
- その他（趣味・娯楽・エンターテイメント）
- フレームを使って細いメニューを作りたいです。
フレームを使って細いメニューを作りたいです。 フレームを使って下のほうに細いメニューを表示したいと思っています。 しかし文字の上に一行分くらいの隙間が開いてしまい、 メニューの文字がスクロールしないと表示されません。 メニューの作り方も調べましたが、ここまで細いものについてはわかりませんでした。 どうしたら上手く表示できるでしょうか。 完成ページ↓ <html> <head> <title></title> </head> <frameset rows="*,3%" frameborder="NO" border="0"> <frame src="PageTop.html"> <frame src="Menu.html" noresize scrolling="NO"> <norames><P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </frameset> </html> PageTop.html↓ <html> <head> <title></title> </head> <body></body> </html> Menu.html↓ <html> <head> <title></title> <style type="text/css"> <!-- p { text-decoration: none; } --> </style> </head> <p> <body bgcolor="#696969" link="#696969" alink="#696969" vlink="#696969"> <font face="Kartika"><div style="font size:20px;"> <target="1" href="">Top</a> <target="1" href="">About</a> <target="1" href="">Main</a> <target="1" href="">Blog</a> <target="1" href="">Link</a> <target="_top" href="">Index</a> </font></p> </body> </html> 至らない点がありましたらご指摘ください。 よろしくお願い致します。
- ベストアンサー
- HTML
