覚えておくHTMLはコレだけ！
これさえ覚えておけば
専門知識がなくても大丈夫♪

ADVERTORIAL（アドバトリアル）を使えば、HTML/CSSなどの専門知識がなくても、ポイントを抑えるだけで記事LPが作れるようになります！

ここでは基本的なHTMLについて簡単にご紹介します。

ウェブページはHTMLとCSSで作られている

記事LPをはじめ、ウェブページを作るためには、HTML（HyperText Markup Language）とCSS（Cascading Style Sheets）という言語を使います。

簡単にいうと、HTMLがウェブページの枠組みを作るための言語で、CSSが見た目を整える（装飾する）ための言語です。

HTMLでは、「タグ」を記述することで文字に意味を持たせていきますが、このタグは基本的に「開始タグ」と「終了タグ」のセットで構成されています。（一部例外があり、終了タグがないものもあります。）

そして、HTMLで記述した要素に対して、色や大きさを変えるなどの装飾を施すのがCSSです。

IDやClassといった名前をつけることで、その要素に対して装飾を指定できるようになります。

覚えておくべき基本のHTML

記事LPをつくるにあたって覚えておくべきHTMLをご紹介します。

それほど難しい内容ではないので心配はありません。

覚えるHTMLはたったこれだけです。

むしろ、ここさえ覚えておけばHTMLはマスターしたと言っても過言ではありません。

●文章を書くときに使うPタグ
●文章の一部分を装飾したいときに使うSPANタグ
●セクション区切りの見出しに使うHタグ
●画像を差し込むときに使うIMGタグ
●要素を囲いたいときに使うDIVタグ
●リンクを貼りたいときに使うAタグ
●表をつくりたいときに使うTABLEタグ

もちろんこの他にもいろいろなタグがありますが、記事LPや基本的なWEBページを作る場合なら、これだけ抑えておけば充分です。

それでは、1つずつご説明していきます。

文章を書くときに使うPタグ

HTMLでは、文章は「段落」を表す「Pタグ」を使って記述します。

Pタグを使わずに文章を書いてしまうと、改行も無視されすべてが1文に繋がってしまいます。

主に、句点（。）が付くところで区切ってPタグをつけると見やすい文章になります。

<p>ここに文章を書いていきます。</p>
<p>Pタグを変えると段落が変わります。</p>

文章の途中で改行を入れたいときは<br />タグを使います。

BRタグは終了タグが存在しないため、改行したい位置に「<br />」を記述するだけで改行できます。

Pタグが変わると段落が変わるため、改行とは少し異なります。

<p>これは段落です。</p>
<p>段落と改行の違いはこんな感じです。</p>

これは段落です。

段落と改行の違いはこんな感じです。

BRタグで改行を入れるとこんな感じになります。

<p>これは改行です。<br />ここで改行されています。</p>

これは改行です。
ここで改行されています。

文章の一部分を装飾したいときに使うSPANタグ

文章の一部分だけ太字にしたり、色を変えたりしたい場合にはSPANタグを使います。

SPANタグは、<span>～～～～</span> のように使います。

SPANタグにクラス名を指定することでCSSの装飾を適用させます。

<p>この部分だけ<span class="bold">「太字」</span>に変えます。</p>
<p>この部分だけ<span class="red">「赤字」</span>に変えます。</p>

この部分だけ「太字」に変えます。

この部分だけ「赤字」に変えます。

半角スペースで区切ることで複数のクラス名を指定できます。

<p>この部分だけ<span class="red bold">「赤太字」</span>に変えます。</p>

この部分だけ「赤太字」に変えます。

セクション区切りの見出しに使うHタグ

文章を書くときは段落を表すPタグを使いますが、セクションの区切りで見出しを付けるときにはHタグを使います。

このHタグはH1からH6まであります。

Hタグには順番があり、数字が小さい方から「大見出し」→「小見出し」と使い分けます。

一般的にはページのタイトルでH1タグを使い、それ以降の大見出しにH2タグ、中見出しにH3タグ、小見出しにH4～H6を使います。

<h2>これは大見出し</h2>
　　<h3>これは中見出し</h3>
<h2>これは大見出し</h2>
　　<h3>これは中見出し</h3>
　　　　<h4>これは小見出し</h4>
　　　　<h4>これは小見出し</h4>
　　<h3>これは中見出し</h3>
　　　　<h4>これは小見出し</h4>

また、H2タグの中にはH3タグ、という決まりがあり、H2タグの中にいきなりH4タグやH5タグがきてはいけません。

