TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLによるファビコンの設定方法を現役デザイナーが解説【初心者向け】
HTML

HTMLによるファビコンの設定方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLによるファビコンの設定方法について解説しています。これはサイトを開いたときにタブに表示されたり、ブックマークを行ったときにタイトルの頭につけられるものです。ファビコンの作り方と設定方法を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLによるファビコンの設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

ファビコンの設定方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

ファビコン（favicon）とは

ファビコンとはブラウザでWebサイトを閲覧した際に、サイト名の左側に表示されるアイコンのことを指します。ファビコンは複数のWebサイトを開いている場合には、Webサイト名が隠れファビコンだけが表示されるのでサイトの視認性も良くなり、ユーザビリティも良くなります。
ファビコンのないサイトではブラウザによって地球のような丸い表示や角の折れた紙のような表示、ブラウザそのものマーク等が表示されています。少しでもWebサイトを他より目立たせ、細部にまで気を使うにはファビコンの設定は必要なものとなります。

 

ファビコン（favicon）の設定方法

ファビコンの設定方法としてまず、アイコン用の画像を用意します。拡張子としてはpng、gifなどで問題ありません。一部にはicoファイルを使って作成しているものもあります。
作られたファイルをimageフォルダ等の直下に置き、htmlファイルから呼び出します。htmlファイルかあ外部ファイルを呼び出すには、htmlファイルのhead要素の中にlink要素を記述していきます。rel属性は”icon”、type属性は”image/x-icon”として記述します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

(index.html)

<head>

  <link rel="icon" type="image/x-icon" href="image/icon.png">

</head>

 

今回はコーヒーカップのアイコンをファビコンに設定しました。

imageフォルダ内の任意のファイルが表示されれば成功です。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

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

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

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

HTMLでstrikeタグを使う注意点を現役デザイナーが解説【初心者向け】

HTMLでstrikeタグを使う注意点について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLエラーチェッカーの使い方を現役デザイナーが解説【初心者向け】

HTMLエラーチェッカーの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】

HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...
HTML

YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】

YouTubeの動画をHTML5に埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

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

WordPressでファビコンを表示させる方法【初心者向け】

ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン（favicon）」といいます。 TechAcademyマガジンのファビコンはこの画像のように表示されています。   ファビコンは単に装飾ではなく、ブランディング力向上や、クリック率UPの効果があるとも言われています。 WordPressでもファビコンを簡単に表示することができます。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressでファビコンってどうやって変更するんでしたっけ？ 田島悠介 ファビコンを変更する方法は「テーマを編集する方法」と「プラグインで変更する方法」の2種類あるんだ。両方知っておいて損はないから、両方教えてあげるね。 大石ゆかり はい、お願いします！！！   今回は、 テーマファイルを編集する方法 プラグインを利用する方法 の2つの方法に分けて紹介します。     事前準備：favicon用のファイルを作成する まず、事前準備としてfaviconの画像を用意します。ファビコン用画像の作り方は簡単です。 画像はPhotoshopなどの画像作成ソフトで、正方形で作り、それをfaviconの形式（.ico）に変換します。   ファイルの変換はFavicon From Picsというサイトが便利です。 サイトにアクセスし、ファイルをアップすると変換してzipファイルのダウンロードが可能になります。 zipファイルを解凍したら、いよいよfaviconの設定を行います。     テーマファイルを編集する方法 FTPソフトを利用して、任意の場所にfaviconアイコン（拡張子が.ico）をアップロードする方法です。 今回は、WordPress本体と同じ階層にアップロードした前提で説明します。 （wpというフォルダの中にwordpressがある場合は、wpというフォルダの中にアップロードします）   次に、ダッシュボード>外観>テーマ編集をクリックします。   右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。   ソースコードが表示されたら、</head>を探してください。 見つかりにくい時はCtrlキー＋F（Macの場合は⌘+F）を押すと、ページ内検索ができます。   ここで下記のソースコードをコピー&ペーストしてください。 <link rel=”SHORTCUT ICON” href=”http://ドメイン名/wp/ファビコン名.ico” /> 日本語部分は、自分のサイトに合わせて変更しましょう。 Faviconファイルをアップロードした場所によって、href=” “の部分の表記が変わるので、注意が必要です。   完了したら、「ファイルを更新」ボタンを押すと、反映されます。     [PR] HTML/CSSで挫折しない学習方法を動画で公開中プラグインを利用する方法 テーマを直接編集するのは難しい、という場合はプラグインを利用すると便利です。 いろいろなプラグインがありますが、今回はFavicon Rotatorというプラグインを使用します。 まずは、このプラグインをインストールします。 やり方がわからない場合は、WordPressプラグインのインストール方法の記事を御覧ください。   インストールが完了したら、 ダッシュボード>外観>Faviconをクリックし、設定画面を開きます。   「Add Icon」というボタンをクリックし、faviconに設定したい画像を選択します。   ファイル形式やサイズは自動調整されるので、特に事前にファイル変換等はしなくても大丈夫です。 画像をアップロードしたら、ウィンドウ下部の「Add Browser Icon」をクリックします。 これでしばらくすると、faviconが反映されます。 反映に時間がかかる場合があるので、焦らず待ってみてください。     うまくいきましたか？ WordPressをさらにカスタマイズしたい場合は、WordPressでウィジェットを編集する方法の記事も合わせてご覧ください。   大石ゆかり ファビコンを変更できました♪ありがとうございました！ 田島悠介 ファビコンってとても地味だけど、サイトのイメージを表すからきちんと変更しておくことが大事だね♪ 大石ゆかり はい、そうですね♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

