Yahoo!ショッピングで使用できるHTMLタグは約60個あり、スマートフォン版のみで使用できるもの、PC版のみで使用できるもの、共通して使用できるものの3つに分類されます。
今回はYahoo!ショッピングのスマートフォン版のみで使用できるタグをご紹介します！
共通で利用できるタグやPC版で利用できるタグの詳細はこちらをご覧ください。
h2タグ：見出し
画像内の赤枠で囲ってある「新着情報」のように、見出しがついているウェブページをよく見ると思います。
このようにウェブページ内で見出しを作るには「h2タグ」を使用します。
Yahoo!ショッピングでは、一番大きい見出しである「h1タグ」は既に商品名やショップ名に割り当てられています。
1ページに使えるh1タグは1つなので、ウェブページ内の見出しには、h1タグの次に大きい見出しであるh2タグを使用しましょう。
【h2タグの書き方】
<h2>見出し名</h2>
【例】
<h2>新着情報</h2>
headerタグ：ヘッダーを作る
ウェブサイト最上部（例の矢印部分）にある、目次やページ情報が記載されている部分をページの「ヘッダー」と言います。
ウェブサイトのヘッダーを作成する際には通常headerタグを利用します（headタグとは別物なので注意！headタグについて詳しくはこちら）。
headerタグや後述するfooterタグはHTML単体では見た目の変化はありません。
しかし、HTMLコードを見やすくする効果があったり、ヘッダー、フッターのデザインをCSSで指定する際には必須と言っても良いほど使用されています。
CSSとはウェブサイトのデザインを指定する専用の言語です。
CSSを使うことで細かく装飾を指定できます。
例のヘッダーではheaderタグとCSSを利用して装飾しています。
CSSについては別途ご紹介します。
【headerタグの書き方】
<header>
ヘッダーに入れたい内容
</header>
ウェブサイト最下部（B-Spaceトップページ下の赤枠）の、著作権や問い合わせ先、住所などが記載されている部分をページの「フッター」と言います。
ウェブページのフッターを作成する際はfooterタグを使用します。
ページのフッターをfooterタグでまとめて扱うことによってコードを見やすくしたりCSSによる装飾を容易にできます。
【footerタグの書き方】
<footer>
ページのフッターに入れたい内容
</footer>
sectionタグ：章・節・項を作る
例の「新着情報」項目のようにまとめて書式を設定している部分には、「sectionタグ」がよく使用されています。
sectionタグもheaderタグ、footerタグ同様、単体ではウェブサイトの見た目に影響を与えません。
しかし、見出しをつけてコンテンツをまとめて扱う場合には大変便利なタグです。
コードを書く上でどの範囲が一つのまとまりなのか一目で確認できますし、見出しによってデザインを変えたいときにCSSでの範囲指定が格段に楽になります。
【sectionタグの書き方】
<section>
1つにまとめで扱いたい内容
</section>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
見出しからその章の中に記載したい内容を<section>〜</section>の間に記載することで1つの章として扱うことができます。
【例】
<section>
〜中略〜
<h2 class=”heading”> 新着情報</span></h2>
〜中略〜
<p>ツールのアップデート情報やメディア紹介情報などを公開いたします。</p>
〜中略〜
<a class=”news–btn” href=”news.html”>
もっと見る
</a>
〜中略〜
</sectionr>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
まとめ
今回は、Yahoo!ショッピングのスマホ版専用で利用できるHTMLタグについてご紹介しました。
このうちのいくつかは直接ウェブサイトの見た目を変えるものではありませんが、どれもHTMLを書くうえでよく利用されるタグです。
今回紹介したタグを組み合わせることでより高度なHTMLをかけるでしょう。
Yahoo!JAPANストアクリエイターProには、タグ記述ミスを防ぐために便利なHTMLタグ確認ツールというものがあります。
HTMLタグ確認ツールにHTMLをペーストするだけで記述ミスを簡単に発見できるのでぜひ利用してみてください！
また、B-SpaceではHTML作成に便利なサービスを数多く提供しています。
B-Spaceをご活用いただければ、より簡単に繁盛店のにぎわいを簡単に作れます！
やっぱりHTMLって難しい・・・
HTMLを勉強している時間はなかなかない・・・
というストア様はぜひ一度B-Spaceをお試しください！
初めてB-Spaceをご利用されるストア様は1カ月の料金が無料になる特典実施中！
お申込みはこちら！
