どうも、真です！
初めてECショップを開店し、商品を登録して販売を始めたら、
「自分のショップを素敵にしたい！」
という欲求が出てくると思います。
売れているショップ、有名ブランドのサイトを見ると、どれもカッコいい・ステキ・見やすい、ですよね。
でも、
「自分にはパソコンの知識がないから、どうすればいいかわからない…」
「サイト作成を外注化すると何十万円もかかってしまう…」
「自分でやってみたいけど、そこまで専門的な知識まで勉強するのは時間がかかりそう…」
このような悩みは多いと思います。
私も同じ思いでモヤモヤしていました。
また、Qoo10やヤフショ、auPAYに出店して店舗構築をしていくと「HTML」という単語を目にする機会も増えてきます。（「HTML」に関しては後から説明しますね）
楽天市場に出店すると、基礎的なHTMLの知識を求められ、HTMLを使って商品ページ・サイトを作成しなければいけません。
「HTML」と聞くだけで、なんだか難しそうなイメージですよね。
でも、実はやってみるとそんなに難しいことではありません！
そして、自分で少し出来るようになると、自分の力でそこそこ良い見映えのショップページを作れるようになります！（実体験）
今回の記事では、「そもそもHTMLとは何？」という疑問にお答えします。
さらに、ECサイト初心者でもこれさえ知っておけば何とかなる！という知識を３つお伝えします。
この記事で、
「なんだ、そんな難しいことじゃないな」
「自分でもなんとか出来そう！」
と思ってもらえるはずです。
それでは早速、みていきましょう。
そもそもHTMLとは？
HTMLとは、
「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）」の略です。
Webページを作成する言語のひとつになります。
などと専門書みたいな事を書いていますが、そんなことは「どうでもいい」んです。（専門家の人に怒られそう…）
HTMLを使えるようになれば、
- サイトページに文字や画像を表示させることができる
- 文字のサイズや色を変えて、文章を目立たせることができる
- バナー画像をクリックすると、特集ページに飛べるようにできる
などなどが出来るようになります！
つまり、よりステキなサイトを作れるようになると、
- しっかり作られているサイトはお客様からの信頼を得られやすい
- おススメ商品の特集ページなどを作ることで、お客様の購買意欲を高めることができる
- あなたのショップでいろんなページや商品をお客様が見て回ってくれる
というようなことが期待できます！
基本的なルールだけ覚えてください。
Webページに表示したい文章などを「<」と「>」（どちらも半角）で挟まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていきます。
「タグ」は囲んでいる文章などに指示を与えるもの、というイメージです。
タグにはいろんな種類があり、「ここは見出し（タイトル）です」とか、「これはリンクで、クリックするとこのページに移動します」という指示をしています。
HTMLの基礎
それでは実践に入っていきましょう。
ECサイトの商品ページなどを作る際に、「これだけ知っておけばOK」というタグのみをお伝えしていきます。
①文字を改行する
文章を改行をしたいときに使うタグが、
『 br タグ 』（半角英語）
です。
文章を途中で改行したいとき、画像を縦に並べたいときなどに使います。
使い方は、文章の改行したい場所に <br> を入れます。
サンプルを作ってみましたので、みてみましょう↓
HTMLを入力している文章で「Enter（エンター）」の改行をしていても、実際のショップページでは改行されていません。
Webページでは、<br>で「改行する」という指示を与える必要があります。
②文字を太字に変える
文章や文字を太字にしたいときに使うタグが、
『 b タグ 』（半角英数）
です。
使い方は、
<b> 〇〇〇（太字にしたい文章や文字） </b>
のように表記します。
最初に出てくる< >を「開始タグ」、最後に出てくる</ >を「終了タグ」といいます。
開始タグは<>で囲われた指示語で、終了タグは指示語の前に /（半角のスラッシュ）が付きます。
今回でいうと、<b>が太字にするための開始タグで、</b>が太字にするための終了タグ、ということです。
サンプルをみてみましょう↓
「brタグ」は改行場所だけを指定するので、タグが１つだけでした。
「bタグ」は太字にする範囲を指定する必要があるので、開始タグと終了タグの２つが必要になる、ということですね。
③文字の色を変える
文字の色を変えたいときのタグは、
『 span style=”color: [色コード、または英語表記の色］”タグ 』
です。
使い方は、
<span style=”color: [色コード、または色の英語表記］”>〇〇〇（色を変えたい文章や文字）</span>
という書き方になります。
ちょっと複雑になってきましたね。
でも大丈夫です、分解してみていきましょう。
まず、<span>〇〇〇</span>です。
spanタグは、開始タグと終了タグで囲まれた文章や文字を変更対象とする、という意味です。
spanタグ自体には意味はないと捉えてもらって大丈夫です。
そして、対象とされた文章や文字に対して変更を加えるのが、
「style=”△△”」です。
これは開始タグの後に半角スペースを空けた後に続けて書きます。
△△の部分には「色を変える」や「文字の大きさを変える」といった指示語を入れていきます。
今回は色を変えたいので、「color: 」という指示語を入れているということですね。
color: の後には、「色コードや英語表記の色」を入力します。
色コードというのは、１６進数で表記されるコードのことです。
例えば、赤色にしたいならば、「#ff0000（色コードの場合）」や「red（英単語の場合）」と書きます。
青色にしたいならば、「#0000ff（色コードの場合）」や「blue（英単語の場合）」と書きます。
あまり難しく考えずに、「こういうものだ」と覚えてもらった方がいいですね。
サンプルをみてみましょう↓
サンプルのように、強調したい文章や単語を赤字にすることで目立たせることができます！
➃文字のサイズを変える
文字のサイズを変えたいときに使うタグが、
『 font size タグ 』
です。
使い方は、
< font size=”△△（フォントサイズの指定）”> 〇〇（サイズを変えたい文字や文章）</font>
です。
まずは、
<font>タグは、開始タグと終了タグで囲まれた文章や文字のフォントを変更しますよ、という指示語です。
また、フォントを変更するといっても、「フォントのサイズを変える」「フォントの色を変える」などいくつも変更できる項目がありますよね。
今回はサイズを変えたいので、<font size=”△△（フォントサイズの指定）”>【 font開始タグの後に半角スペースを空けて「size=」と入力し、「” “」（ダブルクォーテーション）で囲んだ中に半角数字を入力します】
サイズ変更の数字は、サイトによって違うかもしれないので、試しに「1」「2」「3」を入力してみてください。
サンプルをみてみましょう↓
文字サイズを大きくすると、文章の途中でもかなり目立ちますね！
また、ECサイトの基本のフォントサイズが小さい場合に読みやすく大きくする、といったこともフォントサイズの変更で可能になります。
ちなみに、先ほど説明した「文字の色の変更」も<font>タグで変更することができます。
さらに、文字の色と文字のサイズは同じタグで一度に変更することができます。
サンプルをみてください↓
フォントサイズが大きくなり、文字色が赤色になると、かなりインパクトあり！ですね。
一度に２項目変更できるのも便利なので、「こういうことも出来るのか」と覚えておいてください。
最後に
今回は、ECサイトを制作するうえで必須のHTMLの基礎知識についてお伝えしました。
いざやってみると、
「なんだ、そんなに難しくないじゃないか！」
と、思ってもらえたのではないでしょうか？
HTMLの基礎を知っていれば、少しの知識で自分のショップを良い感じに変えていくことができます。
慣れるまでは時間がかかるかもしれませんが、ECサイトでビジネスをしていこうと思われるならば知っておいて損は無しです！
今回の内容は、入り口の入り口といった内容です。
「自分でもなんだか出来そう！」
と思われたあなたには、次の記事でより実用的なHTMLの基礎をお伝えします。
商品ページに画像を挿入したり、バナーを設置してリンクを貼るといったタグを解説していきます。
これらができると、一気にサイトの見映えが良くなりますよ。
今回もご覧いただき、ありがとうございました！