サイトfavicon.htmlkit.comでFaviconを作成する方法を現役デザイナーが解説【初心者向け】

サイトfavicon.htmlkit.comでFaviconを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 サイトfavicon.htmlkit.comでFaviconを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ファビコンとは ファビコンとは、ウェブページを開いたブラウザのタブや、お気に入りに追加したページタイトルの横に表示されるアイコン画像のことです。   サイトfavicon.htmlkit.comの解説 favicon.htmlkit.comはファビコン画像をオンラインで生成してくれるウェブサービスです。 http://favicon.htmlkit.com/favicon/   [PR] HTML/CSSで挫折しない学習方法を動画で公開中サイトfavicon.htmlkit.comでFaviconを作成してみよう ここでは星型のファビコンを作成したいと思います。まず、正方形の画像を用意します。 用意できたらファイルを選択ボタンから作成した画像を参照します。 アップロードが完了すると、ダウンロード画面に変わります。ダウンロードリンクをクリックしてファイルをダウンロードします。 ダウンロードしたフォルダを開き確認すると、favicon.icoファイルが生成されていますね。 こちらをサーバーにアップしmetaに下記コードを記述することで反映されます。 hrefはサーバーにアップしたfavicon画像までのパスを指定します。 <link rel="icon" href="https://abc.com/ico/favicon.ico" />   監修してくれたメンター 舟橋幸太郎 フリーのWebデザイナー、グロースハッカーです。 KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。 TechAcademyではWebデザインコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

