TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのimgタグにURLを設定する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのimgタグにURLを設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのimgタグにURLを設定する方法について解説しています。imgタグは文書内に画像を表示させるタグです。画像に別ページへのリンクを設定する場合の書き方と、imgタグを使う際の注意点を覚えましょう。

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

imgタグにURLを設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

imgタグとは

imgタグとは、文章内に画像を表示させるタグのことです。画像はURLで保存されているファイルを指定することで表示されるようになります。

この画像の保存場所の指定は、SRC属性でおこないます。このSRC属性でのURLは画像の保存場所としてのパスなので、通常は画像が保存されているimgフォルダなどを指定していきます。

 

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

imgタグにURLを設定する方法

ブラウザ上に表示された写真をクリックすると、別のwebページを表示させるようにすることが出来ます。これはimgタグにURLを設定することで実現できるようになります。imgタグをaタグで囲むように記述します。

(sample.html)

<p>
  <a href="https://www.google.com/">
    <img src="free.jpg" width="300" height="300" alt="フリー画像">
  </a>
</p>
上記のように記述すると、画像をクリックするとGoogleの検索画面が表示されます。

 

imgタグの注意点

imgタグはpタグやdivタグとは違い、閉じタグが必要ありません。imgタグにはalt属性というものがあり、画像が不具合などで表示出来ない場合に、画像の代わりにテキストを表示することができます。このalt属性は記述をしなくてもエラーとはなりません。

しかし、検索で上位表示をされるためのSEO対策としてはalt属性も記述する必要があります。alt属性は写真が不具合で表示されない場合や、目が不自由な方のための音声読み上げ機能などでも利用できるため、記述しておきたい項目です。

その他の注意点としては、RubyonRailsでアプリを作成した場合には画像の保存場所が意図した場所に保存されていないことが多くあります。

開発環境と本番環境で保存場所が変わる場合やURLが変わってしまう場合もあるため注意が必要です。

 

まとめ

imgタグはwebを表示する際の基本的なタグですが、使用頻度も多く応用して使っていきたいタグの1つです。必ず表示されている状態を確認し、URLのリンク切れなどが起こっていないか確認しながら記述することが大切です。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

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

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

HTMLでテキストを改行する方法を現役エンジニアが解説【初心者向け】

HTMLでテキストを改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもHT...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbutto...
HTML

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

HTMLとCSSでdisplay noneの使い方を現役エンジニアが解説【初心者向け】

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

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

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次imgタグとはimgタグにURLを設定する方法imgタグの注意点まとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海">   それぞれ1つずつ確認していきましょう。 imageタグ <img   …  > ここには画像を表示しますよ、ということを示します。   ソース属性      src=”…” ソースは、出所や源泉という意味です。 表示する画像ファイルの、ファイル名やファイルの場所を示します。   タイトル属性  title=”….” 画像のタイトルを指定します。   オルト属性      alt=”…” オルタナティブ、代替の略です。 目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。   では具体例をみてみましょう。 表示したい画像ファイルを用意してsrc属性で指定しましょう。 ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。 マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。 基本的な使い方はこれだけです。   大石ゆかり サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！ 田島悠介 そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。 大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。 田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。   画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。 この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。   Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。 このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。   パスの書き方には、絶対パスと相対パスの2種類あります。 それぞれ詳しく説明しますね。   絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。 市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。 絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。 今回の図では、demoというフォルダがおおもとですね。 パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。 また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。   実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" >   分解して翻訳すると、こんな意味ですね。 「 / 」おおもとのフォルダ内の 「 images/ 」images というフォルダ内の 「 image.jpg 」image.jpg  というファイル   この道順に沿って、HTMLは表示する画像ファイルを見つけるのです。   また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。   相対パス パスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。 市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。 相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。 いくつかのパターンで、具体的に説明していきます。   HTMLとファイルが同階層にある場合 このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。   パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" >   また、カレント記号は省略することもできます。 <img src="image.jpg" >   どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。   ファイルがHTMLより下のフォルダ階層にある場合 次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。   このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" >   また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" >   ファイルがHTMLより上のフォルダ階層にある場合 最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。   パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。 ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" >   これを応用すると、下記のように複雑なパスも簡単に示すことができます。   親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" >   パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。   [PR] Webデザインで副業する方法とは【応用】画像の表示スタイルを調整する 画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。   画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。 はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。 画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{  
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

JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】

JavaScriptで画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次 HTMLで画像を表示する JavaScriptで画像を表示するメリット JavaScriptで画像を表示する方法 実際に書いてみよう まとめ そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLで画像を表示する まず、JavaScriptで画像を表示する方法の説明の前に、HTMLで画像を表示する方法について説明します。 HTMLで画像を表示するにはimgタグを使用します。 src属性で画像のファイル名を指定します。 <img src="image1.jpg"> この場合は、image1.jpgというファイル名の画像が表示されます。 この記述だけでは、表示された後に、別の画像に切り替えることはできません。   [PR] Webデザインで副業する方法とはJavaScriptで画像を表示するメリット JavaScriptで画像を表示するには、imgタグのsrc属性をJavaScriptで指定します。 JavaScriptで画像を表示することにより、 HTMLでsrc属性を指定するのに比べ、動的に画像を表示できます。 例えばボタンをクリックしたり、画像を左右にスワイプしたときなど、任意のタイミングで指定した画像を表示できます。 Webサイトでアルバム機能を作る場合などに便利ですね。 なお、動的とは、「変化する」といった大まかな意味だと考えてください。 この場合は、ボタンをクリックしたら別の画像に「変化する」、といったことを「動的」と言います。 HTMLで画像を表示した場合は、画像は変化しないので、「動的ではない」または「静的である」といいます。   JavaScriptで画像を表示する方法 JavaScript で画像を表示するには、対象のimg要素を取得してsrc属性を指定します。 以下はidが「image_place」というimg要素を取得して、 src属性に「image1.jpg」を指定した例です。 let img = document.getElementById("image_place"); img.src = "image1.jpg";   実際に書いてみよう 今回のサンプルプログラムでは、ボタンを押した時に画像を切り替えるようにしています。 事前に画像ファイルを3枚用意して、 HTMLファイルと同じフォルダに配置しておきましょう。 今回は以下のような画像を用意しました。   プログラムは以下のようになります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample1</title> </head> <body> <button onclick="changeImage()">画像の切替</button> <br> <img id="image_place" src="image1.jpg"> <script type="text/javascript"> // img要素を取得する let img = document.getElementById("image_place"); // 表示する画像番号 let idx = 1;
JavaScript

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] Webデザインで副業する方法とはHTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

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カリキュラムの内容をもとに解説しています。 目次imgタグとはimgタグにURLを設定する方法imgタグの注意点まとめ監修してくれたメンター そもそも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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのimgタグにURLを設定する方法を現役エンジニアが解説【初心者向け】