カラーチェッカーアプリを作成した話 -5-
【公開日： 2026年5月14日】
初心者向け： 開発に挑戦 ①webアプリを作成する その5
～HTMLのheadタグを書いていく（あと相対パスについて）～
開発環境の確認と準備、アプリイメージ案がまとまってきました。
次はこの画面イメージをプログラミングし、より具体的に可視化してみます！
●htmlタグの大項目
前の単元で準備した、VS CodeのCalendarAppフォルダを開きます。
閉じてしまった場合は、VS Codeをダブルクリックして開きます。
最後に保存したデータがだいたい表示されるので、この時点でcolorAppフォルダが表示されればそのまま進めます。
出ない場合、左上の「ファイル」→「フォルダーを開く」で作成した「ColorApp」のフォルダを探して選択します。
html
「colorchecker.html」をクリックすると、右側にコード入力スペースが表示されます。
さっそく入力してみます。
最初の1行目に、これはHTMLであると宣言します。
html
HTMLは、コードを<>で囲みます。これを「タグ」といいます。
そして、書き出しは↑画像1行目のように入力するのがルールとなっています。
HTMLは大項目として、「head」、「body」というものに分かれます。
「head」は主に、画面の詳細設定を宣言する場所です。検索エンジンなどに提示する情報などを記載します。
「body」は主に、実際に表示される画面の詳細を設計する場所です。
ともかく、それぞれの入力する場所を一旦確保しましょう。
html
まずは<html>タグを入力します。VS Codeは勝手に終了タグも付けてくれるので、この時点で<html></html>という表記になります。
＞＜の間にカーソルを置いてエンターを押下すると段落が下がりますので、そこに<head>と<body>をそれぞれ足していきます。こちらも勝手に終了タグをつけてくれます。
上の画像のようになればOKです。
ちなみに段落が無くても動いてくれるのですが、それだと私たちがコードを見づらくなるので、見やすいコードを意識して作成します。
【補足】
「文字が黄色くなるのは何？」と思いますが、これは「このファイルに変な所があるよ」という目印です。修正すると黄色ではなくなります。
（拡張機能で、コードチェック機能を入れています。便利なので是非使ってみて下さい！）
黄色い波下線は「変なのはここですね？」という目印です。スペル間違えてたり文法を間違えてたりするとこうなりますので、こまめに確認します。
↑は単に中身を全然書いてないので「何もないんだけど」というエラーが出ています。
タブの右に白い●が付いているのは、「このファイルが更新されて未保存」の場合に表示されます。上書き保存すると消えます。
webの画面はヘッダー、メイン、フッターで構成されるので、そちらもタグを入力していきます。実際に画面に表示されるものなので、「body」に書きましょう。
html
<body></body>の間にカーソルを置いてエンターキー押下、段落を下げます。
そこに<header>、<main>、<footer>をそれぞれ足していきます。
終了タグが付くことも忘れず確認します。
ここまでで、HTMLを構成する大項目を入力し終わりました。
ここからどんどん細かく設定していきます。
※headerとfooterはとりあえず入力しましたが、今回はmainだけ取り掛かりますのでこれ以降は放置します！
●headタグ内の設定
それでは、<head>の中身を書いていきます！
<head>には、文字コード、タイトル、スタイルシートのリンクなどを記載します。
文字コードは<meta>というタグを使用します。
metaとはメタデータの事で、このHTMLページの「属性情報」という意味です。
ここは、「こう書いていく決まりなんだなぁ」と考えてしまって良いかと思います。
html
<head></head>の間にカーソルを置いてエンターキー押下、段落を下げます。
①文字コード（4行目）
<meta charset="UTF-8">と入力します。文字コードを宣言する事で、文字化けを防ぐことができます。
②このページの説明（5行目）
name属性でdescription（説明）と入力すると、このページがどんなページなのかの説明ができるようになります。
content属性でその説明文を記載します。
③レスポンシブデザイン（6行目）
このwebページをスマホ等で閲覧した場合、その画面サイズに合うように設定します。
viewportがレスポンシブ対応にすること、width=device-widthは横幅をデバイスの横幅に合わせる、initial-scale=1.0は初期倍率を1倍にする、という指定です。
④このページのタイトル（7行目）
<title>タグでこのページの見出しを付けます。
web上に表示される、このページの名前になります。
ちなみにですが、<meta>は終了タグを付けなくてもよい要素のひとつになります。
このように、付けなくてもよかったり省略できるものがいくつかあります。
次に、スタイルシートとJavascriptをリンクさせるようにしましょう。
どちらもまだファイルを作成していませんので、コードを書くついでにファイルも作ってしまいましょう。
html
リンクも<head>内に記載します。先ほどの続きで、下にどんどん追加していきます。
①JavaScriptのリンク（8行目）
JavaScriptは<script>というタグを使用します。
src="" で、JavaScriptのファイルの在処を入力する事で参照できるようになります。
②CSSのリンク（9行目）
CSS＝スタイルシートです。rel="stylesheet"と記載する事で、cssと認識してくれます。
こちらもファイルの在処を入力しますが、こちらはhref属性を使用します。
次の項目で、このファイルの在処の入力方法について説明します。
●ファイルの在処の記載について
「./js/colorchecker.js」という記載方法ですが、これは相対パスと呼ばれるものです。
フォルダのどこにjsのファイルがあるかをルートで教えているのです。
ファイルの作成ついでに確認してみます。
VS Codeページの左上「ファイル」で新規ファイル作成→名前を付けて保存 でJavaScriptのファイルを新規作成します。
保存先のフォルダを、「colorApp」→「js」で選択します。ファイル名とファイルの種類を設定し、保存をクリック。
この時、フォルダとファイルの位置関係はこんな感じになります。
colorAppフォルダ直下の「colorchecker.html」ファイルにコードを書いているところですので、参照したい他のファイルを見に行くには、このHTMLファイルから辿っていくルートを書く必要があります。
ルートを文章で書くと、
まず「colorApp」フォルダに戻る → 「js」フォルダに行く → 「colorchecker.js」ファイルを見る
これをコードにしたのが「./js/colorchecker.js」です。
最初の「.」は、前のフォルダに戻る、「/」は区切りになりますので、「./」でHTMLファイルの前のcolorAppフォルダを指定することになります。そこから「js/」でjsフォルダに行き、「colorchecker.js」で参照したいファイルのアドレスが分かります。
これが相対パスという書き方になります。他、絶対パスもありますがここでは割愛。
CSSファイルも同様に、cssフォルダに作成します。ファイルの種類は「css」を選択します。
まとめ
headタグに、必要最低限のコード入力が完了しました！
この時点では、webページとしては何も表示されません。
次のページで中身の部分、bodyタグに記載していきます。
この記事記事を書いた人：
しずく
初心者向け記事の担当者です！