こんにちは、ゆーすけです。

今回も前回の続きで、
どんどんHTML言語を書いていきます！

まずは前回のtest.htmlのおさらいをしましょう！

<html>
<head>
</head>
<body>
<p>こんにちは、<b>ゆーすけ</b>です</p>
</body>
</html>

いま、内容がこのようになっているはずです！

もしなってなかったら、
いますぐメモ帳などでtest.htmlを開いて、
書き換えてみてください！

では、これをブラウザにドラックアンドドロップしてみましたか？

もししてみて、
以下の画像のようになっていたら成功です！

「ありゃ、文字化けしてる・・・」

こうなったら、もうやる気もなくなっちゃいますよね。笑

しかし大丈夫です、すぐ治ります！

以下のように変更してみてください！

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>こんにちは、<b>ゆーすけ</b>です</p>
</body>
</html>

そしてまた、ブラウザにドラックアンドドロップしてみましょう！

直りましたね！

追加した行は、文字化けを治す魔法の言葉とでも
今は覚えておいてください。笑

そしてやっと、

「おお、文字が打てたし、なんか太文字になってる！」

という状態になりましたね。

初めてhtmlに触った人は、
少し感動したと思います。

僕も去年htmlを学んで、
自分で書いたタグで画面を変えれた時には、
なんとも言えない高揚感を味わったのを覚えています。

「そうか、タグで囲んでいくことで、
デザインしていくんだな！」

と、初心者ながらに理解した記憶があります。

さて、それでは、
タグの種類を詳しく見て行ってみましょう！

まず、pタグ。

pタグは、”段落”を意味しています。

段落と言われると、
僕は小学校の国語の授業で
段落番号をつけさせられたのを
はじめに思い出します。笑

あの段落ですね。

普通の文を書く時にとりあえずpタグを使うということが多いので、
文を書きたかったらとりあえずpタグを使いましょう！

そして、bタグは、
“太文字”です。

囲った文字を太文字にすることができます！

このように、タグをたくさん知っていると、
知っているだけで着ることが増えるのが、
htmlの楽しいところですね。

それでは、よく使うタグを
たくさんあなたに紹介していきます！

h1タグ
“見出し1”

h2タグ
“見出し2”

h3タグ
“見出し3”

・・・

h6タグ
“見出し6”

iタグ
“斜め文字”

uタグ
“下線”

sタグ
“削除線”

ulタグ
“順序のないリスト”

olタグ
“順序のあるリスト”

liタグ
“リスト要素”

などです！

試しに、サンプルコードを書いてみますね！

(サンプルコード・・・、
プログラマっぽい用語ですね！笑)

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>htmlのテスト</h1>
<h2>文字に関するや～つ</h2>
<p><b>太文字</b>です</p>
<p><i>斜め文字</i>です</p>
<p><u>下線</u>です</p>
<p><s>削除線</s>です</p>
<h2>リストと～か</h2>
<p>お買い物リスト</p>
<ul>
<li>玉ねぎ</li>
<li>人参</li>
<li>じゃがいも</li>
</ul>
<p>カレーの作り方</p>
<ol>
<li>野菜を切る</li>
<li>野菜を煮込む</li>
<li>カレールーを入れる</li>
<li>煮込む</li>
</ol>
</body>
</html>

それでは、新しくtest2.htmlというファイルを作り、
メモ帳などで開いて、上のコードを書き込みましょう！

それができたら、おなじみの、
保存してブラウザにドラックアンドドロップしましょう！

できましたか？

このように表示されていれば成功です！

今回は以上です。

最後まで読んでくださって
ありがとうございました。

次回も楽しみにしていてください！

とにかく実際にHTML言語を書いてみよう！〜3〜よく使うタグ集〜