Favicon Rotatorの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressにファビコンを追加できるプラグイン、Favicon Rotatorの使い方を紹介します。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！ブラウザのタイトルのところにあるアイコン画像あるじゃないですか？ 田島悠介 あぁ、ファビコンのこと？ 大石ゆかり ファビコンっていうんですね！それをWordPressのサイトで変更したいんですけど、どうやればいいんですか？ 田島悠介 それなら「Favicon Rotator」っていうのを使えばできるよ！   Favicon Rotatorとは ファビコンとは、Wrbサイトを閲覧する際にタブに表示されるアイコンです。ブランディングなどに有効で、他サイトと比較してオリジナリティを表現できる箇所でもあります。 お気に入り登録した際にも表示され、設定することでサイトの信頼性やクリック率向上が期待できます。     Favicon Rotatorは、WordPressのサイトで簡単にファビコンを追加できるプラグインです。テーマファイルを編集する必要なく、面倒なサイズ調整などもしてくれるので、非常に簡単に設定できます。 また、このプラグインではファビコンだけでなく、スマホの画面にサイトへのリンクを作成したときに表示されるタッチアイコンも設定可能です。     プラグインをインストールする このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。   プラグインの設定ができると、ダッシュボード＞外観＞Favicon　というリンクが増えています。     [PR] HTML/CSSで挫折しない学習方法を動画で公開中ファビコンを追加する 管理画面は、非常にシンプルです。   登録したい画像を、Add Icon / Set Icon　をクリックして選択し、保存ボタンをクリックします。サイズは自動調整してくれるので問題ありませんが、正方形の画像を準備するほうが見た目がキレイです。 また、アップロードしたり、メディアファイルから選択するだけで、自動的にサイズを調整してくれます。もし、正方形でない画像を選択した場合は自動的にトリミングされます。     画像を追加したら、保存ボタンを押しましょう。 ブラウザでサイトを見てみると、設定したファビコンが表示されます。 今回の記事は以上です。   WordPressの他のプラグインを使って見たい場合は、W3 Total Cacheの使い方も合わせてご覧ください。   大石ゆかり 大きい画像でも小さくリサイズしてくれるのが便利ですね〜 田島悠介 そうだね。スマホのタッチアイコンの設定をできるから、スマホを意識しているサイトなら設定しておいたほうが良いね 大石ゆかり はい♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

CSSでbackground-imageが表示されないときの対処法を現役デザイナーが解説【初心者向け】【初心者向け】

CSSでbackground-imageが表示されないときの対処法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 background-imageが表示されないときの対処法について詳しく説明していくね！ 大石ゆかり お願いします！   background-imageが表示されない原因【見るべきポイント】 background-imageを使用してから背景画像の読み込みに失敗する場合、以下の通り、点検すべき項目を箇条書きにしました。 画像までのファイルパスにて相対パスの場合、相対パスのルートは間違っていないか 画像のファイルの名前と、実体のファイルの名前は同一になっているか プロパティと値の記述に誤字がないか ファイルパスを代入するためのurl()の記述にて、url[半角スペース]()になっていないか 全角スペースが混入していないか backgroundの略記法にて記述していないか background-imageを指定する要素が非表示になっていないか background-imageを指定する要素の幅や高さに値はあるか   実際に書いてみよう フォルダとファイルの構成は、下図を想定します。 [index.html] <header></header> [style.css] header { height: 500px; /* 空の要素なので、高さの定義が必要です。 */ background-image: url("../images/img_profile.jpg"); } img_profileの画像が背景画像として読み込まれました。山の写真です。次に、index.htmlとstyle.cssが、同一階層にあることを想定した場合は、以下になります。 [style.css] header { height: 500px; /* 空の要素なので、高さの定義が必要です。 */ background-image: url("images/img_profile.jpg"); } 前述の結果と同じです。そして、ファイルパスを絶対パスにて記述する場合を試します。以下のパソコンのアイコンの画像を背景画像として絶対パスにて参照します。 [css] header { height: 500px; /* 空の要素なので、高さの定義が必要です。 */ background-image: url("https://assets.techacademy.jp/assets/trial-illust-pc-c54f73b386e9b7cde27958c080d43ec76ab26745335c9665cc41d7e9d6e40f4a.png"); } 表示領域(サンプルコードは、header)の幅や高さより、画像のサイズが小さい場合は、上図の通り、背景画像として繰り返し表示されます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

CSSでURLを指定する方法を現役デザイナーが解説【初心者向け】

