- 文字サイズ変更
- 小
- 中
- 大
解決済
スマホフローティングヘッダー 日本語が文字化け CSS
- 相談者：非公開
- 2016/12/06 10:02
スマホの商品ページ・カテゴリページでフローティングメニューを設定しておりますが、
メニュー部分を日本語にすると自身のアイフォンで文字化けして出てきてしまい日本語設定にできません。
(下のHTMLでいうとこの部分です。
<div class="hd09 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%B8+%E4%B8%8A%E4%B8%8B/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd09-in">ジャージ</div></a></div>
)
CSS・HTMLを記載します。お忙しいところ恐縮ですが、
文字化けの原因・解決方法をご教授をお願い致します。
--------------------------------ヘッダーHTML部分--------------------------------
<html><head>
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/css/sp_head.css?20161206">
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/css/sp_response.css">
</head>
<body>
<div class="header clearfix">
<div class="hd01 clearfix"><div class="hd01-in"><a href="http//www.rakuten.ne.jp/gold/SHOP-URL/ns.html" target="_parent"><img src="http//www.rakuten.ne.jp/gold/SHOP-URL/images/smpmenu/nostyle_sp_head.png" border="0" width="100%"></a></div></div>
<div class="hd02 clearfix"><div class="hd02-in"></div></div>
<div class="hd03 clearfix"><div class="hd03-in"><a href="http://www.rakuten.co.jp/" target="_parent"><img src="http//www.rakuten.ne.jp/gold/SHOP-URL/images/smpmenu/rakuten_b.png" border="0" width="100%"></a></div></div>
</div>
<div class="header02 clearfix">
<div class="hd09 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%B8+%E4%B8%8A%E4%B8%8B/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd09-in">ジャージ</div></a></div>
<div class="hd06 clearfix"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/?s=1&i=1#risFil" target="_parent"><div class="hd06-in">BAG etc...</div></a></div>
<div class="hd07 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/STAN+SMITH/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd07-in">STAN SMITH</div></a></div>
<div class="hd08 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/Ferrari/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd08-in">FERRARI</div></a></div>
</div>
</body></html>
--------------------------------sp_head CSS部分--------------------------------
@charset "UTF-8";
html{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size-adjust: 100%;font-size-adjust: 100%;}
a:hover img{
border: none;
opacity: 1.0;
filter: alpha(opacity=100);
transition-duration:0.5s;
}
a img{
border: none;
opacity: 1.0;
filter: alpha(opacity=100);
transition-duration:0.5s;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img { vertical-align:bottom; }
.onmouse{
background-color: #333333;
cursor: pointer;
}
body, div, ul {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
transition-property:width, height, left, top, bottom, right, margin, padding, font-size, margin-top, img;
transition-duration:0.5s;
}
html{ color: #666;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.item{
margin-bottom:15px;
float:left;
}
/* =Clearfix
-------------------------------------------------------------- */
.clear {
clear: both;
}
/*float clear*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display:inline-block;
min-height:1%; /* for IE 7*/
}
/* Hides from IE-mac \*/
*html .clearfix {
height: 1%;
}
.clearfix {
display:block;
}
.clearfix:before, .clearfix:after {
display: table;
}
.clearfix {
*zoom: 1;
}
/*
-------------------------------------------------------------- */
body {
color: #555;
font-size: 14px;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin:0;
padding:0;
}
.topix {
width: 994px;
height:auto;
margin:0;
margin-left:15px;
padding-bottom:50px;
margin-bottom:50px;
float:left;
text-height:auto;
line-height:0;
}
.header{
width:100%;
margin:0;
padding:0;
height:50px;
background-color:#000000;
margin-bottom:1px;
opacity:1.0;
}
.header02{
width:100%;
margin:0;
padding:0;
height:auto;
}
.header02 a {
text-decoration:none;
}
.tencho{
width:280px;
position:fixed;
right:5px;
top:88px;
margin:0;
padding:0;
height:auto;
}
.hd01{width:95.6%; min-width:180px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; }
.hd02{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}
.hd03{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}
.hd01-in{width:180px; height:28px; padding: 0px;}
.hd02-in{width:28px; height:28px; padding: 0px;}
.hd03-in{width:28px; height:28px; padding: 0px;}
.hd06,
.hd07,
.hd08,
.hd09{ float: left; width: 25%; box-sizing: border-box;}
.hd06-in,
.hd07-in,
.hd08-in,
.hd09-in{margin-left:1px; padding: 8px; background-color:#000000; text-align:center; color:#fff; opacity:1.0; font-size:14px;}
よろしくお願いいたします。
メニュー部分を日本語にすると自身のアイフォンで文字化けして出てきてしまい日本語設定にできません。
(下のHTMLでいうとこの部分です。
<div class="hd09 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%B8+%E4%B8%8A%E4%B8%8B/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd09-in">ジャージ</div></a></div>
)
CSS・HTMLを記載します。お忙しいところ恐縮ですが、
文字化けの原因・解決方法をご教授をお願い致します。
--------------------------------ヘッダーHTML部分--------------------------------
<html><head>
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/css/sp_head.css?20161206">
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/css/sp_response.css">
</head>
<body>
<div class="header clearfix">
<div class="hd01 clearfix"><div class="hd01-in"><a href="http//www.rakuten.ne.jp/gold/SHOP-URL/ns.html" target="_parent"><img src="http//www.rakuten.ne.jp/gold/SHOP-URL/images/smpmenu/nostyle_sp_head.png" border="0" width="100%"></a></div></div>
<div class="hd02 clearfix"><div class="hd02-in"></div></div>
<div class="hd03 clearfix"><div class="hd03-in"><a href="http://www.rakuten.co.jp/" target="_parent"><img src="http//www.rakuten.ne.jp/gold/SHOP-URL/images/smpmenu/rakuten_b.png" border="0" width="100%"></a></div></div>
</div>
<div class="header02 clearfix">
<div class="hd09 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%B8+%E4%B8%8A%E4%B8%8B/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd09-in">ジャージ</div></a></div>
<div class="hd06 clearfix"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/?s=1&i=1#risFil" target="_parent"><div class="hd06-in">BAG etc...</div></a></div>
<div class="hd07 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/STAN+SMITH/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd07-in">STAN SMITH</div></a></div>
<div class="hd08 clearfix"><a href="http://search.rakuten.co.jp/search/inshop-mall/Ferrari/-/f.3-p.1-s.1-sf.0-sid.307439-st.A-v.3" target="_parent"><div class="hd08-in">FERRARI</div></a></div>
</div>
</body></html>
--------------------------------sp_head CSS部分--------------------------------
@charset "UTF-8";
html{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size-adjust: 100%;font-size-adjust: 100%;}
a:hover img{
border: none;
opacity: 1.0;
filter: alpha(opacity=100);
transition-duration:0.5s;
}
a img{
border: none;
opacity: 1.0;
filter: alpha(opacity=100);
transition-duration:0.5s;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img { vertical-align:bottom; }
.onmouse{
background-color: #333333;
cursor: pointer;
}
body, div, ul {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
transition-property:width, height, left, top, bottom, right, margin, padding, font-size, margin-top, img;
transition-duration:0.5s;
}
html{ color: #666;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.item{
margin-bottom:15px;
float:left;
}
/* =Clearfix
-------------------------------------------------------------- */
.clear {
clear: both;
}
/*float clear*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display:inline-block;
min-height:1%; /* for IE 7*/
}
/* Hides from IE-mac \*/
*html .clearfix {
height: 1%;
}
.clearfix {
display:block;
}
.clearfix:before, .clearfix:after {
display: table;
}
.clearfix {
*zoom: 1;
}
/*
-------------------------------------------------------------- */
body {
color: #555;
font-size: 14px;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin:0;
padding:0;
}
.topix {
width: 994px;
height:auto;
margin:0;
margin-left:15px;
padding-bottom:50px;
margin-bottom:50px;
float:left;
text-height:auto;
line-height:0;
}
.header{
width:100%;
margin:0;
padding:0;
height:50px;
background-color:#000000;
margin-bottom:1px;
opacity:1.0;
}
.header02{
width:100%;
margin:0;
padding:0;
height:auto;
}
.header02 a {
text-decoration:none;
}
.tencho{
width:280px;
position:fixed;
right:5px;
top:88px;
margin:0;
padding:0;
height:auto;
}
.hd01{width:95.6%; min-width:180px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; }
.hd02{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}
.hd03{width:2.2%; min-width:28px; height:28px; padding: 0px; box-sizing: border-box; float:left; margin-top:10px; padding-right:5px;}
.hd01-in{width:180px; height:28px; padding: 0px;}
.hd02-in{width:28px; height:28px; padding: 0px;}
.hd03-in{width:28px; height:28px; padding: 0px;}
.hd06,
.hd07,
.hd08,
.hd09{ float: left; width: 25%; box-sizing: border-box;}
.hd06-in,
.hd07-in,
.hd08-in,
.hd09-in{margin-left:1px; padding: 8px; background-color:#000000; text-align:center; color:#fff; opacity:1.0; font-size:14px;}
よろしくお願いいたします。
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2016/12/06 11:10
ECマスターズの田中です。
HTMLに、文字コードの指定が含まれておりませんので、
日本語で保存する際に使用した文字コードを、
<head>タグの直後………（省略）………
HTMLに、文字コードの指定が含まれておりませんので、
日本語で保存する際に使用した文字コードを、
<head>タグの直後………（省略）………
- 返信者：非公開（質問者）
- 2016/12/06 11:30
ありがとうございました。
CSSの問題かと勘違いしていました。
HTMLを変更しました。
UTF-8は文字化けしたままでしたがShift_JISにする………（省略）………
CSSの問題かと勘違いしていました。
HTMLを変更しました。
UTF-8は文字化けしたままでしたがShift_JISにする………（省略）………
このフォーラムへの質問は終了しました
質問を検索する