Yahoo!ショッピングで使えるHTMLタグ （共通版）-前編-
HTMLでウェブサイトを構築するにはさまざまなタグが必要です。HTMLのタグとは文書の表示形式を指定するための記号のようなものです。
HTMLの基本についてはこちらの記事で紹介しています。
HTMLタグのうち、Yahoo!ショッピングのスマホ版・PC版で使用できるタグは全部で60個ほどあります。
今回は、スマホ版とPC版で共通して使用できるタグご紹介の前編です。
ウェブサイトの最下部でこのようなデザインをよく目にすると思います。
前編では、このデザインを作成するためのタグについてご紹介します。
HTMLを使わずにストアページ制作したいストア様はこちらをチェック✓
▶開店したてのお店もにぎわいのあるお店に変身｜B-Spaceでストアページを作ってみよう！（ストアトップページ編）
aタグ：リンクを貼る
先ほどのイメージの中の「Yahoo!ショッピング」などのリンクは多くのウェブサイトで使用されています。
ウェブサイトを作る際には必ず使用したくなる機能の一つです。
このように、リンクを埋め込むには「aタグ」が必要です。
aタグは以下のように記述します。
【aタグの書き方】
<a href=”リンク先のURL”>ウェブサイト上に表示する文字列</a>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
href属性はリンク先のURLを指定する属性で、href属性の値としてユーザーを遷移させたいURLをダブルクォーテーション（” ”）で囲って記述します。
<a>〜</a>間に記述したコンテンツは、リンクが書かれている部分に表示される文字列です。
【例】
<a href=”https://shopping.yahoo.co.jp/”>Yahoo!ショッピング</a>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
brタグ：改行する
また、以下の文章のようにウェブサイト上で改行するためには、「brタグ」が必要です。
brタグを用いれば標準テキスト内だけでなくボタンの中に表示する文字などさまざまな場面で改行できます。
【brタグの書き方】
改行前の文<br>
brタグは終了タグおよびコンテンツを持ちません。コンテンツとは開始タグと終了タグで囲んだ文書の内容のことです。（※）
改行を入れたい所に開始タグ<br>のみを記述するだけでウェブサイト上で改行できます。
【例】
お客様の声でYahoo!ショッピングは成長します。<br>
こちらの投稿に返信はしておりませんが、<br>
Yahoo!ショッピングスタッフがすべて拝見します。<br>
以下のようにつなげて記述しても同じ表示になります。
【例】
お客様の声でYahoo!ショッピングは成長します。<br>こちらの投稿に返信はしておりませんが、<br>Yahoo!ショッピングスタッフがすべて拝見します。<br>
（※）コンテンツや開始タグ、終了タグについてはこちらの記事で紹介しています。
pタグ：一段落を囲む
先ほどのイメージの中では文章を一つの段落として扱っています。
このようにウェブサイト内のテキストに段落をつけるには「pタグ」が必要です。
【pタグの書き方】
<p>一段落として扱う文章</p>
開始タグ<p>と終了タグ</p>で文章を囲むだけで段落が作れます。
【例】
<p>お客様の声でYahoo!ショッピングは成長します。<br>こちらの投稿に返信はしておりませんが、<br>Yahoo!ショッピングスタッフがすべて拝見します。</p>
また、以下のように記述しても同様に表示できます。
<p>
一段落として扱う文章
</p>
hrタグ：水平線を引く
ウェブサイトの末端でよく見るこちらの水平線は、「hrタグ」を使うことで表現できます。
【hrタグの書き方】
<hr>
hrタグは単独で使用し、終了タグも持ちません。
また、属性を与えることでウェブページの（表示可能な）横幅に対して何%の長さの水平線を表示するかも指定できます。
【例】<hr width=”90%”>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
まとめ
今回は、Yahoo!ショッピングのスマホ版・PC版の両方で使用できるHTMLタグについてご紹介しました。
これらのタグはYahoo!ショッピング内だけでなく他のウェブサイトでも多く利用されています。
次回の後編では表の作り方などについてご紹介します。
B-Spaceの各種サービスを使えば、誰でも簡単にHTMLを生成できます。
HTML作成が難しいと感じられる方はぜひご活用ください。
