【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方


anchor

photo credit: Phong6698 Anchor via photopin (license)

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

GASユーザーのためのはじめてのHTML・CSS入門ということで、簡単なWebページの作成を目指しております。

前回の記事はコチラ。

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

HTMLの基本ということで、よく使うタグとして段落、見出し、箇条書きのタグの書き方について解説をしました。

さて、今回はHTMLで最も重要なタグと言っても過言ではない、リンクを作るaタグについてです。

ということで、GASユーザーのHTML入門としてリンクを貼るアンカータグの書き方です。

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

前回のおさらい

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

作成したHTMLファイル「index.html」はコチラです。

複雑に見えるかも知れませんが、これまでのシリーズでお伝えした要素しか使ってないっす。

そして、このHTMLファイルを表示すると、以下のようになります。

番号なし箇条書き

今回は、各記事のリンクを追加していきますよ。

aタグ:アンカーリンクを張る

さあ、今回はHTMLで最も重要と言っていい、リンクの作り方です。

リンクは以下のようにaタグを使って表します。

<a href=”リンク先のURL”>リンクするモノ</a>

aタグの「a」は、「錨」の意味を表すanchorの頭文字です。

なので、アンカーと言ったりもしますね。

href属性:リンク先URLの指定

さて、これまでのタグと違って、開始タグの中に何やら「href=…」みたいな文字列が含まれていますね。

これは「href属性」と呼ばれるもので、リンク先のURLを指定するものです。

ちなみに、「href」というのはHypertext Referenceの略で「エイチレフ」と言います。

そもそも、タグにはその種類に応じて、開始タグの中にいろいろな役割を持つ属性を含めることができます。

aタグもいくつかの属性をもたせることができますが、アンカーにリンク先URLがないというのもありえませんので、ほとんどの場合でhref属性を指定することになります。

aタグの使用例

また、aタグに挟むモノは、もちろん文字列でも良いですし、画像でもOKです。

例えば、以下のようにすれば、「いつも隣にITのお仕事」という文字列に、当ブログのトップページへのリンクを張ることができます。

ちなみに、Webページへの画像の配置の仕方については、また次回以降で紹介しますね。

アンカーを追加したHTML

さて、ではサイト名と各記事タイトルにアンカーを追加してみましょう。

HTMLのソースはこうなります。

Webページを表示すると以下のようになります。もちろん、リンクをクリックすると、各ページに遷移しますよ。

GASによるWebページにアンカーリンクを追加した

まとめ

以上、GASユーザーのためのHTML入門ということで、リンクを張るアンカータグの書き方について解説をしました。

リンクを張るならaタグでhref属性にURLを指定!

これでOKです。

次回ですが、GASのWebページに画像を貼る方法についてお伝えします。

GASのWebページにGoogleドライブ内の画像を挿入する方法
GASユーザー向けHTML入門ということで簡単なWebページの作り方をお伝えしています。今回は、Google Apps ScriptによるWebページにGoogleドライブ内の画像を挿入する方法です。

どうぞお楽しみに!

連載目次: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の設定

The following two tabs change content below.
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント