TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】
icon
icon
HTML

Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】

初心者向けにGoogle Apps Script とHTMLでの活用術について解説しています。Google Apps Script(GAS)はGoogleのサービスと連携したwebアプリケーションの作成と公開を行うことができるツールです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Google Apps Script をHTMLで活用する術について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

Google Apps Script とHTMLでの活用術について詳しく説明していくね！

大石ゆかり

お願いします！

 

Google Apps Script(GAS) とは

GoogleAppsScriptとは、システム開発を行うためのGoogleの提供する総合的なプログラミング環境のことを指します。

Googleアカウントに登録した場合、Googleドキュメントやスプレッドシート、メール機能のGmailなど様々なGoogleのサービスを利用可能です。

無料で使用できるGoogle関連サービスをビジネス向けにしたものがGSuiteと呼ばれており、有料で提供されています。

更にビジネス向けのGSuiteなどをより使いやすくするために、自分で拡張したりカスタマイズすることができるものがGoogle Apps Script(GAS)です。

 

Google Apps Script(GAS) をHTMLのコーディングに活用する方法

GSuiteDeveloperHubに新しい空のプロジェクトを作成し、HTMLファイルにコードを記述することでWebアプリケーションとして出力することができます。

GASのプログラミングはJavaScriptをベースにしているため、同じように関数を使用可能です。

出力したいhtmlのコードを新しいプロジェクト内のhtmlファイルに記述しましょう。

その後、gsファイル（コード.gs）にJavaScriptを記述することで出力できます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

役に立つ主な機能の紹介など

GoogleAppsScriptには他にも様々な活用方法が存在しています。

HTMLを出力する場合にサーバーを用意しなくとも、HTMLファイルをWebアプリケーションとして出力することが可能であり、メールの自動化やエクセルのマクロをGoogleに置き換えることもできます。

また、マクロをGoogleサービスで使えるようにすることで、他のWebアプリケーションへの組み込みや連携が可能となり、GSuiteの管理をしやすくなるように拡張することも可能です。

ユーザー一覧を抜き出したり、各ユーザーの権限を変更をすることもできるため、汎用性は非常に高いといえます。

GoogleAppsScriptには、主にビジネス用として業務効率化の役に立つ機能が多くあるといえるでしょう。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

HTMLでdlタグでnewsページを作る方法を現役エンジニアが解説【初心者向け】

HTMLでdlタグでnewsページを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。   その1つの解決策として、「レスポン...
CSS

今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、...
HTML

HTML5でcanvas要素を使ってグラフを描画する方法を現役エンジニアが解説【初心者向け】

HTML5でcanvas要素を使ってグラフを描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLで特殊文字を使って縦線を表示する方法を現役エンジニアが解説【初心者向け】

HTMLで特殊文字を使って縦線を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

あわせてよく読まれている記事

業務効率が上がる！Google Apps Scriptとは【初心者向け】

この記事では、Google Apps Scriptについて解説しています。 Google Apps Scriptとは何なのか、何ができるのか解説しています。普段の業務でGoogleスプレッドシートなどを利用している方は業務効率が上がるので、理解し使えるようになると便利でしょう。   田島悠介 今回は、Google Apps Scriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Google Apps Scriptの特徴、基本の書き方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Google Apps Scriptとは Google Apps Scriptがあるサービス Google Apps Scriptでできること Google Apps Scriptのメリット Google Apps Scriptのデメリット 基本構文の書き方   Google Apps Scriptとは Google Apps ScriptとはGoogleが提供しているプログラミング環境です。GAS（ガス）という略称でも呼ばれています。 Googleのアカウントを持っていれば、利用する事ができるので、Webからファイルをダウンロードするといった事は行う必要がありません。 Google ChromeはもちろんFirefoxやInternetExplorerでも利用できます。 Googleスプレッドシートなどでも利用できるので、OfficeのExcelに備わっているVBA（Visual Basic for Applications）と似た言語と想像される方がいるかと思いますが、JavaScriptをベースしているため、違う点は多数あります。 ただ、スプレッドシートにのみではありますが、Officeの機能にある「マクロ機能」が追加されていますので、使い勝手は近しいものがあると思います。   [PR] Webデザインで副業する学習方法を動画で公開中Google Apps Scriptがあるサービス 該当するサービスの一覧は以下の通りとなります。 ドキュメント スプレッドシート フォーム スライド ドライブ 仕事ではスプレッドシートをよく使用するのではないかと思いますが、特定の条件下（スプレッドシートを開いた時や特定の時間帯など）になった時に自動的に処理を実行させたり、メニューに自分で作成したプログラムを追加する事もできますので、作業の効率化に大きく貢献します。   Google Apps Scriptでできること 上記に「Google Apps Scriptがあるサービス」を記載しました。 上記を見た上でGmailやカレンダーではGoogle Apps Scriptは書けないのか？という疑問が浮かぶ方がいるかもしれません。 Gmailやカレンダーといったサービス上ではGoogle Apps Scriptを書く場所はありません。 ※設定画面やメニューなどで「マクロ」や「スクリプトエディタ」という項目はないと思います。 ただ、スプレッドシートやドライブ上でGmailやカレンダーに関連したGoogle Apps Scriptを書くことができ、自動的にメールを送信させたり、カレンダーにスケジュールを記載させる事も可能になります。 また、Web情報の取得や外部サービス（LINEやSlackなど）にメッセージを送信する事も可能です。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
Google Apps Script

WordPressでGoogle Analyticsを導入する方法【初心者向け】

Googleアナリティクスとは、Googleが提供する無料のアクセス解析ツールです。 WordPressのサイトにも導入することができます。 Google Analyticsを使えば、サイトの訪問者数（セッション数）、離脱数、流入経路、滞在期間など多くの情報を計測できるようになります。   今回は、WordPressにGoogle Analyticsを導入する方法を解説します。 導入には、テーマを編集する方法とプラグインを使う方法があるので、それぞれ説明していきます。 目次Google Apps Script(GAS) とはGoogle Apps Script(GAS) をHTMLのコーディングに活用する方法役に立つ主な機能の紹介など執筆してくれたメンター   大石ゆかり 田島メンター！！Google AnalyticsでWordPressのサイトを解析したいんですけど、どうやったらいいんですか？ 田島悠介 Google Analyticsのタグを発行して、テーマに挿入するんだ。一緒にやってみようか。   Google Analyticsのタグを発行する まず事前準備としてGoogle Analyticsのタグの発行が必要です。 Google Analyticsのサイトにアクセスし、「お申し込みはこちら」を押してください。 必要項目を記入しアカウントを発行します。   入力画面では、主に下記の項目を入力します。 【アカウント名】：任意の名前を入力 【ウェブサイトのURL】：Google Analyticsを設定するサイトのアドレス 【タイムゾーン】：日本を選択 【職業】：登録するウェブサイトの内容と関連する業種を選択   入力が完了すると、「アナリティクス設定」のタブからトラッキングIDとトラッキングコードが取得できます。 この情報はあとで使いますので、どこかにコピーしておくと便利です。 ここまでできたらWordPressを操作していきます。     WordPressのテーマを編集する まずはWordPressのテーマを編集する方法です。   まず、ダッシュボード>外観>テーマ編集をクリックします。   右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。   ソースコードが表示されたら、</head>を探してください。 見つかりにくい時はCtrlキー＋F（Macの場合は⌘+F）を押すと、ページ内検索ができるので、使ってみてください。   見つかったら、先ほど発行したGoogle Analyticsのトラッキングコードを貼り付けます。 最後に、「ファイルを更新」ボタンを押せば、設定完了です。 間違って他のコードを変えないようにご注意ください。   大石ゆかり できましたけど、少し複雑ですね・・・。 田島悠介 そうだね。あ、でも手軽にプラグインでも使えるよ！ 大石ゆかり プラグインの使い方も教えてください！！！   [PR] Webデザインで副業する学習方法を動画で公開中プラグインを使ってGoogle Analyticsを導入する ここでは、プラグインを利用したGoogle Analyticsの導入方法を３つ解説します。 1. Google Analytics for WordPress 2. All in One SEO Pack 3. Site Kit これら3つの役割と利用例を記載します。 まずはテーマを編集する方法を説明しましたが、初心者の方にとっては多少面倒かもしれません。 WordPressのプラグインを使えばもっと簡単に導入することができます。 Google Analytics for WordPress ここでは「Google Analytics for WordPress」というプラグインで説明します。 まずは、Google Analytics for WordPressをインストールしましょう。 やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。 インストールが完了すると、管理画面＞設定＞Google Analytics にプラグインが表示されます。 管理画面は全て英語ですが、操作はとても簡単なので大丈夫です。 少し小さい字で書いてある、「Manually enter your UA code」にチェックを入れてください。 チェックを入れると、UAコードを入力するテキストボックスが表示されるので、そこへトラッキングIDを入力します。 ※UAコードとは、トラッキングコードのページに大きく記載されている「UA-XXXXXXX-XX」というコードです。   最後に、「Update Google Analytics Settings」を押せば入力完了です。  All in One SEO Pack ここでは、 All in One SEO Packについて解説します。  All
WordPress

JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次Google Apps Script(GAS) とはGoogle Apps Script(GAS) をHTMLのコーディングに活用する方法役に立つ主な機能の紹介など執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 別ファイルの関数を呼び出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ファイルを読み込む方法 HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。 scriptタグを実装する位置は2種類あります。 headタグに実装する場合 bodyタグの終了タグの直前に実装する場合   headタグに実装する場合 headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。 ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。 Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。 注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // スクリプトを<body>内で実行する </script>   bodyタグの終了タグの直前に実装する場合 現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。 bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。 複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>   別ファイルの関数を呼び出す方法 head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。 HTMLサンプルコード <html> <head> <meta charset="utf-8" /> <title></title> <script src="sample1.js"></script> <script src="sample2.js"></script> </head> <body> <input type="button" id="b1" value="ボタン1" onclick="sample1()"> </body> </html> sample1.jsサンプルコード function
JavaScript

JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでGoogle Calendar APIを実装する方法についてTechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせて見てみましょう。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでGoogle Calendar APIを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Google Calendar APIとは Googleカレンダーとは、クラウドのカレンダー画面で予定を管理するサービスの名前です。 APIとは、Application Programming Interface)の略です。 APIはアプリなどのサービスの機能を画面を通さずに直接呼び出して使うもので、画面を通さずに直接呼び出すことで一部の機能だけを利用し、自分のサイトやサービスに追加することができます。 そして、今回は公開されているGoogleカレンダーの「日本の祝日」から、APIを使って祝日名と日付を取得していきましょう。 JavaScriptでGoogle Calendar APIを実装する方法 下記の3つの手順でJavaScriptを書く前の準備が必要です。 Googleアカウントを用意する APIの操作に必要なキーを用意する APIで操作するカレンダーのIDを用意する 準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。 それでは、それぞれの手順の具体的な方法を確認していきましょう。   Googleアカウントを用意する すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。 アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。   APIの操作に必要なキーを用意する APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。 次の3つのステップをおこなってください。 1.Google Calendar APIのページにアクセスします。2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。 3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。   APIで操作するカレンダーのIDを用意する Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。 カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「＋」を押してみましょう。 表示されたメニューから「関心のあるカレンダーを探す」を選択してください。 カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。 日本の祝日の「＋」横にあるメニューから「設定」を選択します。 設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。 これで準備完了です。 では、JavaScriptでAPIの呼び出しです。 Googleから提供されているライブラリを下記のように読み込みます。 <script src="https://apis.google.com/js/api.js"></script> 後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 今回はHTMLソースの中にscriptタグでJavaScriptを書いていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id='resultArea'></div> </body> <script src="https://apis.google.com/js/api.js"></script> <script> const API_KEY
JavaScript

jQueryのclickメソッドを使ってクリック時の処理を設定する方法

JavaScriptのライブラリであるjQueryのclickメソッドを使った処理の書き方を解説しています。 ボタンを押した時などclickメソッドはjQueryの中でもよく使うものなので、今のうちに習得しておきましょう。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   clickメソッドとは jqueryのメソッドは通常以下のようなfunction内に記述されていきます。 $(function(){ 　　//処理の内容　 }); しかしこのプログラムだと、ページがリロードした瞬間にコードが実行（発火とも言います）されてしまうため、jQueryの本来の目的である、ページを動的に変更するという目的が達成できません。 そのためjQueryには発火するタイミングを指定するメソッドが用意されています。clickメソッドは、指定したボタンが押された時に呼び出される処理を作ることができます。   大石ゆかり 田島メンター！jQueryで要素を取得できるようになったので、取得した要素にイベントを設定したいのですが、jQueryで出来ますか？ 田島悠介 もちろん！とりあえずclickイベントを設定してみよう！ 大石ゆかり ボタンクリックなど、クリックイベントは基本ですよね。 田島悠介 clickメソッドを使って書くんだよ。さっそく見てみよう！   clickメソッドの書き方 clickメソッドの書き方は以下の通りです。 $(function(){ $(“セレクタ”).click(function(){ //処理の内容 }); }); セレクタでボタンを指定した後に、clickメソッドを呼びだします。 clickメソッドの引数でfunctionを呼び出し、functionの中身が実行されます。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう それではclickメソッドを使用して簡単な処理を書いていきましょう。 ボタンをクリックすると文字が大きくなる 今回はボタンをクリックすると、文字が大きくなるというプログラムを書いていきます。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function() { $("button").click(function() { $(".big").css("font-size", "50px");
JavaScript

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] Webデザインで副業する学習方法を動画で公開中linkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】