HTML入門講座|ホームページ作りに必要な【タグ】を学ぼう

HTML
この記事で学べること
  • ホームページのタグ(命令文)について
  • HTMLファイルの基本構造こうぞう
スポンサーリンク
スポンサーリンク

そもそも【タグ】ってなに?

うさタブ
うさタブ

今回はHTMLの命令文、

タグについて解説するッピ。

ユウキ
ユウキ

思ったんだけど、

タグ】とか【コード】とかよく分かんなくない?

ユウキ
ユウキ

いったい何が違うんだよコレ?

うさタブ
うさタブ

考えるなッピ!! 感じろッピ!!

ユウキ
ユウキ

いきなり精神論!?

うさタブ
うさタブ

まあ、ちゃんと説明するとッピネ・・・

プログラミング用語で、コンピュータにこう動いて欲しいと命令文たくさん書くことを【コードを書く】【コーディングする】というッピ。

ユウキ
ユウキ

じゃあ【タグ】は?

うさタブ
うさタブ

コードを書くことの中でも、

ホームページを作るHTMLファイルに命令文を書くことを【タグ付けする】というッピ。

うさタブ
うさタブ

そして、HTML命令文のことを【タグ】と呼んでいるッピね~!

ユウキ
ユウキ

えーなにそれ?! ややこしすぎだろ~!?

学習のポイント
  • プログラミング用語で命令文を書くことを【コードを書く
  • HTMLファイルの命令文を書くことを【タグ付け】と呼びます。
  • またHTMLファイルをタグ付けすることも、命令文を書くことと同じですから、ホームページを作ることも【コードを書く】・【コーディング】と呼びます。
  • とてもわかりにくいですが、ひとまずすべて『コーディング』すると覚えておけば大丈夫です。

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

元になるコード

<html>
<head></head>
<body>

Hello World

</body>
</html>
うさタブ
うさタブ

【メモ帳】に上のサンプルコードをコピーしたら準備はオッケー!ッピ!

さっそく学習に入るッピよ~

前回のデータから学習しよう!

<html>
<head></head>
<body>

Hello World

</body>
</html>
ユウキ
ユウキ

この<html>とか、</body>って何なの??

うさタブ
うさタブ

よくぞ聞いてくれたッピ!

この <○○> というものこそ、

HTML命令文・・・【タグ】ッピ!

ユウキ
ユウキ

これが【タグ】か~

うさタブ
うさタブ

HTML文は、< ></ > をセットで使うッピ。

うさタブ
うさタブ

最初<html>というタグからはじまり、最後</html>で終わっているッピヨ~。

ユウキ
ユウキ

ホントだ!

うさタブ
うさタブ

<html>というのは、

「これからHTML命令文を書くので、ちゃんと表示してね~」っていう宣言みたいなもんッピヨ。

ユウキ
ユウキ

じゃあ、この<head>ヘッドとか<body>ボディの意味は?

アタマ? カラダ??

うさタブ
うさタブ

<head></head>

ホームページの見えない【土台】ッピね~。

ここにはだいたい「このホームページはこんなことを書いています~」みたいな説明を書くッピ。今回はムシするッピよ!

うさタブ
うさタブ

<body></body>のあいだが一番大事なところッピ。

ホームページの見える部分を書く場所ッピヨ~!

ユウキ
ユウキ

あ~。この『Hello World』ってヤツがそれか~

学習のポイント
  • タグは <></> をセットで使用する。
  • <head></head>は、ホームページの見えない土台
  • <body></body>は、ホームページの見える部分。中身はこちらに書きましょう。

実際に【タグ】を使ってみよう

うさタブ
うさタブ

さっそくタグ付けしてみるッピ!

うさタブ
うさタブ

前回の学習ファイル『1st.html』を開いて、

Hello World』を太字にするッピ!

HTMLファイルがメモ帳で開けないときは?

HTMLファイルは、右クリックから【プログラムから開く】→【メモ帳】で開くと、古いデータを書き換えることができます。

文字を【太字】にしよう!

<html>
<head></head>
<body>

Hello World

</body>
</html>
うさタブ
うさタブ

上のHello worldを、

<b> Hello World </b> と囲ってみるッピ!

<b>Hello World</b>
<html>
<head></head>
<body>

<b>Hello World</b>

</body>
</html>
ユウキ
ユウキ

できた~!

うさタブ
うさタブ

ファイル上書き保存して、

1st.html』をダブルクリック。 ホームページを開くッピ!

【タグ付け】できたか確認しよう

ユウキ
ユウキ

お! 文字の太さが変わってる!!

うさタブ
うさタブ

<b></b>タグは、

文字を太字にする【タグ】ある~!

うさタブ
うさタブ

他にも色んな【タグ】があるッピ!

この先の学習でたくさん紹介するッピ。楽しみにしてるッピよ~!

学習のポイント

今回の【タグ】の復習をしてみましょう。

<html>
<!-- HTMLのデータですとコンピュータに教えるもの -->

<head></head>
<!-- ↑見えない部分の設定 -->

<!-- ↓見える部分をこちらに書く -->
<body>

Hello World
<b>Hello World</b> <!-- 【b】は文字を太くするもの -->

</body>
<!-- ↑見える部分の終了がここで終わる -->

</html>
<!--HTMLの終了 -->
  • このように、このブログをはじめとする、インターネットのページには、たくさんの【タグ】が使われています。
  • 試しに、何かWEBページのいち部分をドラッグ(範囲選択)して、右クリック検証をしてみましょう。たくさんのタグで作られているのが見て分かると思います。
  • サンプルで書いた『Hello World』以外にも、色んな文字を書き換えて遊んでみましょう。

確認テスト

うさタブ
うさタブ

上手くできたッピか?
まだまだ勉強したい人は下の関連記事をクリックするっピよ~!

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク
HTMLプログラミング入門の最初のページ
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました