電子書籍の厳選無料作品が豊富！

HTML CSS 文字化け

解決済

  • 質問者：pippi_
  • 質問日時：
  • 回答数：3件

Mac ProとGoogle ChromeとSublimeTextで
HTML-CSSホームページを作成しています。
自宅のMac Proのパソコンだとしっかり作動し
問題ないのですが、
IO-DATAとインターネットエクスプローラを使い
表示しようとすると文字化けが起こります。
下記に添付している1枚目の画面は
UTF-8でIOの方でも問題無く表示されるのですが
2枚目(2〜4枚目までほぼ同等の作り)は
UTF-8で文字化けしてしまいます。
文字コードを消して、エンコードから日本語自動選択にすると表示されるのですが、何が起こっているのでしょうか？ご回答いただけると幸いです。どうぞよろしくお願いします。

以下にタグページ1、2枚目を添付します。
文章やタイトルは省略させた形にしています

1枚目html
<!DOCTYPE html>
<html>
<head>
<title>題名 </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="untitledEX.css">
<style type="text/css">
#photo {
width: 1440px;
height: 900px;
margin: 0 auto;
text-align: left;
overflow: hidden;
position: absolute;
top: 0px;left:0px
}

#photo img {
top: 0;
left: 0;
position: absolute;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></ …
<script type="text/javascript">
$(function(){
var setImg = '#photo';
var fadeSpeed = 1600;
var switchDelay = 5000;

$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
</script>
</head>
<body>

<div id="photo">
<img src="img_2404.jpg" width="1440" height="800" alt="">
<img src="img_2575.jpg" width="1440" height="800" alt="">
<img src="img_2321.jpg" width="1440" height="800" alt="">
<img src="img_2592.jpg" width="1440" height="800" alt="">
<img src="img_4167.jpg" width="1440" height="800" alt="">
</div>
<br>
<h1></h1>
<h2>
副題<br>
副題
</h2>

<div style="background-color: black;width: 1px;height: 830px;
position:absolute; top: 800px;left:650px; "></div>
<div style="background-color:black;width:860px;height:1px;
position:absolute;top: 1545px;left:580px;"></div>
<div class="pho"><img src="img_4176.png" width="320"height="550"></div>
<div class="p1">
文章
</div>
<a href="index2.html"><p style="position:relative; "><div class="photo2"><img src="img_2611.jpg" width="350" height="200"></div><br/>
<span style="position:absolute;top:1760px;left:205px;width:145px ">
<div class="pp1"> リンク1</div></span></p></a>

<a href="index3.html"><p style="position:relative; "><div class="photo3"><img src="img_2455 3.jpg" width="350" height="200"></div><br/>
<span style="position:absolute;top:1760px;left:650px;width:145px ">
<div class="pp2">リンク2</div></span></p></a>

<a href="index4.html"><p style="position:relative; "><div class="photo4"><img src="img_2811.jpg" width="350" height="200"></div><br/>
<span style="position:absolute;top:1750px;right:300px;width:145px ">
<div class="pp3">リンク3</div></span></p></a>

<div class="top">大タイトル</div><div class="top2">大タイトル</div>




</body>
</html>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2枚目html
<!DOCTYPE html>
<html>
<head>
<title>題名 </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="untitled2.css">

<body>
<h1>大タイトル</h1>
<h2>中タイトル</h2>

<div class="p1">前置き</div><br><br>
<h3>小タイトル</h3>
<img src="img_2321.jpg" width="700" height="600">
<div class="p2">
文章
</div>
<div class="box1">文章</div>
<br><br><br><br><br><br>
<h4>小タイトル</h4>
<div align="right"><img src="img_2645.jpg" width="700" height="600"></div>
<div class="p3">
文章
</div><br><br><br><br><br>
<h5>小タイトル</h5>
<img src="img_2477.jpg" width="700" height="600">
<div class="p4">
文章
</div>
<div class="box3">
文章
</div><br><br><br><br><br>
<div class="container">
<a href="indexEX.html" class="btn-animation-02"><span>ホームに戻る<span></a>
</div>



</body>
</html>

質問者からの補足コメント

  • こちらにCSSをのっけます
    1枚目CSS
    @charset "UTF-8";
    body{background: linear-gradient(45deg,);color:#cccccc;}
    <style>{color: black;font-size: 20px}


    .photo p {position: absolute;
    color: white;
    font-weight: bolder;
    top: 0;left: 0}


    h2 {position: absolute;
    color:#222222;
    top: 850px; left:195px;
    font-size:52px;
    font-family:'arial black'}
    h1{position:absolute;top:779px;left:0px;width:649.999px;height:830px;

      補足日時：2020/02/06 21:59
    通報する

  • background: linear-gradient(-35deg,#ffffff,80%, #bdc3c7)fixed; }

    .pho{position:absolute;top:1060px;left:200px }
    .p1{color:#222222;font-size:20px;position:relative;
    top:850px;left:720px;
    line-height:40px ;
    font-family:'MS Mincho' ,'Meiryo','Meiryo UI'
    }


    .start{color: black;
    font-size: 28px;
    position: absolute;
    top: 895px}

      補足日時：2020/02/06 22:01
    通報する

  • .photo2{position:absolute;
    top:1700px;left:100px }
    .photo3{position:absolute;
    top:1700px;left:550px }
    .photo4{position:absolute;
    top:1700px;right:100px }

    .pp1{font-size: 70px;
    color:white;
    font-weight:bolder; }
    .pp2{font-size: 60px;
    color:white;
    font-weight:bolder;white-space:nowrap; }
    .pp3{font-size: 50px;
    color:white;
    font-weight:bolder; white-space:nowrap;
    text-align:center; }

      補足日時：2020/02/06 22:03
    通報する

  • .top{font-size:100px;position:absolute;top:20px;right:20px;font-weight:bolder;
    z-index:10;color:white;border-bottom:solid 4px #00cc66; }
    .top:after{position:absolute;content:"";display:block;
    border-bottom:solid 4px red;bottom:-4px;width:50%; }
    .top2{font-size:100px;position:absolute;top:160px;right:20px;font-weight:bolder;
    z-index:10;color:white;border-bottom:solid 4px #00cc66; }

      補足日時：2020/02/06 22:05
    通報する

  • .top2:after{position:absolute;content:"";display:block;border-bottom:solid
    4px red;bottom:-4px; width:50%}
    #photo{z-index:2 }
    ___________1枚目CSS終了___________________

      補足日時：2020/02/06 22:06
    通報する

  • 2枚目CSS
    @charset "UTF-8";
    h1 {
    position: relative;
    left: 450px;
    display: inline-block;
    padding: 0 55px;
    font-size:60px;
    }

    h1:before{
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 90px;
    height: 5px;
    background-color: green ;}
    h1:after{content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 90px;
    height: 5px;
    background-color: red;
    }

      補足日時：2020/02/06 22:37
    通報する

  • h1:before {left: -40px;}
    h1:after {right: -40px;}
    h2{position: absolute;
    left:600px;
    top:110px;
    font-family:'cursive','Comic Sans MS';
    font-size: 30px }

    .p1{position:relative;
    font-size: 29.5px;
    text-align:center;
    top: 47px }

    h3 {
    padding: 0.4em 0.5em;
    color: #494949;
    background: #fffaf4;
    border-left: solid 5px #ffaf58;
    border-bottom: solid 3px #d7d7d7;
    font-size:25px
    }

      補足日時：2020/02/06 22:38
    通報する

  • .p2{position: absolute;
    right:0px;top:420px ;
    font-size:19px;
    line-height:40px}
    .box1{padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
    position: absolute;
    right: 220px;
    top:820px ;font-size:23px}
    .box1 p {margin: 0; padding: 0;}
    h4 {padding: 0.4em 0.5em;
    color: #494949;
    background: #fffaf4;

      補足日時：2020/02/06 22:40
    通報する

  • border-left: solid 5px #ffaf58;
    border-bottom: solid 3px #d7d7d7;
    font-size:25px
    }
    .p3{position: absolute;
    left:30px;top:1240px ;
    font-size:19px;
    line-height:40px
    }
    .box2{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
    position: absolute;
    left: 100px;
    top:1600px ;font-size:23px
    }

      補足日時：2020/02/06 22:41
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

ファイルそのものの文字コードは？

    • good
    • 0
    • 件
通報する
この回答へのお礼

IODATA インターネットエクスプローラーから
エンコードでページの文字を見たらUTF-8になってました
ファイルの文字コードはまた別ですか？

通報する
お礼日時：2020/02/06 23:06

No.3

＞エンコードでページの文字を見たらUTF-8


当たり前ですね
meta charsetで指定してますもん。
そのファイルの文字コードは？

分かりずらいのでCSS外してみても良いと思います。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： naokita
  • 回答日時：

１～５行目を、以下の５行のように変更



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>題名 </title>


保存時に、UTFで保存
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！やってみます！
1枚目はできて2枚目ができない理由はわかりますか？

通報する
お礼日時：2020/02/06 22:42

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報