DOM 構造リファレンス¶

DOM 構造とは¶

DOM 構造は、HTML の要素のツリー構造を表します。
スタイルシートを使ったカスタマイズではこの構造を理解する必要があります。

DOM 構造は、サービスの改良のため、将来のバージョンで変更される場合があります。

共通¶

動作に合わせて次のクラスが使われています。

highlighted 選択されている要素を表す
hover マウスポインタが載っている要素を表す
poplink_invisible 表示しない要素を表す

PC向け¶

pc011, pc022, pc033, pc011r, pcgrid 共通¶

<div class="poplink pc011"> <!-- デバイスタイプ名と同じクラス名が入るpc011など -->
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <div class="header"></div>
    <div class="item"> <!-- 繰り返し -->
      <a>
        <div class="item_left">
          <img/>
        </div>
        <div class="item_right">
          <div class="title"></div>
          <div class="summary"></div>
          <div class="any1"></div>
          <div class="any2"></div>
          <div class="any3"></div>
        </div>
        <div class="clear"></div>
      </a>
      <div class="userarea"></div>
    </div>
  </div>
  <div class="poplink_recommend">
    <!-- 省略 -->
  </div>
</div>

クラス userarea の div 要素は、CSS によって表示されないように設定されています。

※ コメントは挿入されません。

pcia¶

<div class="poplink pcia"> <!-- デバイスタイプ名と同じクラス名が入る -->
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <!-- 省略 -->
  </div>
  <div class="poplink_recommend">
    <!-- 省略 -->
  </div>
</div>

クラス poplink_search, poplink_recommend の div 要素は、CSS によって表示されないように設定されています。

※ コメントは挿入されません。

スマートフォン向け¶

sphs, sphs2¶

<div class="poplink">
  <div.class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <div class="item"> <!-- 繰り返し -->
      <a>
        <div class="image_box">
          <img/>
        </div>
        <div class="title"></div>
        <div class="summary"></div>
        <div class="any1"></div>
        <div class="any2"></div>
        <div class="any3"></div>
      </a>
      <div class="userarea"></div>
    </div>
  </div>
  <div class="poplink_recommend poplink_invisible">
    <!-- 省略 -->
  </div>
  <div class="close_button">
    <img />
  </div>
</div>

クラス summary, any1, any2, any3, userarea, poplink_recommend の div 要素は、CSS によって表示されないように設定されています。

※ コメントは挿入されません。

spia¶

<div class="poplink spia">
  <div class="poplink_suggest">
    <div class="word"> <!-- 繰り返し -->
    </div>
  </div>
  <div class="poplink_search">
    <!-- 省略 -->
  </div>
  <div class="poplink_recommend poplink_invisible">
    <!-- 省略 -->
  </div>
  <div class="close_button"><img /></div>
</div>

クラス poplink_search, poplink_recommend の div 要素は、CSS によって表示されないように設定されています。

※ コメントは挿入されません。