こんにちは。
ねこのてぶろぐです。
先日とある仲間うちで「超基本のHTML」ということでお話をさせていただく機会がありまして、そこでご紹介した内容をまとめなおしたものをご紹介したいと思います。
さぁ!ネットショップをはじめるぞ!
と思ったときに、結構早めにぶち当たる、けっこう高めの壁。
・HTMLとは何!?
・タグって何!?
・HTMLって暗号みたいで全然わからない!
そんな、超初心者向けの基本を勉強しましょう! HTMLの基本がわかると、タグが読めるようになる!読めると書けるようになります!意味がわかると意外と簡単なんです!
【目標】簡単な商品説明文をHTMLで作れるようになろう!
※超初心者向けの、本当に基本的な内容になります。ネット担当になったはいいけど何もわからない・・・という方、オープンしたばかりでチンプンカンプン・・・という方向けの内容です
超初心者の方でも、これから紹介する4つの事を覚えたら大体OK!商品ページで自分の思いを伝えることができる説明を作ることができるようになります。
今日覚えてもらうタグはたったの4種類だけ!
- <br>
- <font>
- <img>
- <a href>
この4つが分かれば、お客さんに商品の魅力を自分で書けるようになったり、楽天やヤフーショッピングのポイントバナーを自店舗の好きな場所に貼り付けれるようになります!
例えば、こんなページが作れるようになります。
▽サンプルぺージ▽
スポンサーリンク
- そもそも、HTMLって何やねん!
- 今日覚える① <br> 改行
- 今日覚える② <font> タグ 文字のサイズや色を操れる
- 今日覚える③ <img>タグ 画像を挿入
- 今日覚える④ <a href=”***”> </a>
そもそも、HTMLって何やねん!
HTMLとは
HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web において、ウェブページを表現するために用いられる。
日本語で書いてくれっていう感じですが、簡単に言うとウェブページのための言語ということです。日本語、英語、アラビア語、HTML語 みたいな感じ。言葉なのでHTML語独自の文法や単語があります。
タグって何?
タグとは、ここからHTML語で書いていますよ〜という合図。
タグの基本ルール
基本的に、タグには始まりの合図・終わりの合図が必要。
とはいえ、今説明した基本ルール(始まり・終わりの合図)が必要ないタグも存在します。それが、みんな大好きしょっちゅう使う<br>というタグです。
今日覚える① <br> 改行
<br>タグは文字や画像などを改行したい時に使います。
例えば・・・
青森県は日本で一番の収穫量を誇るりんごが有名です実はごぼうも収穫量が日本一だと知ってましたか?あと、しぶいところではねまがりだけが全国第2位の収穫量だそうですねまがりだけについて詳しくはこちら!
このままだと何だか読みにくいですよね。
そういう時に<br>タグを改行したい部分に入れてあげます。
↓
青森県は日本で一番の収穫量を誇るりんごが有名です<br>実は<br>ごぼうも収穫量日本一だと知ってましたか?<br><br>あと、しぶいところではねまがりだけが全国第2位の収穫量だそうです<br>ねまがりだけについて詳しくはこちら!
↓すると、このように表示されます↓
青森県は日本で一番の収穫量を誇るりんごが有名です
実は
ごぼうも収穫量日本一だと知ってましたか?
あと、しぶいところではねまがりだけが全国第2位の収穫量だそうです
ねまがりだけについて詳しくはこちら!
はい!<br>タグ覚えましたねー!では次!
今日覚える② <font> タグ 文字のサイズや色を操れる
- <font>タグは指定した範囲の文字のサイズや色を変えることができます。
- <font>タグは<font>色やサイズを変えたいテキスト</font>というように始まりの合図(<font>)・終わりの合図(</font>)が必要です。
始まりの合図、終わりの合図がきちんとそろっている状態をタグを閉じるといいます。
楽天でHTML形式のメールマガジンを配信するときに「閉じられていないタグがあります」と表示されることがありますが、これは始まりの合図と終わりの合図がそろっていないタグがありますよ、という意味です。
<font>タグは、次のような感じでサイズや文字色を" "の中に指定してあげます。
文字サイズを指定する
サイズを大きくしたり小さくしたいテキストをフォントタグで挟みます!
例:<font size="6">あいうえお</font>
意味:「あいうえお」の文字サイズを6にして
フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
↑これ↑のHTMLソースは↓こう↓
<font size="1">フォントサイズ1</font><br>
<font size="2">フォントサイズ2</font><br>
<font size="3">フォントサイズ3</font><br>
<font size="4">フォントサイズ4</font><br>
<font size="5">フォントサイズ5</font><br>
<font size="6">フォントサイズ6</font><br>
<font size="7">フォントサイズ7</font><br>
文字色を指定する
色を指定したいテキストをフォントタグで挟みます!
例:<font color="#ffcc00">あいうえお</font>
意味:「あいうえお」の文字色を#ffcc00にして
文字色は #+6桁のアルファベットや数字 で表すルールになっています。
WEB色見本 https://www.colordic.org/
よく使う色は覚えちゃうとラクチン!
フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
↑これ↑のHTMLソースは↓こう↓
<font size="1" color="#ff0000">フォントサイズ1</font><br>
<font size="2" color="#7D279E">フォントサイズ2</font><br>
<font size="3" color="#36C934">フォントサイズ3</font><br>
<font size="4" color="#CFB132">フォントサイズ4</font><br>
<font size="5" color="#1B12E7">フォントサイズ5</font><br>
<font size="6" color="#FF43DB">フォントサイズ6</font><br>
<font size="7" color="#B4A5A5">フォントサイズ7</font><br>
では先ほどの改行タグ<br>を加えたHTMLに、<font>タグを付け加えて実際に文字サイズを変えたり、文字色を変えたりしてみましょう!
★<br>で改行をした文章に…
青森県は日本で一番の収穫量を誇るりんごが有名です<br>実は<br>ごぼうも収穫量日本一だと知ってましたか?<br><br>あと、しぶいところではねまがりだけが全国第2位の収穫量だそうです<br>ねまがりだけについて詳しくはこちら!
★↓<font>タグを追加してみる
青森県は<font size="6">日本で一番</font>の収穫量を誇る<font color="#ff0000" size="6">りんご</font>が有名です。<br>実は<br><font color="#ff0000">ごぼう</font>も収穫量日本一だと知ってましたか?<br><br>あと、しぶいところでは<font size="5" color="#ff0000">ねまがりだけが全国第2位</font>の収穫量だそうです。<br>ねまがりだけについて詳しくはこちら!
↓すると、このように表示されます↓
青森県は日本で一番の収穫量を誇るりんごが有名ですが
実は
ごぼうも収穫量日本一だと知ってましたか?
あと、しぶいところではねまがりだけが全国第2位の収穫量だそうです。
ここまでで、文字を読みやすく改行できるようになって、強調したい文字に色を付けたりサイズを変更することができるようになりました!
あとは、画像の入れ方が分かったら、簡単な商品説明ページはもうできちゃいますよね!
今日覚える③ <img>タグ 画像を挿入
- <img>タグは画像を指定して挿入することができます。
- <img>タグは<img src="挿入したい画像や写真のR-CabnetのURL・ヤフーの画像URLの">で挿入することができます。
タグを閉じるルールは要らないタグです。
挿入したい画像や写真のR-CabnetのURLは↓この場所(R-Cabnet)↓の「画像URLコピー」で取得できます!
※ヤフーは「https://shopping.c.yimg.jp/lib/店舗ID/登録した画像名」がURLになります
今日覚える④ <a href=”***”> </a>
<a href="リンク先URL">画像またはテキスト</a>で画像やテキストにリンクを付けることができます。
例えば、楽天ポイントキャンペーンのリンク付きテキストを設置したい場合は・・・
<a href="https://event.rakuten.co.jp/campaign/card/pointday/”>5と0の付く日エントリー&楽天カードご利用でポイント5倍!</a>
↓
5と0の付く日エントリー&楽天カードご利用でポイント5倍!
と表示されます。
テキストではなく画像にリンクさせたい時には
<a href="https://event.rakuten.co.jp/campaign/card/pointday/”><img src="https://event.rakuten.co.jp/campaign/card/pointday/_pc/img/20190601/main_ttl.jpg(※R-Cabnetに保存したURL)"></a>
↓
と表示されます。
この4つのタグだけで書いたHTMLがこちら
青森県は<font size="5">日本で一番</font>の収穫量を誇る<font color="#ff0000">りんご</font>が有名です。<br><img src="https://image.rakuten.co.jp/****/cabinet/sample-01.jpg" width="100%"><br>実は<font color="#ff0000">にんにくとごぼう</font>も収穫量日本一だと知ってましたか?<br><img src="https://image.rakuten.co.jp/****/cabinet/sample-02.jpg" width="100%"><br>あと、しぶいところでは<font size="5" color="#ff0000">ねまがりだけが全国第2位</font>の収穫量だそうです。<br><a href="https://www.rakuten.co.jp/xxxxx.html">ねまがりだけについて詳しくはこちら</a>
どうですか?
今まで暗号にしか見えなかったHTMLが、ずっとわかるようになっていませんか?
実際にWEBで見るとこのように表示されます。
▽サンプルぺージ▽
暗号にしか見えなかったHTMLも、それぞれのタグの意味がわかると何が書いてあるのか全てではなくても、大体わかるようになったのではないかと思います。
今回は超基本編でしたので自分でHTMLを書く、という前提でしたが、多くの人はホームページビルダーやドリームウィーバーなどアプリケーションを使うと思います。
その時でも、今の超基本のタグを理解していると、今後出会うであろう新しいタグにも何となく対応できてくると思いますよ!
英語の文章を読むときに、何個かわかる単語や文章がところどころにあると、全体の意味がなんとなく分かる・・・みたいな感じに近いです。
そして、この基本さえわかっていれば、商品説明についてあと必要なのは画像の加工技術などよりも「熱量」のほうが重要なので、商品にたいする熱い思いのたけをただひたすら、商品説明文にぶつければよいと思います。(適度に改行したり文字色変えたり、もうできるはずですから、お客さんが読みやすいようにさえしておけばOK!)
ということで超基本編はここまで!
アディオス!!
スポンサーリンク
▽読者になるボタン