ネットショップ運営に必要なHTMLの基礎知識 

ネットショップ運営に必要なHTMLタグは12種類だけ、ということを別の記事で紹介しました。 

では実際にそのタグをどうやって使うのかということを詳しく説明していきたいと思います。 

HTMLの構造 

HTMLでは「<」「>」に囲まれた文字列をタグと言い、タグの属性によって装飾方法や振る舞いを指定できます。タグには開始タグと終了タグがあり、開始タグと終了タグに囲まれた部分を「要素内容」といいます。 

タグと要素内容をひっくるめて「要素」と言います。なお、要素内容がないタグ（改行するだけのタグや、罫線を引くだけのタグ、画像を表示するだけのタグ等）は終了タグがありません。開始タグのみです。 

終了タグがない要素もあります。

タグと属性はかならず半覚醒数字で記述します。

タグを入れ子にすることも出来ます。

属性は複数記述することが出来ます。属性の値はダブルクォーテーションで囲みます。

要素の種類

要素には様々な種類があり、（URLを指定してページを遷移させる「aタグ」、段落を表す「pタグ」、画像を表示させる「imgタグ」等）

ネットショップの商品ページやトップページは、これらの要素のいくつかを使用して記述していきます。

HTMLの要素は100種類ほどありますが、すべて覚える必要はありません。ネットショップで必要なのは12種類です。この12種類で殆どの場合でページを作成することが出来ます。

要素名	意味（意訳）	分類	終了タグ	属性	説明
a	Anchor（錨）	インライン	必須	href, target	リンクURLをアンカリングします。
img	Image（画像）	インライン	なし	src, width, alt	画像を表示させます。
p	Paragraph（段落）	ブロック	必須	align	段落を表現します。
font	Font（書体）	インライン	必須	size, color	文字の書体、色、大きさを指定します。
table	Table（テーブル・表）	ブロック	必須	width, cellpadding, cellspacing, border, align	表組みをします。
b	Bold（強調）	インライン	必須		太字で強調します。
center	Center（中央）	ブロック	必須		テキストを文書の中央に揃えます。
hr	Horizontal Rule（水平線）	ブロック	なし		水平の罫線を引きます。
br	Break（折る）	インライン	なし		テキストを改行します。

ブロックレベル要素とインラインレベル要素

要素には文章の構成レベルによる分類があり、文章の一つの塊として扱う「ブロックレベル要素」、文章の中で使う「インラインレベル要素」の2つがあります。

この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。

また、一般的にブロックレベル要素の前後には改行が入り、インラインレベル要素の前後には改行がありません。

ブロックレベル要素は要素の高さや幅を指定できますが、インラインレベル要素は要素内容によって幅や高さが変わるため指定ができません。

ブロックレベル要素＝固い入れ物、インラインレベル要素＝柔らかい入れ物、とおぼえておくと良いかもしれません。

・ブロックレベル要素＝固い入れ物、前後に改行が入る、要素の高さ幅指定が可能
・インラインレベル要素＝柔らかい入れ物、前後の改行なし、要素の幅高さは可変で指定不可

HTMLのバージョン

HTMLにもバージョンが有り、4.01から5になっています。WEBページを書くときはHTMLのバージョンの違いを頭に入れる必要がありますが、ネットショップでは古い4.01で大丈夫です。

バージョン5は4.01の上位互換がありますが、タグによっては属性が廃止されていたりします。

文字コード

文字コードは、パソコンが理解できる0と1の信号を、自然言語に置き換えるために作られたコード体系です。国やOSによって規格が乱立（EUC-JP,Shift-JIS,UTF-8等）し、非常に複雑ですが、最近はWEBページはUTF-8が使われることが多くなってきました。

基本的にネットショップの構築に使用する文字コードはUTF-8でOKです。

HTMLページのサンプル

ネットショップの商品ページでよく見るデザインをHTMLで表現してみましょう。

ソースコード

<img src="item_img.jpg" width="100">
<p><font size="+2"><b>幸せの空間スプレー</b></font></p>
<p>
  この商品はとても素晴らしい機能を持っています。この商品を空間にスプレーするだけで、その空間にいる人みんな、天にも昇る気持ちになれます。
</p>
<p>
  なぜかというと、こちらの商品の主成分は幸せの花言葉を持つアザレアのエキスを抽出したものだからです。幸せをを感じることができる空間スプレーは、この商品だけです。
</p>
<hr>
<br>
<table>
  <tr>
    <th>主成分</th><th>内容量</th><th>原産国</th>
  </tr>
  <tr>
    <td>アザレアエキス、水</td><td>500ml</td><td>ヴァークスウッド共和国</td>
  </tr>
</table>

プレビュー

まとめ

いかがでしょうか。

このように、HTMLのわずかなタグで商品名、商品写真、商品説明は表現できるのです。

ウェブサイトだけでなく、HTMLメルマガも書くことが出来ます。

タグの入力を補完してくれる、テキストエディタもありますし、WYSIWYGエディタを搭載しているカートASPもありますので、本当に必要最小限のHTMLの知識だけでネットショップを運営することが出来ます。

現在外注している自社サイトも、自分たちで更新することができるようになるでしょう。

まだHTMLを書いたことがないネットショップ店長さんは、一度でもいいからトライしてみてください。