HTMLタグ：初級編｜ECサイト運営者・WEBデザイナー必見！分かると便利なコーディングのタグ
ECサイトをはじめとしたWEBサイトを制作するコーダーやWEBデザイナーを目指している方、またECサイト・自社HPの運営担当者の方などは、頻繁に接する「コーディングのタグ」。
コーディングを通常は行わないデザイナーの方でも、ある程度タグを知っておいたほうがデザインの方向性が変わるなど、コーディングとデザインは密接な関係にあります。
そこでここでは、「分かると便利なコーディングのタグ：初級編」をテーマに、ECを含むWEBサイトに関わる方ならぜひとも押さえておくべき、基本的なコーディングのタグをご紹介します。
基本的なコーディングのタグ１：div
divとは「ブロック要素」のひとつであり、段落や表など「一塊」を作っていくイメージのタグです。
※div＝「division（ディヴィジョン）」の略語。「分割」「区分」「部分」という意味。
<div></div> で囲むと、その部分は大きなブロック（塊）として認識され、ひとまとまりとなります。そのため、次に<div></div>で囲んだテキストなどは、別の塊として下に配置されます。
その他の主なブロック要素のタグ
div以外にも、よく使われるブロック要素のタグがあるため、ご紹介します。
①hタグ
hタグの“h”は「Heading（見出し）」の略語。つまり、hタグはまさに「見出し」を構成する機能があります。
さらに細かく見ると、hタグは「h1」「h2」「h3」……、と数字が続いていきます。h1は「一番大きな見出し」を意味し、WEB記事の場合なら「タイトル」部分になります。続いてh2は「2番目に大きな見出し」であり、記事中の「大見出し」になります。以下、数字が小さくなるほど「小さな見出し」になります。
②pタグ
pタグの“p”は「Paragraph（段落）」の略語。つまり、pタグはまさに「段落」を構成する機能があります。
divと混同してしまいそうですが、pタグの場合は（divと異なり）1行空白が入ることで、「段落分け」ができます。
基本的なコーディングのタグ2：span
先述したdivと同じく、使用頻度が高いタグにspanがあります。spanもまた、divと同じく<span>～</span> で囲った部分をひとまとまりとして、囲った部分に対して変化を与えます。
たとえば、
<span style=”color:red;”>色を変えたい文章など</span>
とすると、<span style=”color:red;”></span>で囲った部分の文字色が変わります。
なお、spanはdivと異なり「インライン要素」です。そのため、「ブロック要素」のように塊ずつが縦方向に積み重なるのではなく、横方向に流れていきます。
たとえば、
私は<span>デザイナー</span>です
と書いても、横方向の1行として
私はデザイナーです
と表示されるだけです。
しかし
私は<div>デザイナー</div>です
とdivで囲むと、
私は
デザイナー
です
と、divで囲った部分が塊となり、縦方向に改行される（縦に積まれるイメージ）表示となります。
ちなみに、インライン要素で囲んだ文章の中にブロック要素を入れることはできません。しかし、反対にブロック要素で囲んだ文章の中にインライン要素を入れて、文字色や大きさなどを変えたりすることはできます。
文字装飾のタグ例
では、spanと同じくインライン要素である、文字装飾をするための主なタグをご紹介します。
①bタグ
bタグの“b”は「bold（太字）」の略語。つまり、bタグはまさに「太字」にする機能があります。
たとえば、
私は<b>デザイナー</b>です
とすると、「デザイナー」のみが太字になります。
②strongタグ
strongタグの“strong”は、「強調」の意味。bタグと同じく、「太字」にする機能があります。
文章の意味として強調したい場合は、strongタグを使用します。
※1ページ内であまりに多用すると、SEO的に悪影響を及ぼす可能性があります。そのため、必要性がそこまでないならば、bタグを使用することをおすすめします。
まだまだ広がるタグやコーディングの世界
かなり初歩的なタグの紹介となりましたが、タグに対する基本的な考え方はご理解いただけたなら幸いです。
まだまだ調べるほどに深いタグやコーディングの世界。もしもコーディングにご興味がおありなら、ぜひ挑戦してみてください！
キーワード
登録されたキーワードはありません
