HTMLを一緒に学ぶ！プログラミング学習記５〜タグ、見出し、段落〜
どうもかわうそです。
前回は、プログラミングを書くためにVScodeの設定を行ってもらったと思います。
見ていない方はこちら
今回は、実際にコードを書いていきます。
多くの書き方がある中で、タグというものを使うこと。見出しや段落のつけ方を学んでいきます。
〜プログラミング学習記５（HTML編）〜
”まずはVScodeにHTMLをかけるようにしましょう”
順を追って説明します。
１：VScodeを開く。
２：OPEN FOLDERをクリック。
３：デスクトップを選んで開く。
４：DESKTOPをクリック。
５：new fileをクリック。
６：file名を「index.html」にする。
７：この画面になったら完成です。
それでは、まず書くまえにタグの説明をしていきます。
”タグとは”
HTMLのコードを書く際にはタグというものを使って書いていく必要があります。
タグ・・・< >
見たことがある人もいるかもしれません。
このタグで囲むことで、テキストを見出しのように大きくしたり、リンクを貼ったりすることができるようになるわけです。
例：
<h1>こんにちは</h1>
こんな感じです。
< >はここから始まるよという意味の開始タグ。
</ >はここで終わりですという意味の終了タグと言います。
※テキストを書くときは、必ず終了タグが必要になるのでお忘れなく。
”見出しを書いてみよう”
見出しは、「heading」の略で
<h1>◯◯</h1>
といった書き方をします。
先ほどの例にも使いましたね。
１というのは一番大きな見出しということです。
２、３と数を大きくしていくことで小さな見出しになっていきます。
実際に比較してみましょう。
このようにコードを書くと、
こうなります。
このようにして、大事なところでも重要度を変えて書くことができます。
書いたコードを実際にページで見たい場合は下の画像のようにドラッグすると確認できます。
”段落をつけよう”
例えばこのように書いたとします。
コードでは段落を変えたつもりでも実際はこうなってしまいます。
段落をつけたい場合、
<p></p>
で囲む必要があります。
実際に書き換えたコードがこちらです。
こうすることで、
段落を変えてテキストを入力することができます。
僕のブログなんて、段落変えすぎて大変なことになっています笑
（このブログのHTML）
またこのテキストは見出しではないので文字が細く小さくなっていることにも注目です。
〜まとめ〜
いかがでしたでしょうか。
このブログを読んで終わりではなく、実際に自分でやっていただくとよりわかりやすくなると思います。
< >（タグ）
テキストに工夫を加えることができる。
<h1></h1>（見出しタグ）
見出しを作れる。数字によって重要度を変えることができる。
<p></p>（段落タグ）
段落を変えてテキストを入力することができる。
今回は、「タグについて」「見出し」「段落」について学習していきました。
次回は「リンクの作成」「画像を表示」「リストの作成」についてやっていきます。
続いて読む方はこちら
Twitterはこちら
