HTMLもCSS初心者が楽天市場ページ制作で覚えるべき5つのhtmlタグ　1/2

こんにちは、社長のオクダイラです。

弊社では実務経験の無いEC事業者の担当者向けに楽天市場、yahooショッピングの制作に必要な技術をセミナー形式で提供しています。
最近よくお問い合わせいただく質問が「htmlとか全然分からへんねんけど、うちのスタッフでも大丈夫？」と言った内容です。

現状では絶対に大丈夫ではありません！そもそもどの仕事においても基礎がないということはスタートラインにすら立っていない状態であり、ひとまずスタートに立っていただく為に約6時間程度で楽天市場のRMSを使ってhtmlでサイト構築ができるカリキュラムを行っています。

今回はそのカリキュラムの内容を補足をつけながら紹介します。

1. スマホとPCで利用できる最大公約数の5つのタグを習得する
2. ECサイトは商品画像、バナー、テキストの3要素で構築される
3. CSSは基本的に無いものとして！

以上の3点に注力して紹介してきます。

スマホとPCで利用できる最大公約数のタグを習得する

ECサイトでは主にPC（パソコン）とSP（スマートフォン/iPhone）をターゲットデバイスとして設定します。基本的に全てRMSで管理するので使用不可能なタグ（特にスマホで禁止事項が多い）に意識しつつタグを選んでいくだけです。その条件の中で見出した5つのタグがこちら。

• p(段落)
• a（リンク）
• img(画像)
• table/td/tr(表)
• br（改行）

たった5つのタグだけで概ねの構築が可能です。

ECサイトは商品画像、バナー、テキストの3要素で構築される

ECサイト（特に楽天）は画像の面積が通常のサイトより多く多くの画像にはリンクが貼られています。楽天市場のモール検索のSEOとしてテキストで表示。この構成にレイアウトが加わることで商品ページやTOPページが構築されています。

CSSは基本的に無いものとして！

CSS（スタイルシート）はPCサイトもSPサイトも使用することは可能なのですが今回の講座の目的とすこしズレてきますので次回の機会に詳しく解説していきます。基本的に楽天市場推奨のtableタグを使用したレイアウトで組んでいくことにします。大昔のtableレイアウトとはいえメンテナンス性を考慮したソースコードが理想です。

それでは以下の商品を参考にして解説していきます。

自転車用スマートフォンホルダー

それではソースコードを確認しましょう。

<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder_1.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder_2.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder_3.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder_4.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<img src=”http://image.rakuten.co.jp/「店舗URL」/cabinet/sumahoya//chari-holder_5.jpg” alt=”自転車用スマートフォンホルダー” width=”750″ height=”750″>
<table width=”750″ border=”0″ cellspacing=”1″ cellpadding=”5″ bgcolor=”#999999″>
<tr bgcolor=”#ffffff”>
<td width=”30%”>商品名称</td>
<td>自転車用スマートフォンホルダー</td>
</tr>
<tr bgcolor=”#ffffff”>
<td>適応機種</td>
<td>
幅91mm未満のスマートフォン(ケース含む)
</td>
</tr>
<tr bgcolor=”#ffffff”>
<td>商品説明</td>
<td>
簡単取付<br>
マップアプリがナビになります。 自転車に乗っている時に目的地、周辺情報などの情報をいちいちスマートフォンを出さずに確認できる便利なホルダー。地図を表示していればリアルタイムで情報を確認できます。<br> 
※運転中の携帯電話の使用は安全の観点からお止め下さい。<br>
 落下防止のシリコンバンドで更に固定&自由度アップ。 <br>
 今までのサイクルホルダーはクランプだけで挟むという若干不安が残る仕様でしたが、今回のリニューアルでクランプ&シリコンバンドのダブル固定方式に。スマホ裏面にモバイルバッテリーなどを挟みこむことも可能です。<br>
 ※ご利用のバッテリー、スマホのサイズによっては挟めないものがあります。 <br>
 すぐに使える嬉しい設計。 <br>
 工具不要<br>
 自転車スマホホルダーを装着するために特別な工具は必要ありません。 <br>
 安心設計<br>
 取り付け部分にはシリコンカバー付きで塗装表面を守ります。<br>
 他機種対応<br>
 91mmまでの幅のスマートフォンに対応しているのでほぼ全機種で利用可
</td>
</tr>
</table>

前述のように4種類のタグしか使用していません。
※商品ページではリンクがない状態ですのでaタグは使用していない仕様です。商品ページの下部に関連リンクなどをつける際に使用します。

この記事前半ではそのうちの基本中の基本である3種類を紹介します。

<p>　Pタグ(段落)

段落を示すタグです。
改行もできますが段落の変更以外の改行は<br>を使用しましょう。文章を一括りにするためなので意味が変わったり構成要素が変更される時には新しい段落を設定しましょう。開始タグと閉じタグで1セットとなります。中にはimgやbrを使用することは出来ますがtableやpなどを入れることは出来ません。

<p>
イメージなど
</p>

<img src=”~” alt=”~”>イメージタグ（画像）

画像を表示させるタグです。

<img>単品では何も表示されず、必ず<img src=”~” alt=”~”>といったsrcとaltとセットで使用します。

[src=”~”]　 sourceの略称。表示させる画像のURLを指定するのに使用します。
[alt=”~”] alternative音声ブラウザや画像が表示されない時に使用する代替テキストを

指定します。指定しなくても表示には問題ありませんが画像検索の対象になるので必ず指定して下さい。単一タグになるのでマークアップして中にタグを入れ子にすることは出来ません。また閉じる必要もありません。

<br>改行タグ（改行）

改行を指定するタグ
line BReakの略称なのですが、lineはどこかへ行ってしまっていますね。
単一タグなので<br>だけで動作します。また、他の指定も必要ないので気兼ねなく使ってください。

今日の天気は<br>晴れです。

「天気は」の後ろで改行されます。

まずは色々ためしてみること

画像の部分をコピーしてメモ帳などにペーストして拡張子を「.html」にしてブラウザで確認するときちんと表示されているとおもいます。この3種類だけで商品ページを組み立てている店舗さんも多いので時間のあるときに色々な店舗さんのhtmlソースを確認して見てください。