<h2>これは大見出し</h2>
　　<h3>これは中見出し</h3>
<h2>これは大見出し</h2>
　　<h4>これは小見出し</h4>

Hタグを使うときは、必ず「H2」→「H3」→「H4」という順番になるように気を付けましょう。

画像を差し込むときに使うIMGタグ

画像を差し込むときにはIMGタグを使います。

IMGタグも終了タグがないので、画像を差し込みたいところにタグを記述するだけで大丈夫です。

IMGタグは、

<img src="～～～" alt="○○○" width="●●" height="□□" />

というように記述します。

「src」は、表示させたい画像のパス（URL）を指定します。
「alt」は、画像が読み込めないときの代替文字を指定します。
「widht」は、画像の幅を指定します。
「height」は、画像の高さを指定します。

画像を指定する方法には、「PICTURE」タグもありますが、最初のうちはIMGタグが使えれば問題ありません。

慣れてきてPICTUREタグも使えるようになると、デバイスに応じた画像指定ができるようになります。

要素を囲いたいときに使うDIVタグ

文章の一部分だけに装飾を加えたい場合はSPANタグを使いますが、要素全体に対して装飾を施したい場合はDIVタグを使います。

例えば、複数の要素を括って背景色や枠線を付けたいとき、2つのボックスを横並びで表示させたいときなどにDIVタグを使います。

<div class="bg_cream">
<p>このDIVタグに対して背景色を指定します。</p>
<p>このDIVタグに対して背景色を指定します。</p>
</div>

このDIVタグに対して背景色を指定します。

リンクを貼りたいときに使うAタグ

テキストリンクやバナーリンクのように、クリックされたら他のページへ移動させたい場合はAタグを使います。

<p><a href="～～～" target="_blank" rel="noopener nofollow">ここをクリックすると他のページへ移動します。</a></p>

「href」は、移動先ページのURLを指定します。
「target」は、リンクを新しいタブで開くかどうかを指定します。
「rel」は、リンクの属性を指定します。

relには、「noopener」「nofollow」「noreferrer」が指定できますが、サイト内リンクの場合はどれも付ける必要はありません。

外部サイトへのリンクの場合は、「target=”_blank”」を指定したうえで、「noopener」と「nofollow」を設定することをオススメします。

「noreferrer」は参照元を引き継ぎたくない場合に指定しますが、基本的には必要ありません。

特にアフィリエイトの場合は、「noreferrer」が付いてしまっていると、参照元が特定できないため成果が発生しない可能性があります。

表をつくりたいときに使うTABLEタグ

商品の特徴や価格表のように、表をつくりたいときにはTABLEタグを使います。

TABLEタグを使うとこのような表が作れるようになります。

これは見出しセル	これは通常セル
これは見出しセル	これは通常セル

こんな表も作れます。

見出しセル	見出しセル	見出しセル
縦に結合	通常セル	通常セル
縦に結合	通常セル	通常セル
通常セル	横に結合

TABLEタグにはいくつかの要素がありますので、一通り把握しておきましょう。

<table>
	<tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
	<tr><td rowspan="2">縦に結合</td><td>通常セル</td><td>通常セル</td></tr>
	<tr><td>通常セル</td><td>通常セル</td></tr>
	<tr><td>通常セル</td><td colspan="2">横に結合</td></tr>
</table>

まず、表を作るときは<table>～～</table>で囲います。

そして、「行」を表すときは<tr>～～</tr>を使います。

この<tr>～～</tr>を増えすことで複数行の表ができます。

そして、<tr>～～</tr>の中にセルを追加していきます。

セルには「見出しセル」と「通常セル」の2タイプがあり、
見出しセルは<th></th>を、通常セルは<td></td>を使います。

セルを縦方向に結合する場合は「rowspan」を使います。
サンプルの表ではrowspan=”2″を指定しています。

縦方向に結合するときは、その次の行は1つセルが少なくなります。

セルを横方向に結合する場合は「colspan」を使います。
サンプルの表ではcolspan=”2″を指定しています。

横方向に結合するときは、その行のセルが少なくなります。

これさえ覚えておけば大丈夫！

記事LPを作るうえで覚えておくべきHTMLはたったこれだけです。

この他にも細かいタグの使い方や入力フォーム用のタグなど、さまざまなタグも存在しますが、広く使われているタグは今回ご紹介したところくらいです。

HTMLをマスターすればもっといろいろな機能が使えるようになりますが、ここで紹介したポイントを押さえておくだけでADVERTORIALは充分使いこなすことができます。

覚えておくHTMLはコレだけ！これさえ覚えておけば専門知識がなくても大丈夫♪