VSCodeの実装とHTMLのタグを知る

はい、colorful beansです。

スキルUPを目指して取り組み初めたプログラミングの学習。

前回の記事ではプログラミングの概要部分を勉強しておりましたが、実際にVSCodeを実装して環境設定を行いました。

VSCode（ビジュアルコードエディタ）の実装
HTMLへ入門してみよう
プレビューを可能にする拡張機能 Live Preview のインストール
HTMLのタグを学ぶ
後書き

VSCode（ビジュアルコードエディタ）の実装

まずは、Google ChromeでVSコード初心者で検索。

数個のサイトを確認、流し読みをしながらサイトの雰囲気などを確認して、書いている内容・文章が自分にとって読み休みか、理解できそうか、写真の多さとかで判断して、
最終的に選んだサイトは　こちら　です。

順番に読み進めながら指示通りにダウンロード・インストールなどして初期設定まで可能です。

ダウンロード先　こちら　一応リンクをつけておきますね。

ここで、自惚れてて手順なんて書いて、できないなんて事が起きると困るので、このブログは読者の皆様に指南するようなものではありませんので、ご理解とお間違えの無いようにおねがいします。

若干　バージョン違いとか、WindowsとMacで画面などの構成や見え方とか違ってもいけないので、そのあたりはご自身で確認しながら、自分にあったサイトを見つけてください。

一番困った箇所は、言語設定の時でした、最終的には設定できましたが、なかなかその場所まで辿りつけなかったですね、、、まぁそういうことも多々あると思いますので、根気強く何度も見返して触りながら、時には違うサイトのも見ながら設定する必要もあるかもしれませんね。

他のサイトもあるので　こちら　

HTMLへ入門してみよう

さぁ、VSCodeの実装もでき、HTMLの学習にはいります。

まず、HTMLというべきか、VSCodeというべきか、コードを作成していくうえで、必要になるのが「タグ」とか拡張機能と呼ばれるものですね。

拡張機能とは？

拡張機能は、VSCodeに追加できる機能のことで、ユーザーがエディターの機能性を拡張することができます。サポート、デバッグ支援、コードやカラースキーム、スニペット、自動化、Git統合、タスクランナー、ライブラリ、パッケージなどがあります。拡張機能は、VSCodeのプログラマブルなインターフェースを利用して、ユーザーが独自の機能を追加することも可能です。VSCodeの拡張機能は、Visual Studio Marketplaceからダウンロードできます。

このVSCodeの中の拡張機能の中にHTMLは存在します。

その他の言語、Python、JavaScript、C+などなど　かなり種類豊富に対応できるのがこのVSCodeの強みのようですね。

お好みの言語をプラグインして追加しましょう。ほぼ無料で対応しているのかな？中には有料もあると思うけど。

ありがちなサブスクとか、変なリンク踏んでしまうなんてこともあるかもしれないので、焦らずに確かめながらやりましょうね。

上の写真では左の拡張機能ってところに追加できるものや追加済のものがズラッと並びます。

検索も可能ですし、クリックすると中央のように詳細が表示されます。

初めに紹介している、「超初心者ホームページ作成ナビ」さんらのサイトでは、こいうプラグイン追加しておくと便利だよってこともあるので、追加しておきましょう！

プレビューを可能にする拡張機能 Live Preview のインストール

VSCodeとHTMLの導入が完了して、次に必要になるのが、Live Previewですね。

書いたコード・プログラムを実行してその結果を見る画面って感じのもです。

要するに結果確認画面ですね。

下の写真でいうと、右側の画面がプレビュー画面で、左隣りがコードになります。

入門編で必ず出てくる　” Hello world ” なんかは保存してないので（汗）写真では長めのコードになってますｗ

オススメしているサイトさんで順番に進めると必ずでてきます。

ここまでが初期設定といっても良い内容ですかね。

HTMLを学ぶ上で沢山のタグ　Pタグ、ｈ1、table、titleなどなど沢山のタグを使い、使い分けながらコードを書いていく必要があります。

次ではそのタグを紹介していきますね。

HTMLのタグを学ぶ

まずは、体表的な5つのタグをみていきましょう。

<html>: HTML文書全体を取り込むタグ・言語の設定の意味とどの言語を使用しているかの宣言ともいえます。これをしないと機能しません。
<head>: ページのメタデータやリンクなどを含むタグ　
headタグとは、HTML文書のメタデータ（文書の裏側の情報）を記述するタグです。　headタグはbodyタグの上に書きます。headタグの中には、文書のタイトルや文字コード、スタイルシートやスクリプトなどの外部ファイルへのリンクなどを入れます。
<title>: ページのタイトルを指定するタグ　
titleタグとは、HTML文書のタイトルを表すタグです。titleタグはheadタグの中に書きます。titleタグの内容は、ブラウザのタブや検索結果などに表示されます。
titleタグには属性はありません。titleタグの内容は、SEO（検索エンジン最適化）にも影響するので、各ページで重複しないようにし、検索キーワードやユーザーのメリットなどを盛り込むと良いです。
<body>: ページの本文を含むタグ　
bodyタグとは、HTML文書の本体部分を表すタグです。bodyタグはhtmlタグの中に1つだけ書きます。bodyタグの中には、見出しや段落、画像やリンクなど、ブラウザに表示される要素を入れます。
<h1>〜<h6>：HTML文書の見出しを表すタグです。
見出しのレベルによって、からまでの6種類のタグがあります。<h1>がもっともレベルの高い見出しで、<h6>がもっともレベルの低い見出しとなり、1から順に文字の大きく、6になるにつれ小さくなります。

以下は参考例としてで、正しいとかどうかとかは別ですので、お間違えの無いようにおねがいしますね。

<html>
<head>
  <meta charset="UTF-8"> <!-- 文字コードを指定 -->
  <title>ページのタイトル</title> <!-- 文書のタイトルを指定 -->
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>
  <link rel="stylesheet" href="style.css"> <!-- スタイルシートへのリンクを指定 -->
  <script src="script.js"></script> <!-- スクリプトへのリンクを指定 -->
</head>
<body>
    <!-- ブラウザに表示される要素 -->
  </body>
</html>

＊タグの初めと終わりのルールがあり、<html>始まりタグ・・・</html>終わりのタグ
　　終わりのタグはスラッシュ（/）が付く。

その他、以下のようなタグも使用頻度は多いようです。

<p>: 段落を示すタグ
　　　文章を書くタグともいえます。
<a>：ハイパーリンクを設定するタグ
CSSシートとHTMLをつなぐようなイメージ、CSSについては別の記事にしようなか、、、
ここでは長くなりそうなんで。
<img>: 画像を表示するタグ
画像のリンクを使って、使いたい画像・写真を表示させるタグ。
<ul>: 箇条書きリストを示すタグ　
HTML文書で順序のないリストを作成するためのタグです。ulタグの中には、liタグでリスト項目を記述します。ulタグを使うと、デフォルトでは黒丸（disc）のマーカーが付きます。
<ol>: 番号付きリストを示すタグ　
olタグとは、HTML文書で順序のあるリストを作成するためのタグです。olタグの中には、liタグでリスト項目を記述します。lタグを使うと、デフォルトでは数字（decimal）のマーカーが付きます。
<li>: リストアイテムを示すタグ　
liタグとは、HTML文書でリストの項目を表すためのタグです。liタグは、順序付きリスト（olタグ）、順序なしリスト（ulタグ）、メニュー（menuタグ）のいずれかの子要素として配置する必要があります。