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のinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLからPHPを呼び出す方法を現役デザイナーが解説【初心者向け】

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

HTMLの特殊文字で表示できる括弧を現役エンジニアが紹介【初心者向け】

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

HTMLでinputタグのtype="date"で日付を入力する方法を現役エンジニアが解説【初心者向け】

HTMLでinputタグのtype="date"で日付を入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
HTML

HTMLでタグを使って水平線の太さを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでタグを使って水平線の太さを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】

文字や背景の色を指定するにはCSSを使用するのが一般的です。 しかし、簡単な色設定だと、HTMLのみでも可能です。 そこで今回はHTMLで色の指定を...
HTML

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

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

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 目次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

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

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

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

HTMLのタグ一覧と効果を現役デザイナーが解説【初心者向け】

HTMLのタグ一覧と意味について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLのタグ一覧と意味について詳しく説明していくね！ 大石ゆかり お願いします！   初心者がよく使うタグ一覧 ブラウザ上で見ているWebページのほとんどは、HTMLという言語によって作られています。HTMLのタグを用いることで、見出しや段落、画像の表示やリンクなどを指定することが可能となります。 ここでは、初心者がよく使う代表的なタグをいくつかご紹介します。   タグの意味 ここからは、HTMLタグそれぞれの意味についでご紹介していきます。まずはじめに、HTMLタグは下記の様な文法で使用します。 <タグ名>タグを反映させる情報</タグ名> ■headタグ headタグは、ウェブページの情報や設定を記述する際に用いるタグです。「文字コードの指定」や「検索エンジンやブラウザに対する情報の提示」といった役割を果たします。また、headタグ内に記述した情報は、基本的にウェブ上には表示されません。 ■bodyタグ bodyタグは、文章の内容を表す際に用いるタグです。bodyタグ内に記述されたテキストや画像が実際にブラウザ上に表示されます。 ■hタグ hタグは、「Heading」の略で、見出しを作る際に用いるタグです。h1〜h6の6種類あり、h1が一番大きい見出しで、数字が大きくなるほど小さい見出しになります。ページの構成に合わせて最適な大きさのタグを使用します。 ■brタグ brタグは、改行を行う際に用いるタグです。HTMLのコード内では、Enterを押して改行を行っても、ブラウザ上に反映されません。そこで、改行の際にこのbrタグを使用します。文章を明示的に改行するために用います。 ■aタグ aタグは、他ページへのリンクを指定する際に用いるタグです。このaタグを利用することで、テキストだけでなく画像にもリンクを指定することができます。 ■imgタグ imgタグは、文章内に画像を表示させる際に用いるタグです。GIF、JPG、PNGなどの画像形式を使用することができます。PDFデータは貼ることができないので注意してください。   [PR] Webデザインで副業する学習方法を動画で公開中タグの使い方をみてみよう ここからは、実際にタグの使い方をサンプルコードを用いて紹介していきます。基本的な使い方が分かれば簡単に応用できますので、ぜひご参考ください。 サンプルコード <html> <head> <title>samplehtml</title> </head>   <body>    <!--hタグを使ってみよう--> <h1>h1:hタグを使ってみよう</h1> <h2>h2:hタグを使ってみよう</h2>     <h3>h3:hタグを使ってみよう</h1>     <h4>h4:hタグを使ってみよう</h2>  <!--aタグを使って様々な情報を表示してみよう--> <!--aタグを使って文字を表示する--> <a>aタグを使って文字を表示する</a> <a>aタグを使って文字を表示する</a> <!--改行はbrタグを使用する--> <br> <a>aタグを使って文字を表示する</a> <br>
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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