HTMLのhead要素－初心者もできる！プログラミング基礎講座【第5回】

2021年4月5日2023年9月6日

シリーズ記事「初心者もできる！プログラミング基礎講座」の第5回は、HTMLの主要要素であるhead（ヘッド）についてです。第2回で解説した通り、ここにはページの設定情報を記述します。実際のサイトには表示されない情報ですが、大切な部分です。どんなことを記述すればよいのでしょうか。

エディタの補完機能を利用して記述

最近のエディタには、プログラミング言語の記述を補完する機能がついています。HTMLやhead要素内に含める情報は、基本的に”定型文”です。補完機能のあるエディタで要素を入力すると、その要素に必要な情報を終了タグまで保管してくれます。便利ですね。

Atomを使用する場合

無料で人気のエディタのAtomを使用する場合で、補完機能を解説します。Atomのインストールはこちらからできます。（Windows版）

Atomを立ち上げると、最下部に黒帯で管理バーが表示されます。

この部分の右端に表示されている情報の「Plain Text」をクリックします。

今回のようにHTMLファイルを作成する時には、表示されるリスト内から「HTML」を選択します。検索窓に「html」と入力すると早いです。先程の管理バーの「Plain Text」の部分が「HTML」に変わり、HTMLでの補完機能が有効になります。

1行目に「html」と入力してみてください。

画像のように入力した文字の候補が表示されます。赤枠の部分をクリックします。もしくは「html」と入力し「Tab」キーを押してください。

上の画像のように、HTML要素で基本的に必要なタグが自動的に記述されます。これが、エディタの補完機能です。HTMLの終了タグまでの基本要素（headとbody）も含まれていることを確認できます。

今回は、画像にある1～6行目にある情報について解説していきます。

この補完機能はHTMLの他の要素でも有効です。最初の数文字を入力すると候補が表示されます。選択すれば、その要素に必要な情報が終了タグまで記述されます。HTMLだけでなく、CSSファイルなどでも同様です。「Plain Text」のところに使用する言語を選択するだけです。素晴らしい機能ですね。

HTMLのバージョンの宣言

補完機能により1行目に記述されたのは、HTMLのバージョンの宣言です。これはバージョンによって決まっている、まさに”枕詞”です。現在、通常使われているバージョンHTML5はこの記述になります。そのままで大丈夫です。

ページの言語指定

htmlに lang=” ” を追加すると、このページ全体の言語を指定できます。補完機能で最初は「en」（english：英語）コードが入っています。日本語であれば言語コード「ja」に変更します。フランス語なら「fr」、スペイン語なら「es」といった具合に国際規格で決まっています。

dir=”ltr” が記載されていますが、これは文字の表示方向です。

<html dir=”ltr”>：左から右
<html dir=”rtl”>：右から左

日本語も英語も左から右に書くので、そのままの記述でOKです。アラビア語やヘブライ語のように右から左に書く言語の場合のみ”rtl”を使用します。

headに含める情報

基本的に以下の3つの情報を記述します。

文字コード
タイトル
ファイルの読み込み

文字コード

meta要素にcharset属性がついており、”utf-8″ が指定されています。これは文字コードです。HTML5バージョンで推奨されている文字コードは utf-8 です。文字化けしないようにするためにも、この指定があります。これも、補完された情報のままで問題ありません。

タイトル

これはページのタイトルを記述する部分です。開始タグと終了タグの間に書きます。ここに書いた情報がブラウザのタブに表示されます。

今回は、上の画像のように「プログラミング講座」と入力しています。

ファイルの読み込み

これは、補完機能では記述されていない点です。第3回で解説した通り、head内にCSSファイルの読み込みについて記述すると、HTMLの各要素がCSSで指定したデザインをもって表示されることになります。HTMLとCSSが連動するというわけです。

画像のように、<link rel=”stylesheet”>と記述します。補完機能で「link」と入力すれば候補が出てきます。これに、href属性も使用してCSSのファイル名を指定しています。第3回でCSSファイルを「stylesheet.css」というファイル名にしました。画像では、このファイル名が指定されています。これで、CSSで指定したスタイルをHTMLの要素に持たせることができます。

HTMLファイルの保存

解説してきた点を記述しました。

body要素には画像のように記述しています。これがサイトで表示される部分です。とりあえず、HTMLファイルに名前を付けて保存しておきましょう。ファイル編集後に保存されていない場合、Atomではファイルタグの右に青丸がつきます。上の画像の場合もそうなっています。

ファイルタグから「保存」したり、Windowsなら「Ctrl + S」キーで保存できます。ファイル名は半角英数で自由に付けられますが、通常、最初に表示させるページは「index.html」というファイル名（画像の赤囲み部分）にすることに決まっています。

アップロードして確認してみる

HTMLファイルだけなら多くの場合ブラウザでも表示できますが、CSSや画像ファイルなどと連動させる場合には、ファイルをサーバーにアップロードして確認する必要があります。自分のPC（ローカル）にあるファイルを、サーバーへアップロードするということです。

今回HTMLのhead内にCSSの読み込みについて記述しました。それで、HTMLファイル（index.html）とCSSファイル（stylesheet.css）をサーバにアップロードして、実際に正しく機能しているか確認してみましょう。

CSSファイルについては、第4回で説明した点を反映した簡単なファイルをアップロードしてみます。

画像のように、HTMLのh1（セレクタ）に対していくつかのプロパティを記述しています。

ファイルのアップロードの際に必要となるのが、第1回でも書いたFTPソフトです。すでに使用しておられるかもしれません。まだであれば、無料で使えるもので機能も十分ですのでインストールしておきましょう。わたしはFileZilla（ファイルジラ）という無料のFTPソフトを使用してます。FileZillaのインストールについては、以下の記事が参考になります。

[blogcard url=https://shu-sait.com/filezilla-download-install/]

サイトマネージャーを使用して、サーバーとFTP接続しましょう。これで双方向でファイル転送ができるようになりす。あとはサーバー側のフォルダーに間違えないようにアップロードするだけです。多くのレンタルサーバーで通常アップロードするフォルダーは「public.html」です。アップロードと確認の方法は、以下の記事が参考になります。

[blogcard url=https://shu-sait.com/file-server-upload/]

index.htmlとstylesheet.cssファイルをアップロードできたら、実際にドメインにアクセスしてブラウザで表示できているか確認しておきましょう。