【副業を始めたい人必見!】副業開始マニュアル

【HTML初心者向け】WEBサイト作成時によく使うタグ一覧

【HTML初心者向け】WEBサイト作成時によく使うタグ一覧 HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事では、「HTMLを全く知らない・勉強を始めたばかり」という方に向けて、WEBサイトを構成する主要なタグをわかりやすく解説します。

関連記事を読むことで、より理解が深まると思いますのでそちらもぜひ読んでみてください。

スポンサーリンク

HTMLってなに?

HTMLとは「 Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ) 」の略で、WEBサイトの土台となるファイルを作成するためのマークアップ言語です。

あなたが普段、目にしているWEBサイトやスマホアプリも基本的にはHTMLで構成されています。

ニシドラ
ニシドラ

当ブログ(ニシドラブログ)もHTMLで構成されています。

他にもCSS、JavaScript、PHPという言語も使われています。

基本構造はすごく簡単。
HTML自体は難しいことはありません。

html」で始まり、「/html」で終わるようにコードが書かれています。

「html~/html」の間には、「head」や「meta」、「titre」、「body」などさまざまなタグが挟まれています。

右にコードの例を書いてみました。

<!doctype>
<html lang=”ja”>
<head>

<meta charset=”utf-8″>
<title>HTMLファイルについて</title>
<meta name=”description” content=”HTMLファイルの構成を解説”>
</head>
<body>

<h1>基本構成</h1>
<p>headタグで構成されている</p>
</body>
</html>

詳しくは、【HTML初心者】HTMLとはなにかわかりやすく解説!をご覧ください。
コードに書かれたタグ(headやbodyなど)が何を表しているのか解説しています。

HTMLファイルの作成方法とそのルール

HTMLファイルを作成するには「テキストエディター」と呼ばれるアプリケーションを使います。

Windowsに搭載されている「メモ帳」を使って作成することも可能ですが、テキストエディターには補完機能が備わっているので、プログラマーやWEBデザイナーはテキストエディター使っています。

HTMLファイルは拡張子に「.html」を付けることで作成することができます。

ニシドラ
ニシドラ

「拡張子を付ければ終わり!」というわけではなく、いくつかルールがあります。

  • 日本語を使わない
  • 使えない記号がいくつかある
  • 小文字を使う
  • ホームページには「index.html」と付ける

詳しくは、【HTMLファイルの作成方法】作成方法とルールについてわかりやすく解説!をご覧ください。
おすすめのテキストエディターやルールについてわかりやすく解説しています。

HTMLの基本文法について

HTMLファイルは「タグ」と呼ばれるもので構成されています。

タグにはさまざまな種類があり、「どのタグで文字列を挟むか」によってコードでの役割が変わってきます。

最初に書かれる「< >」を開始タグ、最後に書かれる「</ >」を終了タグと呼びます。
また、開始タグと終了タグに挟まれているかたまりのことを「要素」と呼びます。

開始タグ・終了タグ

タグによっては要素の中に、そのタグについての付加情報を「属性」と「」と呼びます。

先ほどは、HTMLファイルの作成方法のルールについて書きましたが、HTMLファイル内にコードを書くときのルールについては、【HTMLの文法】HTMLの基本文法についてわかりやすく解説!をご覧ください。

見出し・文章の表示方法

HTMLでは、見出しを付けるために「h1~h6タグ」を使い、文章を書くためには「pタグ」を使います。

HTMLで見出しを付けるときは、「h1タグ」、「h2タグ」、「h3タグ」、「h4タグ」、「h5タグ」、「h6タグ」の6つのタグを使い分けます。

h1タグが1番大きな見出し(サイト名など)に使い、h以降の数字が大きくなるほどに重要度の低い見出しに使います。

実際にhタグを使ったコードをブラウザー(Google Chrome)で表示させると、右の画像のようになります。

見出しの画像

ニシドラ
ニシドラ

h1タグはページ・記事に1つだけにしましょう。

文章を書くときは、「pタグ」を使います。

pタグの使い方はかなりシンプルで簡単。
実際に使ってみると以下のようになります。

<p>「p」を使った文章</p>
<p>「p」で囲むと文章が段落分けされ改行される</p>

PタグのWEB表示

左が実際のコードで、右がブラウザーで表示させたものです。
pタグで文章を作成することができました。

画像の通り、文章が段落分けされていることがわかると思います。
段落分けすることで、格段に文章が読みやすくなります。

詳しい使い方については、【h1~6・pタグ】HTMLで見出し・文章の表示方法を解説!をご覧ください。

画像の表示方法

画像を表示させるには、「imgタグ」を使います。

