楽天市場の謎と答え(その2)DOCTYPE宣言が無い化石モール

楽天市場の謎と答え(その2)DOCTYPE宣言が無い化石モール

WEBデザインの観点から見たネットショッピングモール「楽天市場」について書きます。

前回に引き続き、今回は「その2」です。

楽天市場の謎と答え(その1)なぜ縦に長い?なぜ画像貼りまくり?

2016.09.20

DOCTYPE宣言が無い

楽天市場の店舗サイトのコードを見ると、驚いたことにHTML冒頭に必須の要素である「DOCTYPE宣言」がありません。

無いんですよ、DOCTYPE宣言が!
なんということでしょう。

「DOCTYPE宣言」とはこういうやつです(HTML5の場合)↓

<!DOCTYPE html>

HTMLの知識が有る人は分かると思いますが、DOCTYPE宣言が無いサイトなんて、古い個人の趣味サイトぐらいしか考えられないと思います。
でも、楽天市場は全ての店舗サイトが無いんです。

WEBデザインの観点から見ると、楽天市場は日本最大級の化石モールです。

他のネットショップ運営サービスは?

ちなみに、楽天以外のネットショップ運営サービスは、どこもDOCTYPE宣言が有ります(それが当たり前です)。

ざっと主要サービスのHTMLのバージョンを見てみると、

  • yahooショッピング:HTML4.01
  • カラーミーショップ:XHTML1.0
  • Amazon:HTML5
  • BASE:HTML5
  • STORES JP:HTML5

となってます。
上からバージョンが古い順に並べてます。
最新がHTML5です。

これ見ると、Yahooの「HTML4.01」もどうかと思いますが、楽天はそれ以前のレベルだということです。

DOCTYPE宣言が無いとどうなるか?

では、サイトのコードにDOCTYPE宣言が無いとどうなるか?

少なくとも「HTML4.01」以降のDOCTYPE宣言が有れば、ブラウザ(古いバージョンのIEを除く)は常に最新の描画モード(標準モード)でWEBサイトを表示します。

ところがDOCTYPE宣言が無いと、ブラウザは常に「互換モード」という古い描画モードでの表示となります。

互換モードでは、新しいコードが使えず、CSSによる表示内容が標準モードと違ってきます。
どのくらい違うかは下記サイトを参照してください。

CSSの基本:ブラウザの表示モード

標準モードと互換モードについて:HTMLタグボード

DOCTYPE宣言無しの理由

楽天市場が未だにDOCTYPE宣言無しのサイト構造を維持している最大の理由は、おそらくサイト内で古いコードが横行しているため、互換モードで表示せざるを得ないのだと思います。
標準モードでは古いコードが機能する保証が無いですからね。

しかし、そもそも古いコードが横行している理由は前回に書いたように、

楽天市場の謎と答え(その1)なぜ縦に長い?なぜ画像貼りまくり?

2016.09.20

楽天市場の構造的問題で、これを維持し続ける限りはいつまでたってもDOCTYPE宣言無しの状態を続けざるを得ません。
悪循環です。

今の古い遺物のような店舗サイトを、最新のコードに準拠したサイトに変更するには、よっぽどの荒療治が必要でしょうね。

たぶん楽天のWEB担当者は頭を抱えているのでは?

余談ですが

楽天の担当者はともかく、この劣悪環境の中でサイトを運営している店主さんには、お疲れ様ですとしか言いようがないです。

また、楽天の店舗サイト制作を依頼されて、コードを見て驚愕中のコーダーさんにもお疲れ様ですとしか言いようがないですw