HTMLのタグを書いてみよう初級編

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

HTML・CSS基礎編

DAY 2

HTMLのタグを書いてみよう

さて！いよいよ今日から本格的にコードを書いていきます！

まずはHTMLの基本ルールについて解説していきますね。

タグで囲もう
見出しと段落
リンクの付け方
画像を表示
リストを表示（ul/ol）
コメントの入れ方
グループにして整理する
ブロック要素とインライン要素
タグに属性をつける

の順に進めていきます。

TIPS

01.タグで囲もう

HTMLは”<”と”>”のカギ括弧で囲まれたタグとコンテンツの組み合わせで書いていきます。

コンテンツの前に書くタグを開始タグ、終わりに書くタグを終了タグと呼びます。

コピー<p>30DAYS Trial is fun!</p>

基本的に「開始タグと終了タグは１セットで書くのがルール」と覚えておきましょう！

02.見出しと段落

「HTMLを書くときはタグを使う」という最初のルールを覚えたところで、代表的なHTML要素をいくつか紹介していきます。

まずは見出しに使うhタグから！ブログなどを書いたことがあって「なんとなく知ってる」という方も多いはずです。

hタグはそのページの中で見出しにしたい重要なコンテンツに使います。hタグは<h1>〜<h6>まであり、h1を最も重要な見出し（ページのタイトルなど）に使い、h2→h6になるほど重要度が低い見出しに使っていきます。

hはheading（見出し）の略で、よく使うのは<h1>〜<h4>までです。

コピー<!-- ページのタイトルなどにつかいます -->
<h1>h1タグです</h1>
<!-- 大見出しにつかいます -->
<h2>h2タグです</h2>
<!-- 中見出しにつかいます -->
<h3>h3タグです</h3>
<!-- 小見出しにつかいます -->
<h4>h4タグです</h4>
<!-- 重要度の低い見出しにつかいます（あまり使いません） -->
<h5>h5タグです</h5>
<!-- 重要度の低い見出しにつかいます（あまり使いません） -->
<h6>h6タグです</h6>

次に段落ですが、段落にはpタグを使います。pはparagraph（段落）の略で、HTMLにテキストを書くときは<p>タグで囲みます。

コピー<!-- テキストにはpタグを使う -->
<p>これはpタグです。テキストを書くときに使います！</p>

さっそく昨日作ったindex.htmlを開いて、「今日の気分」を書いてブラウザで見てみましょうw

これで見出しと段落の付け方もクリアです！

03.リンクの付け方

次はリンクの付け方を学びます。毎日いろんなサイトを見ている僕たちには馴染みのあるものですよね。

リンクをつける時はaタグを使います。aタグのaはanchor（いかり）の略で、「リンク先へ錨を置いておく」とイメージすると分かりやすいと思います。

aタグは<a href=""></a>の形式で書き、飛ばしたいリンクのURLを" "（ダブルクォーテーション）の中、ブラウザ上で表示したい文字を<a>と</a>の間に書きます！

ちなみにaタグの中にあるhref（エイチレフ）は属性と呼ばれるもので、HTMLにはたくさんの属性があります。後ほど追加で解説しますが、<a>タグを使う時は<a href="URL">テキスト</a>が1セットと覚えてしまいましょう！

index.htmlにaタグを記述して、ちゃんとデイトラのサイトに飛ぶか確認してみてください。リンクはこちら↓

https://www.daily-trial.com/

04.画像を表示

次は画像の表示させてみましょう！ブラウザ上に画像を出せるとだいぶ「コードを書いてる感」が出るはずですw

画像を表示する時はimgタグを使います。<img src="画像のURL">の形式で書くと画像を表示することができます。imgはimage（画像）の略、srcはsource（出典）の略なのでそのままですね！

一つ注意が必要なのは<img>タグに終了タグはいらないということ。imgタグには囲むべきコンテンツがないので、終了タグもいらないんです。

上のコードをマネして画像を表示させてみましょう！表示させる画像のリンクはこちら↓

https://tokyofreelance.jp/web_first.png

05.リストを表示

次は箇条書きリストを作ってみましょう！

リストには数字なしリスト（ulタグ）と、数字付きリスト（olタグ）の二種類があります。それぞれ説明していきますね。

※「ul」は「unordered list（順序がないリスト）」の略で、「ol」は「ordered list（順序のあるリスト）」の略です。

数字なしリスト（ul・liタグ）

