TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLをリンクして新しいウィンドウで開く方法について解説しています。基本のリンクの書き方と別ウィンドウで開くときのそれぞれの書き方、新規ウィンドウを使う場合に適切な場面について見ていきましょう。

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

HTMLをリンクして新しいウィンドウで開く方法について解説します。

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

HTMLをリンクして新しいウィンドウで開く方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

リンクタグとは

リンクタグは、ブラウザの画面を閲覧中のHTML文書(Webサイト)から他のHTML文書に移動させるものです。ブラウザで閲覧中の画面の内容が変更されることから、「ページ(画面)遷移」とも呼ばれています。

そして、「ページ遷移」を実現するための代表的な手法として、「リンクタグ」(aタグ)があります。そして、aタグとタグに付随する属性(href)を記述し実装します。以下がリンクタグを用いるコードの例となります。

HTML

<a href="https://techacademy.jp">テックアカデミー</a>

テックアカデミー

属性の使い方と新しいウィンドウで開く方法

aタグに付随する属性は、約10種類以上もあるものの、おもに使用するのは2種類のみです。「リンクタグ」の説明でもふれたhref属性、その「ページ遷移」を実現するための対象を定めるtarget属性です。この他の属性は、ブラウザの種類によっては、挙動として不安定な動作があるため、細かく知らなくても問題ありません。

以下のコードは新しいウィンドウを開くためのコードの例となります。

HTML

<a href="https://techacademy.jp">テックアカデミー｜同一の画面</a>
<a href="https://techacademy.jp" target="_blank">テックアカデミー｜新しいウィンドウ(タブ)</a>

テックアカデミー｜同一の画面
テックアカデミー｜新しいウィンドウ(タブ)

同一の画面の方は新規のタブを開くことなく、そのままリンク先に移動します。

対して、新しいウィンドウ(タブ)の方はtarget属性の値として_blankを設定しているため、href属性の値として指定されたURL(リンク先)がブラウザの新しいタブで表示されます。

また、余談として、新しいタブが作られる場合に、タブの機能がなかった古いブラウザでは、リンク先が文字どおり「新しいウィンドウ」と表示されていました。

[PR] Webデザインで副業する方法とは

新しいウィンドウで開く場面

同じドメインのWebサイトから、他のドメインのWebサイトを表示させる場合では、「新しいウィンドウ（タブ）」が活用されています。また、閲覧中のWebサイトからユーザーを離脱させたくないなどの理由がある場合は、「新しいウィンドウ（タブ）」で表示させる方法がよく選ばれています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLをリンクして新しいウィンドウで開く方法がよくわかりました！

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLで絵文字を表示する方法を現役エンジニアが解説【初心者向け】

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

HTMLで一つのタグにidを複数使う方法を現役エンジニアが解説【初心者向け】

HTMLで一つのタグにidを複数使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
HTML

Canvasを覚える！HTMLでアニメーションを作成する方法【初心者向け】現役エンジニアが解説

HTMLのCanvasについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもHTMLの記...
HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイトのト...
HTML

これだけは知っておきたい！HTML/CSSの基礎【人事担当者のためのIT勉強会レポート】

今回のテーマは、HTML/CSSの基礎です。 なお、こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。 ...
イベントレポート

すぐ分かる！HTMLで定義リスト（dlタグ）を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLで定義リストを使う方法について解説します。 ...
HTML

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

HTMLでアンカータグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLのアンカータグについて解説します。 アンカータグが使えるようになると、Webページにリンクが張れるようになるのでぜひ参考にしてください。   目次 アンカータグと属性 アンカータグの使い方 まとめ   【動画の解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 アンカータグを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   アンカータグと属性 今回はリンクの張り方について学んでみましょう。 Web上ではリンクをクリックすれば、簡単に見たいWebページにアクセスすることができます。 このリンクをWebページに張るには、アンカー<a>タグを使います。 アンカータグとは、Webページにリンクを張り、そのページとリンク先のページを繋ぐタグです。   また、HTML要素として識別するためにアンカータグは属性を付与できます。 一般的に利用されるアンカータグの属性は以下の2つです。 href属性 Hypertext Reference id属性 それぞれの属性の内容と記述方法を解説します。   href属性  Hypertext Reference href属性は、リンクの飛び先がどこであるのかを伝えます。 以下のようにhref属性を利用して、任意のURLを記載できます。 <a href="https://techacademy.jp/"></a>   id属性 要素にID名をつけて、特定部分を識別します。 id属性は、同一ページ内にリンク先を作成できます。 以下のようにid属性を利用して、文書内の別場所に移動できます。 <p id=”index”></p> <p>タグなどに対してid属性（index）を付与し、特定できます。   大石ゆかり aタグで色んなサイトにリンクを張ることが出来るんですね♪ 田島悠介 そうだね。自分のサイト内の別のページへもリンクを張れるよ。 大石ゆかり id属性って特定部分を指定するって何ですか？ 田島悠介 ページが長い時に、クリックで特定の箇所に素早く移動させることが出来るんだよ。今から説明するね。   [PR] Webデザインで副業する方法とはアンカータグの使い方 基礎がわかったら、実際に使ってみましょう。 タグに属性をつけ加えるときには半角スペースを使います。 <a (半角スペース)href="好きなサイトのURL">サイトのページ名</a>   実際のURLで書いてみます。 <a href="https://techacademy.jp/">テックアカデミー</a>   ブラウザ表示結果は以下のとおりです。   ここで、ページのリンクをクリックしてみましょう。 href属性で指定したURLにアクセスできましたね。   また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。 今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。 先ほどのhref属性を「#index」に変えます。 このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。   「#indexの場所へ移動」をクリックすると、id属性で指定したリンク先（index）へ飛びました。   まとめ 今回はHTMLでアンカータグを使う方法をご紹介しました。 href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書をハイパーテキストといいます。 HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書（ハイパーテキスト）をつくる言語です。 Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点がHTMLの大きな特徴です。 次から次へと移動しながら得たい情報を自由に得られるハイパーリンク機能により、インターネットはまたたく間に世界中に広がっていきました。 あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。 <a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。 ぜひ覚えておきましょう。 さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。 執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり techacademy.jpにリンクを張ることが出来ました！でも、今見ていたタブ？ページが上書きされちゃった。 田島悠介 新しいタブ、新しいウィンドウで表示する場合はtarget属性に_blankを指定してあげるんだ。 大石ゆかり 今度は、新しいタブに表示されました♪ 田島悠介 自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptのライブラリであるjQueryでセレクタの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ある要素だけ動きを出したいなど特定の要素に処理を行う際に便利なので、ぜひ理解していきましょう。   目次リンクタグとは属性の使い方と新しいウィンドウで開く方法新しいウィンドウで開く場面監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   セレクタとは セレクタとは、jQueryで要素を選択するための文字列のことです。 例えば、以下のようなHTMLがあったとします。 (この例ではdivやpやh1が「要素」です) <div id="div1"> <p class="p1">p1</p> <p class="p2">p2</p> <p class="p3">p3</p> </div> <div id="div2"> <h1 class="h1">h1</h1> <h1 class="h2">h2</h1> <h1 class="h3">h3</h1> </div> このHTMLに対して、「p1クラスが設定されている要素を選択」する場合、$(“.p1”)というセレクタを使います。 (厳密には$(“.p1″)のうち”.p1″部分だけがセレクタです) ほかにも様々な選択の仕方がありますので、順に見ていきましょう。   大石ゆかり HTMLタグやクラス指定がありますね。 田島悠介 jQueryの$()の中にHTMLタグやclass属性の名前を書くと、その要素を取得できるんだよ。 大石ゆかり HTMLタグであっても、class属性であっても同じように書いて取得できるんですね！ 田島悠介 そうそう。HTMLタグとid属性とclass属性を中心に、主な指定方法について見てみよう！   セレクタを指定する書き方 セレクタを指定する書き方にはいくつかの種類がありますが、本稿では以下のセレクタについて解説します。 要素セレクタ：HTMLタグで指定 クラスセレクタ：class属性で指定 IDセレクタ：id属性で指定 グループセレクタ：複数のセレクタを組み合わせて指定 子孫セレクタ：階層的に要素を指定 属性セレクタ（属性フィルタ）：要素の属性をもとに指定   セレクタの書き方を、以下のHTMLの要素を例に説明します。 「ここにセレクタを使ったコードを書きます」の部分を書き換えながら確認していきましょう。 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8"> </head>   <body> <div id="div1"> <p class="pKisu">p1</p> <p class="pGusu">p2</p> <p class="pKisu">p3</p>
JavaScript

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次リンクタグとは属性の使い方と新しいウィンドウで開く方法新しいウィンドウで開く場面監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   確認ダイアログとは Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。 これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。   大石ゆかり 田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？ 田島悠介 alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。 大石ゆかり じゃあ、結果によって表示や処理を変えるといったことができそうですね。 田島悠介 そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！   confirmを使って確認ダイアログを表示させる JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。 構文 OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列'); 引数に確認ダイアログに表示するメッセージを文字列で指定します。 戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。 ※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。 ※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。 真偽値とは？ JavaScriptの値の型のひとつに真偽値があります。 真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。 trueは条件が成立している、または有効なものを表しています。 falseは条件が成立していない、または無効なものを表しています。 if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。 ※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。 ソースコード では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script> const answer = confirm('入力に間違いはないですか？'); document.write(answer); </script> </body> </html> ※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。 表示結果 PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。   さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。   ちなみに、[キャンセル]を押すと「false」と表示されます。 まとめ JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。   [PR] Webデザインで副業する方法とは確認ダイアログ内のテキストを改行する 確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。 たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。 エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。 エスケープシーケンスとは？ エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。 エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。 以下の表はエスケープシーケンスの例です。 エスケープシーケンス 意味 n 改行 ‘ シングルクォーテーション “ ダブルクォーテーション t タブ バックスラッシュ（または¥）を表示 ※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。 ソースコード [件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。 [件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>confirmを使った改行 |
JavaScript

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次リンクタグとは属性の使い方と新しいウィンドウで開く方法新しいウィンドウで開く場面監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。 田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。 たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。   HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。 タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。 題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。   <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。 開始タグと終了タグで囲むことで、開始と終了を表現します。 開始タグから終了タグまでのひとまとまりを要素と呼びます。 図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。   要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。 代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。 改行のない文章のひとかたまりを示すために使用します。 文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。 以下のように見出しの大小を表現するために使用します。 大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。 他のHTMLなどへのリンクを表現するために使用します。 青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。 四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。 画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。 文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。   [PR] Webデザインで副業する方法とは属性と値 各要素の細かい動きや働きを設定するための付属情報が属性です。 何の設定かを示すものが属性名、どう設定するかを属性値といいます。 開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。 上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。   この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。 たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。   以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png">   田島悠介 要素と属性、ぜひ組み合わせて理解してくださいね！ 大石ゆかり タグは全部覚えなければダメなんですか？ 田島悠介 要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。 各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。 常に調べながら書いていますよ。 大石ゆかり 今回のタグは、後で覚えてもいいんですね？ 田島悠介 技術は常に移り変わるので、すぐに古くなってしまうためですね。 暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。 大石ゆかり 調べるときはテックアカデミーの記事を参考にしますね！   HTMLを書いてみよう これまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。   <!DOCTYPE html>はHTMLを示すもの 文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。 この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。   要素の階層構造 要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。 以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body>   また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。   HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。   <head>と<body> <html>の中身は大きく
HTML

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろう こんな疑問を持っている方は、ぜひこの記事を読んでみてください。 どういう仕組みでWebページができているのか理解できますよ。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次リンクタグとは属性の使い方と新しいウィンドウで開く方法新しいウィンドウで開く場面監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLとは何かについて詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。 簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。 マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。 「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。   例えば、このような情報をホームページにしたいと思います。 ニュース 孫が生まれて、ついにおじいちゃんになりました。   この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文>   これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p>   HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。 このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。 ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。   Webページの裏側を見る 普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。 実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。   たとえば、テックアカデミーのWebページも、裏側はHTMLです。   Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。   すると、英単語と記号が組み合わさった文章が出てきます。 これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。   HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。   Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。 どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。   [PR] Webデザインで副業する方法とはHyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。   インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。 そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。 「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。   ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。 今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。   HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。 いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。   ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】   HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】     HTMLの種類 HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。 現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。     大石ゆかり ソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？ 田島悠介 HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。 大石ゆかり なるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？ 田島悠介 リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。   HTMLファイルの作り方 最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）   以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。 ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。   リンクを表示する リンクを作成した場所へページが移動しました。 リンクを作成するには<a>タグを使用します。 <a>タグの書き方 <a href="リンク先へのパス">リンクを貼るテキストや画像</a> hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。 最後に必ず終了タグ</a>を入力します。   使用例 実際に<a>タグを使用してテキストにリンクを貼ります。 今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。 https://coolors.co/ コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body>
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】