みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
GASユーザーのためのはじめてのHTML・CSSによるWebページ入門です。
前回の記事はコチラ。
GASで最も簡単なWebページを作成・公開しましたが、その「コード.gs」のdoGet関数の内容について解説をしました。
今回は、HTMLファイル「index.html」について解説をしていきますよ。
ということで、GASで作成した最も簡単なWebページのHTMLファイルについて解説をしていきます。
では、行ってみましょう！
前回までのおさらい
まず、前回までのおさらいです。
こちらが前回紹介した「コード.gs」のスクリプトですね。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
もう一つ、プロジェクト内には以下のようなHTMLファイル「index.html」を作成していたのでした。
Hello HTML!
こちらのHTMLファイルがWebページに表示する内容を担っているのです。今回はこちらのHTMLファイルの内容について解説をしていきます。
HTMLとは
HTMLとはHyper Text Markup Languageの略で、Webページを作るためのマークアップ言語です。
マークアップというのは、「マークをつけること」です。
今回解説するHTMLファイル「index.html」には、<タグ>～</タグ>という形式の記述がたくさんつけられていましたね。
この記述を「タグ」といい、これがHTMLの「マーク」になります。
HTMLタグの記述の基本
HTMLの記述ですが、以下のようにタグで挟む記述が基本になります。
タグにはたくさんの種類があり、どのタグを使うかによって
- タグの内容は見出しですよ～
- タグの内容はリンクですよ～
- タグの内容は段落ですよ～
などという、「マーク」になるわけです。
要素、開始タグと終了タグ
ここで、最初のタグを開始タグ、末尾のタグを終了タグと言います。
また、開始タグから終了タグまでの塊をあわせて要素と言います。
なお、一部のタグには終了タグを使わないものもあります。
HTMLファイル「index.html」の中身
では、今回使用しているHTMLファイル「index.html」の内容について解説をしていきます。
DOCTYPE宣言
まず、1行目。
この記述は、DOCTYPE宣言と呼ばれるもので、この文書がどのバージョンのHTMLで書かれているのかを宣言する役割を持っています。
この宣言は文書の先頭に記述します。
だいぶ、あっさり目の表現で、バージョンを表す数値のようなものが見当たりませんが、この記述は、この文書が「HTML5」で書かれていることを宣言するものです。
まあ、お決まり文句だと思っていただいてもOKです。
htmlタグ：HTMLコードの範囲
続いて、2行目から9行目。全体が以下のように、htmlタグで囲まれているのを確認してください。
HTMLコード
</html>
htmlタグはHTMLコードの範囲を表すタグです。
HTMLファイルに記述するHTMLコードは、全てこのhtmlタグの間に記述することになります。
まあ、これもお決まり文句ですね。
headタグ：Webページに関連する情報と設定
続いて、htmlタグのすぐ下の階層が、head要素とbody要素の2つに大きく別れていることに注目してください。
headタグの中には、そのWebページに関連する情報や設定などを記述します。
Webページの情報や設定
</head>
headタグの内容は、実際にWebページとして表示されるものはないんですね。
bodyタグ：Webページに表示される本体
そして、実際にWebページに表示される本体は、以下のbodyタグ内に記述することになります。
Webページの情報や設定
</body>
baseタグ：ベースURLと表示場所
さて、headタグの中、4行目ですが、baseタグというものがあります。
baseタグは、リンクを開く際のベースとなるURLと表示場所を指定するもので、終了タグは使わずに記述します。
このタグについては、ひとまずこういうもんだということで置いておいてください。
h1～h6タグ：見出し
7行目にh1タグというのがありますね。
これは見出しを表すタグで、見出しの中で最も大きいものを表します。
見出しにはh1要素を最大として、以下h6まで合わせて、６段階の大きさがあります。数値が大きくなるほど、見出しの大きさは小さくなります。
「h」はheaderの頭文字ですね。
今回の例で、実際に表示されているのは、このh1要素だけですね。
見出しは、文書の構造やSEOでいうと非常に重要な役割を持っているのですが、GASで作るWebページでは、そこまでセンシティブにならなくても大丈夫かなとも思います。
Webページを表示
以上がHTMLファイル「index.html」の解説になります。
再度、このWebページの表示を確認しておきましょう。
表示されているのは、h1要素「Hello HTML!」のみとなりますね。
まとめ
以上、GASで作る最も簡単なWebページのHTMLファイルについて解説をお送りしました。
以下のような内容が理解いただければOKです。
- HTMLとはなにか
- タグの基本的な記述の仕方
- htmlタグ、headタグ、bodyタグ
次回、スクリプトレットタグについて解説をしたいと思います。
どうぞお楽しみに！