数字なしリストは<ul>と<li>をセットで使います。
<ul>～</ul>は、囲んだ範囲がリストであることを示します。
<li>～</li>は、リストの中で表示する項目の一つを作ります。

なので、<ul>～</ul>でリスト表示したい範囲を示し、その中に<li>～</li>で具体的な項目を作るという使い方をします。

コピー<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

上のコードを真似してリストを表示してみましょう！

数字付きリスト（ol・liタグ）

数字付きリストは、<ul>の代わりに<ol>を使います。それ以外は数字なしリストと同じです！
<ol>～</ol>でリスト表示したい範囲を示し、その中に<li>～</li>で具体的な項目を作ります。
そうすると、上から1、2、3…と自動的に番号が振られます。

コピー
<ol>
  <li>項目その1</li>
  <li>項目その2</li>
  <li>項目その3</li>
</ol>

数字付きリストも実際に表示してみましょう！

順序がない箇条書きのときは<ul>を、上から順に数字を振りたいときは<ol>を使うようにしましょう！

06.コメントを入れる

コメントとは、ブラウザに表示させない注釈のことです。「ここはこういう意図で書いた」「後でここは修正しなきゃいけない」「ここに○○を追加する予定」といったちょっとしたメモを記録するのに使えます！

に囲まれた範囲がコメントになります。コメントは複数行になってもOKです。

実際にコメントを書いてみましょう！

コメントはとても便利です。
注釈をつけるだけでなく、後で使うかもしれないコードを一時的に除外するのにも使えます！
「これ、今はいらないから消したいけど、後で使うかもな…」
「エラーの原因はこのコードみたいだから消して確かめたいけど、違ったら戻すの面倒だな…」
と、こんなときは該当箇所をコメントで囲みます！

コピー<!-- ここにコメントを書き込みます -->

いちいち消さなくても、実質的には消したのと同じ挙動にできます。
このコメントの使い方をコメントアウトと言います。
便利なので覚えておいてくださいね。

また、メモや一時修正のための使い方のほかに、ブロックの区切りを分かりやすくするためにもコメントを使います。

コメントが入ることで、どのタグがどこまで対応しているのか、ひと目で分かりやすくなりますよね！

DAY5以降で本格的なWebサイトを作る練習を行うので、その時にぜひ使ってみてください！

07.グループにして整理する

ここまでやってみて、
「HTMLは<body>～</body>の中に色んなタグを使って書き込んでいくんだな」
という感覚を持ったかなと思います。それくらいの感覚でOKです！

でも、HTMLは1ページ数百行くらい平気で書きます。
そうなると、ただつらつらとタグを書き足してるだけだとごちゃごちゃになっちゃうんです。
「どこに何書いたっけ？」「今書いてるここって全体のどの部分だっけ？」って迷子になっちゃいます。

そうならないために、HTMLではグループ化を積極的に行います！
グループ化するときに使う代表的なタグが<div>です。

<div>はそれだけだとなんの機能もありません。
でも、<div>～</div>と囲むことで、囲まれた部分をグループ化できるんです！

コピー<div>
  <ol>
    <li>項目その1</li>
    <li>項目その2</li>
    <li>項目その3</li>
  </ol>
</div>

グループ化することには二つのメリットがあります。

HTML全体をブロックに分けて整理できる
まとめてデザインを設定できる

メリット①　HTML全体をブロックに分けて整理できる

さっきも書いたように、1ページが1000行以上になることはざらにあります。
そうなるとそのまま管理できないので、<div>で1ページを複数のブロックに分けることで管理しやすくするんです！
数百行だと何がどこにあるかわからなくなりますが、数個のブロックだとイメージしやすそうですよね。

この「ブロックに分けて管理する」というのはHTMLの基本的な考え方です！

メリット②　まとめてデザインを設定できる

HTMLで文章や画像などを入れ込んでいったあとは、CSSというものを使ってデザインを設定することになります（DAY3で説明します！）。

そのとき、タグごとにデザインを設定するのですが、一つ一つ設定していては日が暮れちゃいます。
でも、<div>でグループ化していると、<div>～</div>内の要素にまとめて設定を適応できるんです！
そうすれば同じ設定を何度も書く必要もありません。

色々説明しましたが、ここでは

HTMLではコードを複数のブロックに分けて管理するのが基本
<div>を使うと複数のコードをグループ化できる
<div>～</div>で囲まれた範囲にはまとめてCSSを設定できる

ということだけ理解してもらえればOKです！

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

ここまで色んなタグを見てきました。
<h1>、<ul>、<a>などなど…。

でも、実はタグには大きく分けて2種類しかありません。
それは、ブロック要素とインライン要素です。

ブロック要素とインライン要素の関係

ブロック要素とは、”一つのかたまり”を作るものです。
インライン要素とは、ブロックレベル要素の中で使われ、文章の一部として扱われるものです。

文章だけだとピンとこないかもしれないので、↓の図を見てください。

このように、bodyの中でブロック要素が塊を作り、その中にインライン要素が含まれるという関係になっています。ちなみに、前の章で説明した<div>もブロック要素のタグです。

ここで大事なのは、ブロック要素の中にインライン要素を書くことはできるけど、その逆はできないということです。

例えば、<p>は段落を作るブロック要素で、<span>は文章の装飾などに使われるインライン要素です。
なので↓のように書けます。

コピー
<p>
  <span>ブロック要素の中のインライン要素です</span>
</p>

ブロック要素の中にインライン要素、という関係になっているからですね。
でも、<span>の中に<p>を書くことはできません！

実際に書いて確かめてみましょう！

ブロック要素とインライン要素の違い

ブロック要素とインライン要素には、次のような違いがあります。

ブロック要素のタグは、閉じタグ</～>の時点で改行されます。なので、ブロック要素同士を連続で書くと縦に並ぶことになります。
一方、インライン要素のタグを連続で書くと横に並びます。段落ではなく文章として認識されているため、改行がされないんです。

また、「タグに横幅や高さの設定をしたのに、反映されない！」というのは初心者の人が陥りがちな落とし穴ですが、それはインライン要素だからです。

タグに横幅や高さを設定する方法についてはDAY3で説明します！
今はなんとなくでよいので、「タグにはブロック要素とインライン要素ってのがあるんだな」と覚えておいてください！

09.タグに属性をつける

タグはHTMLを構成する要素ですが、個別のタグに属性を付け加えることができます！
属性は追加的な情報のことで、タグに名前を付けたりタグ内の要素の言語を指定したりと、膨大な種類があります。

属性は↓のような書き方をします。

<タグ名属性="属性値">

コピー<p id="taro">山田太郎</p>

上のコードの場合、<p id="taro">山田太郎</p>と囲っているp要素のid属性にtaroを追加しています（id属性とは名前のようなものです）。

ちなみに、実は今日みなさんが書いたコードの中でも既に属性を使っています！
それは、↓の二つです！

<a href="https://www.daily-trial.com/"></a>
<img src="https://tokyofreelance.jp/web_first.png">

①は、aタグ（リンクを指定するタグ）のhref属性（リンク先のURLを指定する属性）が”https://www.daily-trial.com/”であるという意味です。
②は、imgタグ（画像を表示するタグ）のsrc属性（ドキュメントに埋め込む要素のURLを指定する属性）が”https://tokyofreelance.jp/web_first.png”であるという意味です。

<a href="飛ばしたいリンクのURL">と<img src="画像のURL">は、もはやお約束のようなものなので、それぞれタグと属性を常にセットで使うと覚えてもらってOKです。
ただ、書きながら「aタグのhref属性がこのURLなんだな」と意識して書くようにするだけでも、タグと属性への理解が深まりますよ！

ちなみに、↓はよく使う属性の一覧です。

id属性：様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
class属性：様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
src属性：imgタグ（画像を表示するタグ）で使われる。画像ファイルの置き場所を示す
href属性：aタグ（ハイパーリンク）で使われる。リンク先を示す

特に、classはDAY3で扱うCSSで必須の属性です！
上に挙げたすべての属性の特徴を今覚える必要はありませんが、
<タグ名属性="属性値">
という形だけは頭に入れておいてください！

10.まとめ：HTMLの書き方基本

お疲れ様でした！
DAY2では色々なタグの使い方を説明しました。
これを読んだら忘れないうちにざっと見返しておいてください！そうすることで記憶の定着率が上がりますよ！

また、HTMLとタグの基本については↓の記事で図解付きで解説しています。

勉強になる記事

HTMLファイルとHTMLタグの基本を解説 – 図解で分かる！Webにまつわる基礎講座 vol.2

この記事を読むと、HTMLの理解がさらに進むので復習に最高です！
ぜひ読んでみてください！