HTML教えてください

Question

お世話になります。
下記の商品ページのHTMLの作りを真似しようとしているのですが、分かりづらいです。
https://item.rakuten.co.jp/oa-plaza/t_b35-i3/

この商品ページの「商品特徴」文字以降のパーツの説明とパーツのアイコンがある部分作りたいのと、「商品特徴」の文字のすぐ下のパーツアイコン画像をクリックすると、そのパーツの説明部分に飛ぶ機能を付けたいのですがわかりづらいです。
教えていただけますでしょうか？
このページは楽天GOLDを利用しているのでしょうか？
普通の商品ページでは作るのが無理なのでしょうか？
かなり困っています。
何卒宜しくお願いいたします。

Answer

ECマスターズの伊藤です。

> このページは楽天GOLDを利用しているのでしょうか？
> 普通の商品ページでは作るのが無理なのでしょうか？

参考サイトでは、一部GOLDをご利用頂いているようですが、
GOLDを利用いただかなくても、ご対応いただくことができます。

クリックしたときにページ内を移動する動作の基本は
下記の通りとなっております。

クリック元
＝＝＝＝＝
サンプル
＝＝＝＝＝
リンク先
＝＝＝＝＝

＝＝＝＝＝
※クリック元の#以降、リンク先のname、idを揃えてください

参考サイトでは、アイコンを横並びで表示させるなど
レイアウトをCSSで行っておりましたので、
CSSも合わせて下記に記述しております。

アイコンの数に合わせて
＝＝＝＝


アイコンに表示されているテキスト

＝＝＝＝
を追加して、ご登録くださいませ。


＝＝＝＝＝＝ 以下を商品説明文等に登録してください ＝＝＝＝＝




アイコンに表示されているテキスト



アイコンに表示されているテキスト







https://item.rakuten.co.jp/【店舗ID】/【商品ID】/#w10　をクリックしたときのリンク先


https://item.rakuten.co.jp/【店舗ID】/【商品ID】/#ssd　をクリックしたときのリンク先


#product_main,
#product_main * {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	list-style: none;
}
#product_main a {
	color: #333;
	line-height: 1.3;
}
#product_main ul {
    padding-bottom: 90px;
}
#product_main ul li a {
    font-size: 14px;
    display: block;
    width: 100px;
    height: 100px;
    background: #eee;
    float: left;
    margin: 0 5px 5px 0;
    text-align: center;
    padding: 10px 0px 5px;
    line-height: 1.1;
    transition: 0.3s;
}
#product_main ul li a:hover {
    margin: -3px 5px 8px 0;
    box-shadow: 0px 1px 3px 0px rgba(51, 51, 51, 0.6);
    background: rgba(238, 238, 238, 0.5);
}
#product_main ul li a img {
    margin: 0 5px 5px 5px;
}
#product_main a.anchor{padding-top: 55px;display: inline-block;}
#product_main iframe { width: 100%;  }