imgタグは画像を表示させるタグですが、負荷情報として「srcタグ」と「altタグ」を使います。

src属性は画像ファイルの場所の指定、alt属性は画像が表示できなかった場合の代替テキストを指定するものです。

<img src=”○○.拡張子” alt=”××画像”>

詳しいimgタグの使い方や画像の指定方法については、【imgタグ】画像の挿入方法を解説!をご覧ください。

箇条書きリストの表示方法

箇条書きリストとは、下の画像のようにリスト表示になっているものを指します。

箇条書きリストの例

この箇条書きリストを表示させるには、黒丸は「ulタグ」、数字は「olタグ」を使います。

どちらのタグも単体だけでは使えず、「liタグ」という箇条書きの個数を指定するタグを併用します。

基本的にolタグとulタグに使い方の違いはなく、どちらかのタグの間にliタグを挟むように使われます。

ニシドラ
ニシドラ

liタグに個数制限はありません。

場合によってはolタグの中にulタグを入れるようなこともあります。

<ul>
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
<li>リストその4</li>
<li>リストその5</li>
</ul>

olタグ

詳しくは、【ul・olタグ】箇条書きリストの作成方法を解説!をご覧ください。

箇条書きリストを装飾する「list-style-typeプロパティ」については、【list-style-typeプロパティ】CSSで箇条書きリストの装飾方法をご覧ください。

リンクの指定方法

リンクの指定・挿入するには、「aタグ」を使います。

aタグではファイル名やURLを指定する「href属性」を併用します。

href属性には、「ハイパーテキストを参照する」という意味があり、テキストや画像、動画・音声データを関連付けさせることができます。

詳しい使い方や画像にリンク指定する方法などについては、【aタグ】リンクの挿入方法を解説!をご覧ください。

表の作成方法

表を作成するには、「tableタグ」、「trタグ」、「thタグ」、「tdタグ」の計4つのタグを使います。

table 赤枠

tableタグは表の外枠を作成(赤線)。

tr 緑色の枠

trタグは表の行数を指定(緑線)。

th 青色の部分

thタグは表の見出しを作成(青枠)。

 

td 黄色の部分

tdタグは表のデータを作成(オレンジ枠)。

詳しい使い方は、【tableタグ】表の作成方法を解説!をご覧ください。

ニシドラ
ニシドラ

表をつなげる方法も解説しています。

ブロック要素とインライン要素

HTMLのタグは「ブロック要素」と「インライン要素」のどちらかに分類されています。

下の画像を見ると、要素と要素の間が改行されているのがわかるかと思います。

ブロック要素 改行の様子 色付き

ニシドラ
ニシドラ

ブロック要素とは、前後に改行が入るタグのことを呼び、「」に例えるとイメージしやすいと思います。

逆に、下の画像のように改行されず、横並びするもののことを「インライン要素」と呼びます。

インライン要素 表示結果 色付き

ブロック要素とインライン要素の説明やルールについては、【divタグとspanタグ】ブロック要素とインライン要素について解説!をご覧ください。

ブロック要素を使った「グループ化」についても解説しています。

グループ化に使うタグ

グループ化のイメージは、下の画像のように小さいブロック要素を大きなブロック要素に入れるイメージなのですが、この大きいブロック要素として使えるタグは限られています。

ブロック要素のイメージ

その中で、WEBサイト作成時によく使う、headerタグ」、「footerタグ」、「navタグ」、「mainタグ」、「articleタグ」、「sectionタグ」、「asideタグ」の7つのタグについて、【グループ化】グループ化に使われる7つのタグを解説!で使い方について解説しています。

それぞれの用途について確認してみてください。

おすすめの参考資料

僕が実際にHTMLの勉強を始めて、最初に買った参考書を紹介します。

それが、【1冊ですべて身につくHTML & CSSとWebデザイン入門講座という参考書です。

【1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana SBクリエイティブ 2019/3/16

初心者の方はこの本がおすすめです!

Webクリエイターボックス」を運営しているWebデザイナーのManaさんが執筆された本で、「プロの目線から、初心者にもわかりやすく要点を詳しく解説された1冊」です。

タイトルの通り、1冊でHTMLとCSSでどんなことができるのかがすべてわかります。

この参考書で勉強すれば、HTMLだけでなくCSSも勉強することができます。実際にサイト作りを体験できるので、この1冊だけで3パターンのWEBサイトを作れるようになると思います。

ニシドラ
ニシドラ

HTMLの勉強したいけど参考書はどれを買おうかな?失敗したくないな…」と思っている方はぜひポチってみてください!

絶対失敗しません!

コメント

タイトルとURLをコピーしました