・ショッピングモールに出店したけど上手にページが作れない
・HTMLタグってなんだかさっぱりわからない
誰もが必ず思う事なんです。
そもそもHTMLとはなんでしょう？
HTMLとはWebページを作るための最も基本的なマークアップ言語のひとつで、
百数十種類のHTMLタグというもので構成されています。
とりあえずホームページを作る為に必要なプログラム言語というように覚えておきましょう！
100種類以上ありますが、ネットショップ運営に必要なものは10種類もありません
（と私は思っています）。
最初から全部覚えようとはせず、「最低限この３つ！」というものをご紹介します。
● <img> タグ （いめーじ たぐ） ● <a> タグ （あんかーたぐ 又は えー たぐ） ● <br> タグ （びーあーるたぐ）
これを覚えると写真（画像）を掲載できて、他のページに移動（リンク）させることができます。
楽天株式会社が運営する「net Baby World」さんのある商品ページを見てみましょう！
（画像をクリック！）
この商品ページの買い物カゴまでの部分は img タグしか使われていません。
※リンク先の商品ページが削除されていましたらこちらをクリックしてください
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m1.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m2.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m3.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m4.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m5.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m6.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m7.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m8.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m9.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_m10.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_k1.jpg"><br>
<img src="https://image.rakuten.co.jp/netbaby/cabinet/picture3/nih/001666xxx_k2.jpg"><br>これがこの商品ページの 楽天RMS内 の PC用販売説明文 にあるHTMLタグです※注意1
imgタグ と br だけという事がわかります。
ネットショップ運営に必要なHTMLタグは3つでOK！
imgタグ （いめーじ たぐ）
画像を表示する際に使用します。 基本的な構文は下記のとおりです。
<img src="画像URL">
私は通常、下記のように記載します。（楽天RMSを想定しています）
<img src="画像URL" width="750">
<img src="画像URL" width="100%">
※上は PC用商品説明文 又は PC用販売説明文 で画像を掲載する場合に使用し、下は スマートフォン用商品説明文 で使用します。width（幅）="xxx"の部分に%があるかないかの違いがあります。
aタグ （あんかーたぐ 又は えーたぐ）
画面遷移（誘導）させたい際に使用します。 「リンクをはる」という言い方もします。基本的な構文は下記のとおりです。
<a href="遷移（リンク）させたいページのURL">テキスト</a>
私は通常、下記のように記載します
<a href="ページのURL" target="_self">サイズ違いはこちら<a>
<a href="ページのURL" target="_blank"><img src="画像URL"><a>
※下は別ウィンドウ（別タブ）で新しいページを開きます。target="_xxx"の部分に違いがあります。こちらはどちらも実際に試してみて自身で動きを確認してみましょう！
brタグ （びーあーるたぐ）
改行する際に使用します。スペースを作るときに使ってもよいでしょう。
商品詳細<br>サイズ：30cm × 20cm × 25cm<br>重 さ：460g<br>とするとお客様が見るページでは下記のように見えます。
商品詳細 サイズ：30cm × 20cm × 25cm 重 さ：460g
※注意1・・・ net Baby Worldさんのページについて分かり易く解説しました。本来はこのような内容でしたが、 iframe内のhtmlが Not Foundだったり、画像のリンク切れ等で表示されていない部分があったため割愛いたしました。
まとめ
もちろん他にも覚えておくと便利なタグはありますが、あえて初心者の人に向けて誤解を恐れず３つに絞りました。商品ページ作りに必要なのはHTMLのタグを覚える事ではなく、写真を撮る技術や画像を加工する技術、人を引き付けるキャッチコピーやページの構成の方がより重要です。
またHTMLタグに詳しくならずとも写真をドラッグ＆ドロップしたりテキストを入力するだけでページを簡単に作成できるツールやサービスもたくさんあります。
ひとつ例をあげるとSketchPage for 楽天市場と（スケッチページ）というサービスです。楽天市場に出店していれば無料で使用できます。
ただどのようなツールやサービスを利用しても、HTMLの基礎知識を覚えておくと、より効率よく使えるようになるという事だけは間違いありません。
最後に私がHTMLを勉強した際に大変お世話になったシリーズの書籍をご紹介します。逆引きでも使用できるので大変重宝しました。
コメント