1. HOME
  2. ブログ
  3. 初心者でもECモール出店に最低限必要なHTML講座!

初心者でもECモール出店に最低限必要なHTML講座!

みなさま、こんにちは!

ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する

『おかもと』です。

先日、お客様とECショップ出店についての
会話の中で

「どうしても最低限のHTML知識
必要になってくるよね…」

ということがありました。

私もHTML知識はほとんドゼロに近いほど
乏しいのですが
本日は初心者の方でも簡単に理解できる
最低限のHTML知識をご紹介させていただきます!

こちらも併せてご活用くださいませ(^^)


 

-目次-
1.そもそもHTMLとは?
2.出店の際に必要な最低限のHTML知識はどれくらい?
3.よく使うHTMLタグ一覧表
4.実際にHTMLを使ってみましょう

1.そもそもHTMLとは?

HTMLとはweb上で文書を表示させるため
プログラミング言語となります。
タグというもので構成をされており
リンクの設定や画像の挿入
文字の色や大きさを設定できます。

ECサイトはこのHTMLを使って構築されています。

さらにページのデザインをするためには
cssという言語が必要となってまいります。

2.出店の際に必要な最低限のHTML知識はどれくらい?

私もHTML知識はほとんど持っていないので
いざ自分が出店!となると、たちまち困ってしまいます。

個人で出店する方などは特に

「モールに出店はしたいけど、制作会社に頼むほど
費用を持ち合わせていない…」

などお悩みの声もありますよね。

そこで私が楽天市場やYahoo!ショッピングの
RMSやストアクリエーターPro(以下、ストクリ)で
多少のHTML知識が必要だな!と思ったところを
記載してまいります(^^)

ヘッダー・フッター

まず、ここで躓きました(笑)

EC運営をするには先ずページ作りが必要ですよね。

そしてECサイトページに欠かせないのが
ヘッダー・フッターです。

近年、スマホ対応が加速する中
PCデバイスにおいても” レフトナビ “を用いず
レスポンシブデザインとして使えるように
されているサイトも多々見られますが
ヘッダーとフッターはないわけにはいきませんよね。

ヘッダー:サイトの上端部に付ける会社概要やカテゴリなどの
サイト全体についての情報を記述した部分のことを表します。
フッター:サイトの下端部の領域のことでサイトの主な
商品情報以外の配送についてやお支払い方法についてなどの
補助的な内容を記す部分のことを表します。

ちなみに現在の楽天RMSやYahoo!ストアクリエーターProでは

下記画像の箇所に登録するかたちとなります。

【RMSより】

【ストクリより】

完全にHTML知識がないと作れないですよね。。

最低限、簡単なヘッダーフッターを作る
知識は必要となります。

トップページ


お店の正規の入り口となるため
お店の顔」とも言えるトップページですが
おすすめの商品を並べたり、スライドバナーを
入れてみたり、とこちらでもHTMLやcssなどの知識が
必要となります。

【参考イメージ】

商品情報の販売説明文や商品説明文

商品画像は選択して登録することができますが
LPページの部分や、特にグルメなどの商品ページで
よく見かける原材料や賞味期限などを記した
テーブル枠などはHTMLを用いて作成をされています。

こういったものです。

こちらでも最低限のHTML知識は必要となってまいります。

自力でECサイトを構築するには
多少なりともページの部分でHTMLを触らないわけには
いきませんね。

3.よく使うHTMLタグ一覧表

ここではモールに出店する店舗様を
仮定して初心者向けのための最低限使える
HTMLのタグを一覧にしてみました。

【基本の構造】
<head></head> 文書のヘッダ
<body></body> 文書の本体
<main></main> サイトの中心となる文書
<title></title> 文書のタイトル
<div></div> 範囲の指定(ブロックレベル)
<span></span> 範囲の指定(インライン)
<h1>-<h5> 見出し
【テキスト関係】
<p></p> 段落
<br></br> 改行
<strong></strong> 強調
<b></b> 太字
<font></font> フォントのサイズ・色・種類
<u></u> 下線
【レイアウト】
<center></center> センター(中央配置)
<hr></hr> 水平線
<table></table> 表
<col></col> 列の設定
<tr></tr> 表の行
<th></th> 見出し用のセル
<thead></thead> 表のヘッダ
<tfoot></tfoot> 表のフッタ
<tbody></tbody> 表の本体
【その他】
<a></a> リンク
<img></img> 画像の読込

4.実際にHTMLを使ってみましょう

先ほどご紹介させていただいた通り
ECサイトの商品ページでよく見かける表の枠を
実際にHTMLで記述してみましょう!

<title>●●商品について</title>
</head>
<body>
<table border=”1″>
<tr bgcolor=”pink”>
<th>原材料</th>
<th>小麦粉・乳製品</th>
</tr>
<tr>
<td>賞味期限</td>
<td>●年●月●日</td>
</tr>
<tr>
<td>保存方法</td>
<td>要冷蔵</td>
</tr>
</table>

すると下記のような表が完成しました!

原材料 小麦粉・乳製品
賞味期限 ●年●月●日
保存方法 要冷蔵

これで少しフォントを変更したり
色を変えてみたりするだけでも
大きくイメージは変わります(^^)

自身でサイトの構築をされたい方は
ぜひご参考くださいませ。


最後までお読みいただきありがとうございました(*^^*)

それではまた次回★

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2020年2月
« 1月   3月 »
 12
3456789
10111213141516
17181920212223
242526272829