Yahoo!ショッピングで使えるHTMLタグ （共通版）-後編-
前回はYahoo!ショッピングのスマホ版・PC版の共通タグのうちリンクを挿入するaタグや改行を挿入するbrタグなどを紹介しました。
詳細はこちらをご参照ください。
今回は、Yahoo!ショッピングのスマホ版・PC版の共通タグの第二弾です！
こちらのデザインを実現するためのタグについて見てみましょう。
bタグ：文字を強調する
先ほどのイメージの中の赤枠で囲んである「初期無料特典実施中！」はその下の文字に比べて太くなっていることがわかると思います。
このようにHTMLでは周りの文字に比べてテキストを太くして強調できます。
これには、「bタグ」というものを使用しています。
【bタグの書き方】
<b>強調したい文字</b>
<b>と</b>の開始タグと終了タグで文字を挟む、つまりコンテンツとして強調したい文字を持たせることで、テキストを太くして表示してくれます。
【例】
<b>初期無料特典実施中！</b>
tableタグ：表を作る
例のようにウェブサイト内に表を作るには、「tableタグ」が必要です。
tableタグの扱いは少し複雑なのでまずは記述する際のルールから見ていきましょう。
tableタグの基本ルール
tableタグはthタグ、trタグ、tdタグの3つのタグと一緒に使います。
各タグの役割
| タグ | 書き方 | 意味 |
| table | <table>〜</table> | 表の開始、終了を示す <table>〜</table>が1つの表に対応 |
| tr | <tr>〜</tr> | 1つの行を示す |
| th | <th>〜</th> | 見出しセルを作る |
| td | <td>〜</td> | データセルを作る （数値など） |
<th> と</th>の間や<td> と</td>の間には表の各セルに表示したいテキストなどを記載します。
見出しセル（thタグで囲ったコンテンツ）は太字で表示されます。
基本の表の書き方をまとめると以下のとおりです。
- 表示したい見出しの分だけ横並びに<th>〜</th>を並べ、それを<tr>と</tr>で囲み1行目の見出し行を作ります。
- 見出しと同じ数だけ横並びに<td>〜</td>を並べ、それを<tr>と</tr>で囲みデータ行の1行分を作ります。
- このデータ行を表示したい行数だけ下に並べます。
- 最後に表全体を<table>〜</table>で囲んだら表の完成です。
ただし、各行のセルの数は全て同じである必要があります。
1行目を見出しとする3×3表を作る場合以下のような表記です。
<table>
<tr> <th>①</th> <th>②</th> <th>③</th> </tr>
<tr> <td>④</td> <td>⑤</td> <td>⑥</td> </tr>
<tr> <td>⑦</td> <td>⑧</td> <td>⑨</td> </tr>
</table>
これをブラウザーで見ると以下のような表になります。
① ② ③
④ ⑤ ⑥
⑦ ⑧ ⑨
また、1列めのセルを全て見出しセルにすることも可能で、各行の一番左の<td>〜</td>を<th>〜</th> に変更するだけで完了です。
ただ、このままですと表の枠線が表示されません。
そこで、border属性を使用します。
border属性は枠線の幅を示す属性で、各セルに枠線をつけられます。
しかし、各セルに枠線がつくことで二重線になってしまうのでcellspacing属性も使用します。
cellspacing属性はセル間の距離を指定する属性です。
書き方は以下の通りです。
【枠線付きの表の書き方】
<table border=”1” cellspacing=”0”>
<tr> <th>①</th> <th>②</th> <th>③</th> </tr>
<tr> <td>④</td> <td>⑤</td> <td>⑥</td> </tr>
<tr> <td>⑦</td> <td>⑧</td> <td>⑨</td> </tr>
</table>
横につなげる
例のように横並びのセルを結合させたい時はどうしたら良いのでしょうか？
横のセルをつなげる方法を見てみましょう。
「colspan（コルスパン）」という属性を使って<td>〜</td>をつなげることで横並びのセルを結合できます。
1行目の3つのセルをつなげるときは以下のように書きます。
【横並びのセルをつなげる書き方】
<table border=”1” cellspacing=”0>
<tr> <th>①</th> <th>②</th> <th>③</th> </tr>
<tr> <td colspan=”3”>④</td> </tr>
<tr> <td>⑦</td> <td>⑧</td> <td>⑨</td> </tr>
</table>
colspan=”3”が横方向のtdタグ3セット分であることを示していて、3セル分に一つのコンテンツを対応づけられます。
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
縦につなげる
横並びのセル同様に縦に並んだセルを結合できます。
これには「rowspan（ロースパン）」という属性を使用します。
2行目1列と3行目1列を結合した表は以下のように書きます。
【縦並びのセルをつなげる書き方】
<table border=”1” cellspacing=”0>
<tr> <th”>①</th> <th>②</th> <th>③</th> </tr>
<tr> <td rowspan=”2”>④</td> </tr>
<tr> <td>⑧</td> <td>⑨</td> </tr>
</table>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
rowspan=”2”が横方向のtdタグ2セット分であることを示しています。
3行目の<td>〜</td>は2セットしかありませんが、2行目で結合することを示しているので省略されます。
【例】
<table>
<tr>
<th scope=”col”>機能名</th>
<th scope=”col”>動く！商品棚</th>
<th scope=”col”>にぎわい<br>タイムライン</th>
<th scope=”col”>にぎわい<br>バナー</th>
<th scope=”col”>GAZN</th>
<th scope=”col”>ランキング<br>応援団</th>
</tr>
<tr>
<th scope=”row”>初期設定費用</th>
<td colspan=”6″>
<img src=”/wp-content/uploads/lp/images/content/price/price–subscription-price-free.png” alt=”0円”>
</td>
</tr>
<tr>
<th scope=”row”>月額料金</th>
<td colspan=”6″>
<img src=”/wp-content/uploads/lp/images/content/price/price–subscription-price.png” alt=”すべての機能が使えて10,000円 １カ月無料”>
<img class=”tfb_text” src=”/wp-content/uploads/lp/images/content/price/price–subscription-price-text.png” alt=”追加料金なしでご契約特典の「トリプル for B-Space 10GBプラン」も使える!!”>
<p class=”tfb_text_small”>
※トリプルは、LINEヤフー株式会社が提供するYahoo!ショッピングのサービスです。
</p>
</td>
</tr>
</table>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
sタグ：取り消し線
他にもよく使用するタグがあるので紹介します。
ウェブサイト内で記載内容に取り消し線が引かれているのをよく見ると思います。
このようにウェブサイト上でテキストの上に取り消し線を引くには、「sタグ」を使用します。
sタグは以下のように記述します。
【sタグの書き方】
<s>取り消し線を引きたいテキスト</s>
開始タグ<s>と終了タグ</s>でテキストを挟むことで、そのテキストに対して取り消し線が引けます。
【例】
<s>営業時間10:00〜19:00</s>
HTMLタグの閉じ忘れを防止
ここで紹介したタグを使う際はタグの閉じ忘れに注意しましょう。
HTMLタグ確認ツールを使えば一目でタグの閉じ忘れがないかチェックできます。
ストアクリエイター＞ストアデザイン＞タグ確認ツールから確認できます。
HTMLタグ確認ツールは以下の記事で紹介しています。
まとめ
今回は、Yahoo!ショッピングのスマホ版・PC版の共通タグの中でも表を作るタグなどについてご紹介しました。
tableタグまで理解できれば少し複雑なウェブページも作成できるはずです。
関連記事はこちら！
HTMLを使わずにストアページ制作したいストア様はこちらをチェック✓
▶開店したてのお店もにぎわいのあるお店に変身｜B-Spaceでストアページを作ってみよう！（ストアトップページ編）
ぜひご活用いただき、よりよいウェブサイト作りに挑戦しましょう。
