GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説

photo credit: Tomas Caspers hn via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

GASユーザーのためのはじめてのHTML・CSSによるWebページ入門です。

前回の記事はコチラ。

GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説

GASユーザーのためのHTML・CSSによるWebページ制作入門を伝えしています。今回は、GASでWebページを表示するdoGet関数のスクリプトとその仕組について丁寧に解説をしていきますよ！

GASで最も簡単なWebページを作成・公開しましたが、その「コード.gs」のdoGet関数の内容について解説をしました。

今回は、HTMLファイル「index.html」について解説をしていきますよ。

ということで、GASで作成した最も簡単なWebページのHTMLファイルについて解説をしていきます。

では、行ってみましょう！

前回までのおさらい
HTMLとは
1. HTMLタグの記述の基本
2. 要素、開始タグと終了タグ
HTMLファイル「index.html」の中身
Webページを表示
まとめ
連載目次：GASユーザーのための初めてのHTML・CSS講座

前回までのおさらい

まず、前回までのおさらいです。

こちらが前回紹介した「コード.gs」のスクリプトですね。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

もう一つ、プロジェクト内には以下のようなHTMLファイル「index.html」を作成していたのでした。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello HTML!</h1>
  </body>
</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>

この記述は、DOCTYPE宣言と呼ばれるもので、この文書がどのバージョンのHTMLで書かれているのかを宣言する役割を持っています。

この宣言は文書の先頭に記述します。

だいぶ、あっさり目の表現で、バージョンを表す数値のようなものが見当たりませんが、この記述は、この文書が「HTML5」で書かれていることを宣言するものです。

まあ、お決まり文句だと思っていただいてもOKです。

htmlタグ：HTMLコードの範囲

続いて、2行目から9行目。全体が以下のように、htmlタグで囲まれているのを確認してください。

<html>
　HTMLコード
</html>

htmlタグはHTMLコードの範囲を表すタグです。

HTMLファイルに記述するHTMLコードは、全てこのhtmlタグの間に記述することになります。

まあ、これもお決まり文句ですね。

headタグ：Webページに関連する情報と設定

続いて、htmlタグのすぐ下の階層が、head要素とbody要素の2つに大きく別れていることに注目してください。

headタグの中には、そのWebページに関連する情報や設定などを記述します。

<head>
　Webページの情報や設定
</head>

headタグの内容は、実際にWebページとして表示されるものはないんですね。

bodyタグ：Webページに表示される本体

そして、実際にWebページに表示される本体は、以下のbodyタグ内に記述することになります。

<body>
　Webページの情報や設定
</body>

baseタグ：ベースURLと表示場所

さて、headタグの中、4行目ですが、baseタグというものがあります。

baseタグは、リンクを開く際のベースとなるURLと表示場所を指定するもので、終了タグは使わずに記述します。

このタグについては、ひとまずこういうもんだということで置いておいてください。

h1～h6タグ：見出し

7行目にh1タグというのがありますね。

これは見出しを表すタグで、見出しの中で最も大きいものを表します。

<h1>見出し</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タグ

次回、その他のよく使うHTMLタグについて紹介をしていきます。

【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します

GASユーザーのためのHTML・CSSによるWebページ制作入門をお伝えしています。今回は、Google Apps ScriptによるWebページをする際に、よく使う基本のHTMLタグについて解説をします。

どうぞお楽しみに！

連載目次：GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！