【初心者向け】ネットショップで覚えるHTMLは3つだけ！【店長歴10年が解説】
こんにちは！
ネットショップ歴10年の、きつね店長です！
今回は
【初心者向け】ネットショップで覚えるHTMLは3つだけ！
このようなテーマで話していきたいと思います。
本記事の内容 ～目次～
ネットショップを開業したら
HTMLは1番始めにぶつかる壁かもしれません。
ネットショップの商品ページや、トップページを作るときは基本HTMLを使います。
HTML…覚えるの大変そう…
そう思われた方も多いかもしれません。
でも大丈夫です。
今から話す3つのタグを覚えれば綺麗なネットショップが出来ます。
いや覚えなくていいです。
この記事のHTMLをコピペして使用してください。
HTMLとは
ところで、HTMLって何？
HTMLとは、サイトを作るための基本的な言語です。
私たちが、観ているほとんどのサイトはHTMLで出来ています。
例えばこんな英語がずらっと並んだやつです。
この英語文字でサイト表示を命令しています。
例えば、HTMLできつね店長の文字の色を赤にしたい場合は
<font color="red">きつね店長</font> ⇒ きつね店長
きつね店長 の文字の大きさを変えたい場合は
<font size="6">きつね店長</font> ⇒ きつね店長
HTMLは、このように英語文字（タグ）で挟んで命令します。
ネットショップで覚えるHTMLはこの3つだけです
きつね店長が運営しているネットショップで使用しているHTMLはこちらの3つです。
<br> （改行をする） <img src="●"> （画像を表示する） <a href="●"></a> （リンクを貼る）
本当にこれだけでいいの？と思われるかもしれません。
これだけで大丈夫です。
ネットショップで使えるHTMLは基本的に少ないです。
とりあえずこの3つを覚えておきましょう。
この3つを覚えるだけで、綺麗なサイトが出来ます。
一つずつ解説していきます。
<br> 文字や画像を改行する
<br>タグは文字の改行や、画像を縦並びにする場合に使います。
【サンプル】 こちらの商品は<br>翌日発送ですぐに届きますので<br>お客様の安心感もアップします！
【ページ上での表示】 こちらの商品は 翌日発送ですぐに届きますので お客様の安心感もアップします！
<img src=”●”> 画像を表示させる
画像を表示させるには、画像を表示させたい所に<img src=”●”>を入力します。
【サンプル】 <img src="https://xn--w8j3b1a2071azp0b.com/wp-content/uploads/2020/08/1696207-1.jpg">
【ページ上での表示】
<a href=”●”></a> リンクを貼る
<a href=”●”></a>は画像や文字をクリックしたときに他のページにジャンプさせたいときに使います。
リンクを貼る時にはリンクさせたい画像や文字を<a href=”●”>と</a>で挟みます。
【サンプル】 <a href="https://xn--w8j3b1a2071azp0b.com/">きつね店長トップページ</a>
【ページ上での表示】 きつね店長トップページ
実際にHTMLで商品ページを作ってみましょう
まずはフォトショップで商品ページの画像を作っていきます。
その画像はHTMLを使って縦並びに表示していきます。
<img src="●"><br> <img src="●"><br> <img src="●"><br> <img src="●"><br>
HTMLはこんな感じです。イメージはこんな感じです。
これで商品ページは出来ます。
もっとこだわってページを作りたい方は検索するクセを付けていきましょう
これだけでは物足りない。画像を横並びにしたい。
など、自分の作りたい物が出てくると思います。
HTMLの基本はおぼえましたので、分からないときには
HTML 横並び
などと検索したら、すぐに教えてくれます。
HTMLで分からないことがあれば
すぐに検索するクセを付けると良いと思います。
HTMLの教科書 入門講座
HTMLを本で勉強したい方はこの1冊で充分かと思います。
HTMLの基本的なことを分かりやすく書いてありますので、HTML初心者の方におススメです。
１つのサイトを作りながらHTMLを学ぶことが出来ます。
この本を読んでHTMLはこういうものなんだと分るくらいで大丈夫です。
ゲームをしながらHTMLを覚えられます
もう少しHTMLを勉強したい方は、プロゲートがおススメです。
プロゲートとは、ゲーム感覚でHTMLやプログラミングを覚えられるアプリです。
HTMLが楽しく勉強できて、無料で出来ます。
それでもHTMLが分からない場合は、お金で解決しましょう
HTMLをやってると、上手く表示されないなどの不具合が出てくる場合があります。
検索しても解決しない…
時間だけが過ぎていく…
そういう時はプロに聞いた方が早いです。
ココナラというサイトでプロに聞きましょう。
ココナラとは、経験・知識・スキルを気軽に売り買いできるオンラインのスキルマーケットです。
安い値段で教えてくれるプロの方も多いです。
»TVCMで話題！スキルのフリマ【ココナラ】
HTMLだけではなく
商品写真の編集やバナーを作ってくれるプロの方もいます。
ネットショップで分からないことがあったり、商品写真をもっと綺麗にしたい人はココナラを使ってみるのもアリだと思います。
きつね店長もココナラは愛用しています。
分からないことがあればプロに任せちゃまた方が早いです。
人気記事【無料あり】ネットショップ比較7選！店長歴10年の僕がおすすめします。