ここでは、CSSで背景画像などを指定する際に使用するURLの指定方法について記載します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 URLを指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   url()関数の書き方 CSSでURLを指定する場合には、url()関数を使用して、以下のように書きます。 url('ファイルのパス'); url("ファイルのパス"); url(ファイルのパス); ()内にはファイルのパスを入れますが、シングルクォーテーション(‘)で囲ってもダブルクォーテーション(“)で囲っても、囲わなくても大丈夫です。 また、ファイルのパスは絶対パスと相対パスどちらでも指定できます。   絶対パスと相対パスとは ファイルのパスとは、ファイルの位置を示すものですが、絶対パスと相対パスという2つの書き方があります。 絶対パス ファイルの住所のようなものです。 https://magazine-cf.techacademy.jp/wp-content/uploads/2016/06/Blog-Image.jpg のような表記になります。わたしたちが使う住所と同様で、「東京都渋谷区渋谷1-17-4」いえば、みんなに位置を知らせることができるのと一緒です。 相対パス ファイルとファイルの位置関係を表すものです。 ./image.jpg や ./images/image.jpg のような表記になります。CSSで相対パスを使用する場合は、CSSファイルからのパスになることに注意してください。(外部CSSファイルの場合) 例えば、道を尋ねられたときに、「この道をまっすぐ行って、左側です」のような表現をするのと同じで、「現在位置(CSSファイル)にあるimagesフォルダの中にあるimage.jpgファイル」という現在位置を基準にした指定の方法になります。   同じフォルダ内であれば、./ + ファイル名(./は省略可) フォルダから出る場合は、 ../ + ファイル名 フォルダに入る場合は、 フォルダ名/ + ファイル名 のようになります。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 先ほどの図と同じ構造のサイトで考えてみます。 index.html: <html> <head> <meta charset="utf-8"> <title>CSSでURLを指定する方法</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="pink">ピンクの背景画像</div> <div class="blue">ブルーの背景画像</div> <div class="green">グリーンの背景画像</div> </body> </html>   style.css: @charset "UTF-8"; /*文字コードの指定*/ div{ width:200px; height:200px; float:left; text-align:center; background-size:contain; line-height:200px; } img{ width:200px;
CSS

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

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれたたくさんのページによって構成されています。また、より動きのあるサイトをつくるにはそれに加えてJavaScriptというプログラミング言語を使ってページがつくられます。 一つのページにhtmlとcss、そしてJavaScriptを記述しようとすると、不可能ではないのですが、編集ページが非常に長く、またどこに何が書かれているかがわかりづらくなってしまいます。htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるというようにそれぞれ異なる役割をもちます。 たくさんのページでサイトが構成されている場合、例えばサイトのイメージカラーを変えたいといったときに、htmlとcssが分けられていればcssの特定の箇所を修正するだけでサイトの全ページのカラーを一括して変えるといったことが可能です。こうしてWeb製作の現場ではhtml・css・JavaScriptのファイルはそれぞれ別ファイルに分けてつくられることが一般的です。 その別々のファイルで編集したものを紐付けて一つのページとしてまとめるタグにlinkタグとscriptタグがあります。   ・linkタグ 他のファイルをリンクしてhtmlファイルに読み込ませます。rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） ・scriptタグ JavaScriptを読み込むときに使います。     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タグ覚えました！   [PR] HTML/CSSで挫折しない学習方法を動画で公開中scriptタグ 続いてscriptタグです。 Webページにはhtml・cssだけで書かれた文書のようなページ（静的なページといいます）と、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすとそれに伴って何か変化が起こる動的なページとがあります。動的なページにはJavaScriptなどが使われており、演算機能やループ処理など様々な機能が利用できます。scriptタグはJavaScriptを記述する際に使われるタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptの記述）</script> ここでは「『JavaScriptでループ処理』という文を1から100までループさせる」という内容のJavaScriptを書いてみます。 <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”）を読み込みます。実際のコードは”javascript.js”のファイルに書かれているので、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や出処はどこなのかといった情報を指定します。外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますのでぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

WEEKLY RANKING

厚切りジェイソンが語る「プログラミングを学習する意義」とは

【澤円】元ポンコツSEが教える「プログラミングの学び方」

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

メールの書き方に困ったら！「了解」「承知」「了承」の違いと使い方

今さら聞けない！GitHubの使い方【超初心者向け】

文書・メールで頻出の「様」と「殿」それぞれの意味と使い分け方を知ろう

Photoshop（フォトショップ）で画像を切り抜く方法【初心者向け】

【困った！】いつの間にかローマ字入力が大文字になっていたときの対処法

【例文・テンプレートあり】欠勤メールの書き方を学ぼう

要約にはコツがある！押さえるべきポイントを実例をもとに解説

TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLによるファビコンの設定方法を現役デザイナーが解説【初心者向け】