前回の道場②はこちら🔽

道場を最初から復習する方はこちら🔽

コードを書く前の準備

Finder（Mac）かエクスプローラ（windows）を開いて、任意の場所（デスクトップとかお好きな場所）にまずフォルダを作成します。

※フォルダ名は「道場3」としています。

フォルダ作成が完了したら、前回インストールしたVS Codeを開きましょう！

このアプリにコードを書いていきます。

先ほど作成したフォルダをVS Codeにドラッグ＆ドロップしてください。

左側にフォルダ名（今回は「道場3」というフォルダ名）が表示されたらOK！

フォルダ名の上のファイル追加ボタン（赤枠）をクリックすると、フォルダ内に新しいファイルが作成されます。

ファイル名を「index.html」にしてエンターキーを押す。

ファイルが作成されたら、index.htmlのタグを右クリックし、「パスのコピー」をクリック。

Chromeなどのブラウザを開いて先ほどコピーしたパスを検索窓にペーストしてエンターキーを押す。

※まだ真っ白の画面しか出ないと思います！

これで準備OK！

見出しタグを使ってみよう！

では早速コードを書いてみましょう！

VS Codeのindex.htmlファイルに書いていきます。

h1タグは見出しの用途で使われることが多く、h1以外にもh2、h3、h4…とさらに小見出しを作ることも可能です。

まずは見出しを記載する際には<h1>タグを使って書いてみましょう！

<h1>こんにちは！</h1>

上記をVS Codeに記載したら、保存（Ctrl + Sもしくはcommand + S）して、先ほど真っ白の画面が表示されたブラウザを更新してみてください。

※表示されない場合はスーパーリロード（Ctrl + F5もしくはcommand + shift + R）してみてください！

以下のようなページが表示されたらOKです！

段落タグを使ってみよう！

先ほどは見出しタグ<h1>を使ってみましたが、今度は段落タグ<p>を使ってみましょう！

段落タグは基本的には本文の文字などを書く際に使います。

<p>これは本文です。</p>

これでページ更新し、以下のように表示されればOKです！

画像タグを使ってみよう！

今度は画像を表示させてみましょう！画像の表示の際は<img>タグを使用します。

今までは<h1>と</h1>の間に表示させたい内容を記載していたかと思いますが、<img>タグは閉じタグは必要ありません。

<img>タグを使って画像を表示する場合は<>の中に画像の格納先を指定します。

まずは以下の可愛い猫ちゃんの画像を右クリックし、「名前を付けて画像を保存」をクリックします。

最初に作成した「道場3」のフォルダ内に「img」という名前のフォルダを作成し、imgフォルダの中に以下の画像の名前を「cat.jpg」に変更して保存してください。

imgタグを使って画像を表示させるには、imgタグの中に先程保存した画像の格納場所を指定してあげる必要があります。

以下のように「src=””」の部分に画像の格納場所を書いていきます。

<img src="画像の格納場所" alt="代替テキスト">

今回は”/img/cat.jpg”（「img」フォルダの中の「cat.jpg」の画像）と指定してください！

このようにファイルなどを整理する時にフォルダを使って仕分けすると思いますが、

このフォルダ構成をディレクトリなどと呼んだりしています。

画像が表示されない場合は、このディレクトリの記述が間違っていたりすることがあります。

この辺りの詳細はまた別の機会に説明できればと思います！

「alt=””」の記述は画像がなんらかの理由で表示されない場合に、代替テキストとして表示される文字になります。

※これは書かなくても画像の表示には問題ありません。

<img src="/img/cat.jpg" alt="猫の画像">

これでページ更新し、以下のように表示されればOKです！

まとめ

今回は頻出の「見出し」「段落」「画像」の3つのタグについて紹介しました。

今回は実際にコードを書いてみる、ということを体験してもらうための道場でしたが、いかがでしょうか！

自分の書いたものが実際に表示される経験ってわくわくしませんか？

私は自分で作り上げていく感覚にハマって、前職は別の専門職でしたが未経験のままコーディングの世界へ飛び込んでみました！！

今はとても楽しくお仕事しています。

少しでもプログラミングっておもしろい！と思ってもらえたら嬉しいです♡

次回はcssを使って今回書いたコードをもう少し見やすくしていく作業を予定しています！

ぜひ次も一緒にチャレンジしてくださいね！