JavaScript上で文字化け
- JavaScript上で文字化けが発生する問題について解決方法を教えてください。
- Google Chrome上でJavaScriptのプログラムを実行すると文字化けが発生します。どこを修正すれば解決できますか？
- JavaScriptでGoogle Chrome上で表示される文字化けの問題について、修正方法を教えてください。
- ベストアンサー
JavaScript上で文字化け
●質問の主旨 下記のプログラミングでGoogleChrome上に 表示させると添付画像の「誤）」のように文字化けします。 下記のコードのうちどこを修正すれば 文字化けがなくなるでしょうか？ ご存知のかたご教示願います。 ●コード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>(株)HTML5</title> <link rel="stylesheet" href="css/main.css" type="text/css"> <script src="js/main.js"></script> </head> <body> <header> <div><img src="images/logo.png" width="320" height="32" alt="ロゴ"></div> </header> <nav> <ul> <li><a href="info.html">会社概要</a></li> <li><a href="product.html">商品案内</a></li> <li><a href="order.html">ご注文</a></li> <li><a href="recruit.html">採用情報</a></li> <li><a href="news.html">お知らせ</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> <article> <h1>電力事情について</h1> <p> 現在、電力供給に不安があるため、各事業部は国内の データセンターだけでなく海外のデータセンターへの 移行も視野に入れる必要がでてきました。 </p> <p> 今後はリスク分散について早急に対処しなければいけません。 </p> </article> <section id="main"> <h1>新商品の売り上げ推移</h1> <p><b>toHTML5.app</b>の発売から1年たちました。 手軽にWebアプリを変換できる<b>toHTML5.app</b>は順調に売り上げを伸ばして います。 これまでの売り上げの推移を以下の表に示します</p> <p>[<a id = "toggleSwitch">▲売上の表示をしない</a> </p> <table> <thread> <tr><th>年/月</th><th>売上金額</th></tr> </thread> <tbody> <tr><th>2015年/1月</th><td>-31</td></tr> <tr><th>2015年/2月</th><td>-41</td></tr> <tr><th>2015年/3月</th><td>-59</td></tr> <tr><th>2015年/4月</th><td>265</td></tr> <tr><th>2015年/5月</th><td>358</td></tr> <tr><th>2015年/6月</th><td>979</td></tr> </tbody> </table> <p> <strong>注意：売上の単位は百万円です。またプラグインの売り上げも合算 されています。</strong> </p> <p> 更新日：<time datetime="2015-02-15">2015年2月15日</time> </p> </section> <aside> <div><img src="images/banner.png" width="200" height="200" alt="広告"></div> </aside> <footer> <p><small>2011 © (株)HTML5</small></p> <p>〒100-0014 東京都千代田区永田町1-7-1</p> </footer> </body> </html>
- dradra33
- お礼率92% (346/376)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
『10日でおぼえるHTML5入門教室』ですよね？ HTMLソースの入力は自分でやったのでしょうか。 メモ帳を使っているなら「名前をつけて保存」で「文字コード」を「UTF-8」を選んで保存してください。 ちなみにサンプルのHTMLソースはこちらからダウンロード可能です。 ・翔泳社『10日でおぼえるシリーズ』：ダウンロード http://www.shoeisha.com/book/hp/10days/down/ メモ帳で開けばUTF-8として編集できます（上書き保存で可）。
その他の回答 (1)
- bin-chan
- ベストアンサー率33% (1403/4213)
このソースファイルそのもののキャラクタセットは何ですかね？ SJISで保存されてるなら <meta charset="utf-8"> を <meta charset="s-jis"> に変更すれば直ると思います。 やり方間違ってたらごめんなさい
関連するQ&A
- HTMLで文とテーブルの間が空く。
現在ＨＴＭＬとＣＳＳでホームページを作成しています。 それで文とテーブルの間に意図しない空欄ができてしまいます。 この理由と対策を教えてください。 ＨＴＭＬは↓ <div id="contents"> <div id="main"> <h2>会社概要</h2> <table class="table"> <tr> <th>社名</th> <td></td> </tr> <tr> <th>所在地</th> <td></td> </tr> <tr> <th>代表者</th> <td></td> </tr> <tr> <th>設立</th> <td></td> </tr> <tr> <th>資本金</th> <td></td> </tr> <tr> <th>従業員数</th> <td></td> </tr> <tr> <th>関連会社</th> <td></td> </tr> </table> </div><!-- main end --> <div id="totop"> <p><a href="#top">ページのトップへ戻る</a></p> </div><!-- totop end --> </div><!-- contents end --> です。 この会社概要<h2>と<table>の間に十数行の空欄ができます。 ＣＳＳを取り除いてＨＴＭＬだけにしても、こう表示されます。 ご回答お願いします。
- ベストアンサー
- HTML
- 初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません メニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。 縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。 ・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- HTML
- スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
- フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- <ul>タグでのリストの使い方
こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください～ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>
- ベストアンサー
- HTML
- WEBサイト作成時ヘッダーで読込が反映されない部分
ヘッダー部分について質問させていただきます。 一旦、サイトをDW（ドリームウィーバーCS6）やHPB（ホームページビルダー14）で読み込んで、デスクトップに保存後、確認すると、この部分は何故か表示されていませんでした。データとしても、その後は表示されなくなったようです。 この理由が分かりません。 <!-- #BeginLibraryItem "/Library/header.lbi" -->～<!-- #EndLibraryItem -->が原因だとは推測がつきます。詳しい方がいましたら、よろしくお願いします。 念の為に、下記に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=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <meta name="Keywords" content="キーワード"> <meta name="Description" content="キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base1.css"> <script type="text/javascript" src="util.js"></script> <script src="swfobject_modified.js" type="text/javascript"></script> </head> <body id="home"> <div id="topmess"><p><strong>ストロング</strong></p></div><!-- #BeginLibraryItem "/Library/header.lbi" --><div id="header"> <h1><a href="https://www.google.co.jp/">題名</a></h1> <ul> <li id="top"><a href="https://www.google.co.jp/">1</a></li> <li id="com"><a href="https://www.google.co.jp/">2</a></li> <li id="pro"><a href="https://www.google.co.jp/">3</a></li> <li id="con"><script type="text/javascript">mailwrite()</script></li> </ul> </div><!-- #EndLibraryItem --><div id="main" class="clearfix"> <table> <tbody> <tr> <td style="text-align:left;"><a href="http://www.10.jpg" target="_parent"><img src="side_coupon04.jpg" width="197" height="98" alt="4"></a></td> <td style="text-align:center;"><a href="http://www.20.jpg" target="_parent"><img src="side_coupon05.jpg" width="197" height="98" alt="5"></a></td> <td style="text-align:right;"><a href="http://www.30.jpg" target="_parent"><img src="side_coupon06.jpg" width="197" height="98" alt="6"></a></td> <td style="text-align:right;"><a href="http://www.40.html" target="_parent"><img src="side_coupon07.jpg" width="197" height="98" alt="7"></a></td> </tr> </tbody> </table> <br> <br> <img src="pro_img14.jpg" width="791" height="80" alt="TEL" class="btmgn20"> <p><font color="BLUE" size="10">TEL: 0123-456-789</font></p><br> <img src="pro_img11.jpg" width="791" height="150" alt="8" class="btmgn20"><br> <img src="pro_img9.jpg" width="791" height="367" alt="9" class="btmgn20"><br> <table> <tbody> <tr> <td style="text-align:left;"><a href="https://www.google.co.jp/" target="_parent"><img src="img12.jpg" width="395" height="120" alt="A"></a></td> <td style="text-align:right;"><a href="https://www.google.co.jp/" target="_parent"><img src="img13.jpg" width="395" height="120" alt="B"></a></td> </tr> </tbody> </table> </div> <!-- #BeginLibraryItem "/Library/footer.lbi" --><div id="footer"> <div id="ft"> <div class="leftarea"> <h3>見出し3</h3> <p>住所<br /> TIME 1：30～24：40<br /> ※<br /> TEL：0123-456-789<br /> FAX：0123-456-789 </p> </div> <div class="rightarea"> <ul> <li class="fst"><a href="https://www.google.co.jp/">8</a></li> <li><a href="https://www.google.co.jp/">9</a></li> <li><a href="https://www.google.co.jp/">10</a></li> <li><script type="text/javascript">mailwrite()</script></li> </ul> <address>コピーライト</address> </div> </div> </div><!-- #EndLibraryItem --> <script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script> </body> </html> CSS /* ------------------------------------------------------------------------------------------------------------ 1. Normalize (No need to edit) -------------------------------------------------------------------------------------------------------------*/ html, body, div, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre,img, ol, ul, li, dl, dt, dd, span, abbr, acronym, address, cite, code, del, dfn, em, ins, kbd, q, samp, strong, sub, sup, var, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, applet
- ベストアンサー
- ホームページ作成ソフト
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> <h2>page1</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab"> <li><a href="#page1"><span>page1を選択中</span></a></li> <li><a href="#page2"><span>page2</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> <div id="page2"> <h2>page2</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab2"> <li><a href="#page1"><span>page1</span></a></li> <li><a href="#page2"><span>page2を選択中</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- HTML、css IEとFireｆoxの違い
初めまして。 質問させて下さい。 HTMLは一年くらい使っているのですが、今回初めてcssに挑戦してみました。 IEで確認しながら作って完成したものを、FireFoxで見てみたら崩れていてガッカリ・・・。 ちょっと調べてみたのですがpaddingやmargin、float等がよくないとか・・・。 それらを全部消してみたのですが、やはりIEとFFで表記が違っていて困っています。 どなたか助言を下さいm(_ _)m ソースは以下の通りです。 少々表記が汚いのはご容赦下さい。 -------------------------------------------------------------------- <html> <head> <style type="text/css"> <!-- body{width:700; } li{border-bottom:solid #9475FF 1px; list-style-type:none; margin:0 0 0 0; } ul{margin:0 0 0 0;} h1{font-size:13; text-decoration:none; padding:0 0 0 0; margin:0 0 0 0; color:6000FF; } h2{font-size:16; text-decoration:none; padding:0 0 0 0; margin:0 0 0 0; color:red; } --> </style> </head> <body> <table with="464" height="140" border="0" cellpadding="0"> <tr> <td><img src="" width="140" height="140"></td> <td width="2"></td> <td width="90" valign="bottom"> oooooo <div id="rink"> <ul> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> </ul> </td> <td width="2"></td> <td><img src="" width="140" height="140"></td> <td width="2"></td> <td width="90" valign="bottom"> oooooo <div id="rink"> <ul> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> </ul> </td> </div> </tr> </table> </html> ------------------------------------------------------------ 困っている点としましては、 1. IEでは画像のすぐ横に文字が来るのにＦＦでは離れてしまっていること、 2. text-decoration:none;にしているのにFFでは下線が表記されてしまうことです。 どうぞ宜しくお願い致します。 初心者なのでわかりやすく説明して頂けますと助かります。
- 締切済み
- CSS
- 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに
以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー フッターが崩れてしまいます。ie6.0 ie7.0 にて（ie8.0 firefox3）では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-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=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">
- ベストアンサー
- ホームページ作成ソフト
