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

photo credit: thatSandygirl Tomato Garden Marker via photopin (license)

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

GASユーザーのためのHTML・CSSによるWebページ制作入門をお伝えしています。

前回の記事はコチラ。

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

GASユーザーのためのはじめてのHTML・CSSによるWebページ入門です。今回は、HTMLやタグとは何か、またGASで作成した最も簡単なWebページのHTMLファイルの内容について解説をしていきます。

GASでものすごい簡単なWebページを作成したのですが、そのHTMLファイルの内容について解説をしました。

さて、今回からもうちょっと「それっぽい」Webページ制作を目指しますよ。

ということで、GASユーザーのためWebページ作成入門ということで、よく使う基本のHTMLタグについて解説をします。

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

目指すWebページのイメージ
Webページは「コンテンツの中身」と「装飾」でできている
記事紹介ページのHTMLファイル
よく使うHTMLタグ
まとめ
連載目次：GASユーザーのための初めてのHTML・CSS講座

目指すWebページのイメージ

さあ、当面の目標として、こんなWebページを制作することを目指したいと思います。

ノンプログラマーにしてはそこそこそれっぽいですよね。

このページを目指して、一つ一つノウハウやテクニックをお伝えしていきますよ。

Webページは「コンテンツの中身」と「装飾」でできている

さて、Webページを作るといったときに、Webページは大きく、以下の２つに分けて考えることができます。

1. コンテンツの中身
2. 装飾

コンテンツの中身については、前回の記事でh1タグを使ったり、少し触れましたよね。

コンテンツの中身を担当するのがHTMLという理解でOKです。

ただ、ほらご覧ください。

装飾、ペラッペラですよね。

こんなんじゃ、恥ずかしくて公開できないですよね。

それで、この状態からいろいろと装飾をするためには、ここからひと工夫する必要があります。

装飾を担当するのがCSSというやつです。

HTMLファイルに対して、CSSで装飾の指示を加えることで、ビジュアル的に見るに耐えうるWebページを作ることができます。

ただ、CSSも含めていきなり一気に理解しようとすると、アタマがごちゃごちゃになってしまいますので、まずは「コンテンツの中身」に集中！

「装飾」つまりCSSについては、ひとまず置いておいて進めていきますよ。

なので、しばらくはペラッペラのページしか堪能できません。覚悟してついてきてください。

記事紹介ページのHTMLファイル

HTMLファイル「index.html」を以下のように変更しましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    いつも隣にITのお仕事
    <h1>GASのおすすめ記事一覧</h1>
    いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。

    <h2>連載目次：超初心者向けGASでBotを作りながら基礎を学ぶ</h2>
    Google Apps Script（GAS）をはじめるためのメリットは山程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめしたいのが「Bot」の作成です。このシリーズでは、超初心者向けにGASでBotを作る方法を題材としながら、GASプログラミングの一通りの流れと書き方について学んでいきます。
    <ol>
      <li>【初心者向けGAS】本当の最初の一歩！スクリプトエディタでプロジェクトを開く</li>
      <li>【初心者向けGAS】はじめてのスクリプトを作成し、保存し、実行する</li>
      <li>【初心者向けGAS】プログラミングに必須の変数の使い方とデータ型について</li>
      <li>【初心者向けGAS】ログを表示するLogger.logの使い方</li>
      <li>【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないために</li>
    </ol>
    （以下略）
      
    <h2>連載目次：GASユーザーのための初めてのHTML・CSS講座</h2>
    Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！
    <ol>
      <li>Google Apps Scriptで最も簡単なWebページを作成して公開する</li>
      <li>GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説</li>
      <li>GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説</li>
    </ol>
  </body>
</html>

けっこう複雑に見えますよね。

このHTMLコードを保存して、スクリプトエディタのメニューから「公開」→「ウェブアプリケーションとして公開」をクリック。

続いて、以下「ウェブアプリケーションとして導入」ダイアログで「最新のコード」をクリックします。