楽天のchromeでの表示

Question

お世話になります。

楽天の表示の部分の質問です。

https://item.rakuten.co.jp/〇〇（店舗ID）/4001-2/
なのですが、chromeで表示させるとヘッダーに被せている
画像（https://www.rakuten.ne.jp/gold/〇〇（店舗ID）/brand004/image/brand0040010016.jpg）が
上と右に1pxずつズレている感じがします。

IEだとぴったり収まっています。

原因がわからないのですが
対処方法はありますでしょうか？

よろしくお願い致します。

Answer

ECマスターズの田中です。

ブラウザごとによるHTMLの解釈の微妙な違い、
特に、の横幅が952pxと認識されていることに
原因があるのではないかと考えておりますが、

ページの構造が複雑になっている関係で、
原因の特定が非常に困難となっております。

原因及び対策を探るためにお時間をいただく必要がございますので、
今しばらくお待ちいただきますようお願いいたします。

Answer

ECマスターズの田中です。

ヘッダーにかぶせている画像が1pxズレる件について、
お時間をいただいていること、
また、未だ解決に至っておらず、大変申し訳ありません。

原因を特定するために、さらにお日にちをいただく必要がございますので、
恐縮ではございますが、今しばらくお待ちいただきますようお願いいたします。

万が一お急ぎの場合は、お手数ですが返信にてお知らせください。
何卒よろしくお願いいたします。

Answer

お手数をお掛けしております。

自分でやっていてどうしても行き詰ってしまい...。

よろしくお願い致します。

Answer

ECマスターズの田中です。

お待たせいたしました。

ブラウザごとの仕様の違いが原因で、
ズレが発生していることがわかりました。

ミカン星人さんのショップの、
ヘッダーに被せている画像（以降、ヘッダー画像と記載）は、
PC用販売説明文の左上端を原点として、移動量を指定して設置されております。
（原点から、上に785px、左251px移動）

そのように移動させた後の位置がズレている、ということは、
PC用販売説明文の左側にある要素に原因がある可能性があるため、
詳しく調べたところ、

レフトナビの左にある２つの空白のタグが、
Chromeでは横幅6px、IEでは横幅約5.4pxとそれぞれ認識されており、
合計および端数の処理行った結果、1pxの誤差が出ていることが
わかりました。

小数点のある状態で正確な座標を管理するのは非常に困難ですので、
整数で管理されているChromeに合わせた上で、
販売説明文の左側にある要素の横幅を整えていただきますよう
お願いします。

また、レフトナビの内容も、
１行のセルがそれぞれ横幅10px・215px指定なのに
表全体の横幅215pxと指定されており、
結果として実質の全体横幅が221pxとなった状態で
ページのレイアウトが組まれている、という状況であり、
ブラウザの解釈違いによるズレが非常に発生しやすい構造となっております。

左側に余白がほしいという理由であれば、
tableタグを使わずに、スタイルシートの余白指定（margin,padding）を利用して
余白をご設定いただくことをオススメします。
（他モールのレイアウトとの兼ね合いなどがある場合は、その限りではありません）

以下、具体的な方法をご案内します。
内容にソースの削除を含みますので、
変更前の内容を、コピーや、メモ帳に貼り付けるなどして
正常に表示される状態のバックアップを取っていただきますようお願いします。

最初に、ヘッダーコンテンツの末尾、以降に2箇所含まれる
 
に対して、
 
のように、横幅の指定を加えてください。

次に、レフトナビの 〜  を囲む
TABLE,TBODY,TR,TD それぞれの開始・終了タグを削除してください。

最後に、
https://www.rakuten.ne.jp/gold/mitsubachi-road/css/style.css
にて指定されている #nav に対するスタイルシートを、
下記にご変更いただければ結構です。

= この下の行から ====================
#nav {
    width: 215px;
    margin-left: 5px;
    box-sizing: border-box;
}
= この上の行まで ====================

「position:absolute;」を利用して、要素を移動するレイアウト方法は、
非常にズレが発生しやすくなっております。
今回のようなトラブルを早急に解決、および予防するためにも、
ページの構造を予め把握していただきますようお願いします。

また、タグを利用した余白設定のように、
ブラウザの初期値に任せたレイアウト方法は、
ブラウザごとの見た目の違いが出やすくなっております。
構造をシンプルにして把握や修正を行いやすくするためにも、
レイアウト目的や、未指定要素のあるHTMLタグはなるべく削除して、
スタイルシートに置き換えていただきますようお願いします。

たとえば、具体的な対策にて、
 
のように横幅指定を加えてほしい、と申し上げましたが、
本来であれば、このセル自体を削除の上、
スタイルシートで余白調整していただく方が理想的です。
（ページ全体のレイアウトに影響がでる可能性があるため、
　取り急ぎの安全策として横幅指定をご案内しております）

最後に、今回の件とは直接関係ありませんが、
ページの中に、 つまり「id="rakuten"」が
複数含まれていることを確認いたしました。

ID属性は、ページ内で重複しないことが原則となっております。
重複した場合でも、ページの表示にただちに影響はありませんが、
重複していないことを前提とした仕組みに
想定外のトラブルが発生する可能性がございます。

rakuten_header
rakuten_navi
など、ページ内で重複することの無いようにご設定をお願いします。

Answer

返信遅くなりました。

増税対応が思いのほか、時間を取られてしまったのと
自分のスキル不足により文章を理解するのに少々時間を取られてしまいました。

的確なご指摘誠にありがとうございます。

修正致しまして、ズレが解消されました。

ありがとうございます！

HTMLに対するスキル不足を露呈する形になってしまい
お恥ずかしい限りです...。

100％理解しきっていない部分はあるのですが
わからない部分は別途質問させて頂きます。

なお、ID重複はNGとの事なのですが
重複している「id」を「class」に単純に変更してしまって問題でしょうか？

あまり深く考えず「id」を付けていたもので...。

よろしくお願い致します。

Answer

ECマスターズの田中です。

返答が遅れてしまい、大変申し訳ありません。
改めて内容を確認の上、ご返信いたしますので
今しばらくお待ちいただきますようお願いいたします。

Answer

ECマスターズの田中です。

> なお、ID重複はNGとの事なのですが
> 重複している「id」を「class」に単純に変更してしまって問題でしょうか？

単純にご変更いただくこと自体は結構なのですが、
関連するスタイルシートやJavaScriptの記述も
あわせてご変更いただく必要がございます。

取り急ぎ動作はいたしますので、
下手に変更することによる表示崩れが
発生するおそれがある場合は、
そのままご利用いただくのも一つの判断であるかと思いますが、

今後、ページにさらなる改善を加えていく予定でしたら、
なるべく、スタイルシート・JavaScriptと合わせてのご変更を
早めの段階で行っていただくことをオススメします。

Answer

ありがとうございます。

変えてしまって動作が不安定になるのも不安なので
もう少し、知見を深めてから取り掛かりたいと思います。

ID重複がNGというのを初めて知ったので
良い勉強となりました。

これからもよろしくお願い致します。