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

header-tag

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ファイルについて解説をしていきます。

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

スポンサーリンク

前回までのおさらい

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

こちらが前回紹介した「コード.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まで合わせて、6段階の大きさがあります。数値が大きくなるほど、見出しの大きさは小さくなります。

「h」はheaderの頭文字ですね。

今回の例で、実際に表示されているのは、このh1要素だけですね。

見出しは、文書の構造やSEOでいうと非常に重要な役割を持っているのですが、GASで作るWebページでは、そこまでセンシティブにならなくても大丈夫かなとも思います。

Webページを表示

以上がHTMLファイル「index.html」の解説になります。

再度、このWebページの表示を確認しておきましょう。

GASで作成した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環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定
タイトルとURLをコピーしました