こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は、HTMLがあまり分かっていない【初心者の方向け】に、HTMLの基本の書き方についてご紹介します！

こんなお悩みありませんか？

・HTMLの書き方がわからない…
・HTMLをマークアップするってどういう意味？

そもそもHTMLとマークアップって？！

HTMLとは、『 Hyper Text Markup Language 』の略で、Webページを作るためのマークアップ言語のひとつです。「Webページを作るための言語がHTMLなんだな。」と覚えておきましょう。

また、マークアップとは、テキストが何を示すか（例えば、見出し・段落・箇条書きなど）コンピュータに分かるように目印をつけるのがマークアップの役割となります。
適切なHTMLタグを使って、マークアップすることを心がけるのが大切です。

それでは、次でHTMLタグの使い方と書き方をみていきましょう！

まずは基本のタグを使ってマークアップしよう！

HTMLタグはたくさんありますが、最初にこれだけは覚えておきたいよく使うHTMLタグを6つご紹介します。

HTMLタグ6選

【1】h1~h6タグ(見出し)

h1~h6タグは見出しとして使われます。
見出し部分を<h1> ～ </h1>で囲みます。

<h1>が一番大きい見出し、<h2> → <h6>となるほどに小さな見出しになります。

<h1>大見出し</h1>
<h2>中見出し</h2>
・
・
<h6>小見出し</h6>

・h1→h2→h3…h6と小さい数字から順番につけるのがルールです。
・h1タグは、1ページに1回だけ使うようにしましょう。

【2】pタグ(段落分け)

pタグは、段落分けに使われます。
ひとつの段落としたい部分を<p> ～ </p>で囲みます。pタグの前後には改行が入ります。
画像なども囲めますが、基本的にはテキストのみに使用します。

<p>おはようございます。今日はとてもよい天気です。</p>
【3】brタグ(改行)

改行にはbrタグを使用します。
一つの段落内でテキストを改行したい時、<br>と書くだけで改行してくれます。

<p>おはようございます。<br>
今日はとてもよい天気です。</p>
【4】divタグ(ブロック分け)

ひと固まりのブロックとして分ける場合divタグを使用します。
ひと固まりとしたい部分を<div> ～ </div>で囲みます。

<div>
<h2>中見出し</h2>
<p>おはようございます。<br>
今日はとてもよい天気です。</p>
</div>

・divタグの中にはあらゆるタグを入れて、大きなまとまりを作ることができます。
（h1～h6、p、imgなどや、別のdivも入れることができます）

・divタグは単体では固まりを作るタグですが、idやclassをつけることで役立ちます。

【5】aタグ(リンク)

テキストなどをクリックして、特定のページを開くことをリンクと言います。
リンクを設定したい場合は、<a>タグを使用します。
リンクしたい箇所を<a> ～ </a>で囲みます。href属性でURLを指定します。

<a href="リンク先のURL">リンクテキスト</a>

▼別タブでリンク先ページを開きたい場合は「target=”_blank”」を追加します。

<a href="リンク先のURL" target="_blank">リンクテキスト</a>
【6】imgタグ(画像)

画像を表示したい場合<img>タグを使用します。src属性で画像を指定して表示します。
alt属性は、画像の代わりとなるテキストを指定することができます。

<img src="画像のURL(パス)" alt="画像名">

・画像は、ショップデザイン / テンプレート選択・編集 / ファイル管理 / ギガプラス10・100MBサーバー　にアップロードして表示できます。
・参考記事「画像やCSSファイルをアップロードしたい」をご参照ください。

上記のHTMLタグを使ってマークアップしてみよう！

ここでは、例としてショップの利用案内ページの「お支払いについて」を、divでひと固まりとして書いてみます。

▼HTML例

<div>
	<h3>お支払いについて</h3>
		<p>お支払い方法は、クレジットカード、銀行振込（前払い)、よりお選びいただけます。<br>
		VISA・MASTER・JCB・AMERICAN EXPRESS・DINERSがご利用いただけます。<br>
		（一括払いのみ申し受けます）</p>
	<img src="https://gigaplus.makeshop.jp/tplplain/images/creditcard.png" alt="利用可能クレジットカード"><br>
	<a href="http://tplplain.shop3.makeshop.jp/html/info.html" target="_blank">サンプルショップご利用ガイド</a>
</div>

↓このように表示されます。

お支払いについて

・テキストはpで、ひと固まりのコンテンツは、divで囲んで書くようにしましょう！

これで、コンピュータに分かるようにマークアップすることができました！

文字の大きさや色を変えたりと、デザインしたい場合は、CSSで装飾することができます。
CSSについては、また別ページでご紹介します！

完了！

いかがでしたでしょうか。
WebページでHTMLは、骨組みとなる箇所です。
土台となる骨組みを正しく書いて、運用しやすいサイトを作りましょう。

それではまた！