TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について解説しています。動画埋め込みに使用されるvideoタグの基本構文、poster属性による表示画像の設定方法について学びましょう。

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

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

videoタグのposter属性で動画のヒント画像を表示する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

videoタグについて

HTML5では、動画の埋め込みに<video>タグを使用します。このvideoタグがあることで、Flash等のプラグインを使わずとも簡単に動画を埋め込むことができるようになりました。

Flashはadobeが2020年末にアップデート・配布共に終了すると言ってますし、その動きにApple、Facebook、Google、Microsoft、Mozillaとも協調して進めているとのことなので、これからはvideoタグの利用がますます増えそうです。

videoタグにおいて、基本コードはいたってシンプルです。

<video src="hoge.mp4" controls></video>

imgタグとは違い閉じタグがきちんと用意されている要素なので、<video>～</video>タグの中に様々な要素を入れ子にすることが可能です。

例えば、一番よく使われているのが、videoタグがサポートされていないブラウザを使用した場合に代わりにテキストを表示してくれるものです。

<video src="hoge.mp4"controls>
  <p>ブラウザが古くてvideo見れないね。ごめんね。</p>
</video>

このような感じになります。

 

poster属性の使い方

poster属性とは、映像のダウンロード中に表示される画像の URL を指定するものです。この属性の記述が無い場合はビデオの最初のフレームが読み込まれるまでは何も表示されず、フレームが読み込まれた後に最初のフレームをポスターフレームとして表示してくれます。ですが、読み込みが遅いとユーザーに動画がが埋め込まれていることを見落とされてしまう可能性があるので、poster属性はつけておいたほうがいいですね。

また、ブラウザが古いなど動画が動く環境でない場合に、動画の代わりに画像を表示させることができます。 poster属性で指定する画像は、ユーザーに動画の内容を知らせるような画像であることが望ましいです。 youtubeなどでよく見る最初の静止画像（サムネイル）のような役割を果たしてくれます。

 

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

poster属性を使って動画のヒントとなる画像を表示してみよう

使い方はいたって簡単です。videoタグにposter属性として記述するだけです。実際に動くコードを用意しました。

<video controls muted poster="http://writer.techacademy.jp/wp-content/uploads/2020/01/vs200129-001.png">
  <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.mp4"></source>
  <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.webm"></source>
</video>

 

これから動画も扱うことが増えてくるweb業界ですので、ぜひとも使ってみてください。

 

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLとCSSでおしゃれな見出しデザインを作る方法を現役デザイナーが解説【初心者向け】

HTMLとCSSでおしゃれな見出しデザインを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

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

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

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

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

HTMLでタブ文字を入れる方法を現役デザイナーが解説【初心者向け】

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

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

HTMLでテーブルの枠線をスタイリングする方法を現役デザイナーが解説【初心者向け】

HTMLでテーブルの枠線をスタイリングする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

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

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 videoタグで動画のストリーミング配信を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   ストリーミングとは ストリーミングとは、音声や動画などのメディアを再生する技術のことです。ストリーミングはメディアをすぐに再生することができることから、動画配信サービスや音楽配信アプリで使用されています。これまでは一度メディアをダウンロードしてから再生するサービスが主流でしたが、インターネットの発達から現在はストリーミング再生を採用しているサービス、アプリがメインになっています。 メリット ストリーミングのメリットはダウンロードと違い、インターネットに接続していれば、端末に転送されることなく再生されるので、スマホやパソコンのストレージを使わないのがメリットです。これによりメディアの再生形式と機種に依存することなく様々なメディアを楽しむことができます。 デメリット 端末のストレージを消費することなく再生できる一方でインターネットがなければメディアが再生されないのでネットワークが不安定な環境や通信制限がかかると再生が不安定になります。 また、Wifiを使用している場合は気にしなくてもいいですが、携帯回線を使用している場合は動画を再生するたびにデータ通信量が消費されるので、何も気にせずに使うと簡単に通信制限がかかってしまいます。おそらく、スマホで動画配信を見た経験のある方だとどちらも経験したことのある話だと思います。   videoタグの基本的な使い方と高度な設定を知ろう 動画をストリーミング再生するためにはHTMLのvideoタグを使って実現できます。早速使い方を紹介していきます。 基本的な使い方 基本的な使い方は、videoタグで動画ファイルを参照するだけです。HTMLで画像を扱ったことのある方はimgタグを使う方法と同じです。 <video src="video.mp4"></video> これで動画は表示できますが、再生はされません。 コントローラを追加することで動画を再生、一時停止、ボリューム調整をすることができます。コントローラを追加するには、controls属性を指定します。 <video src="video.mp4" controls></video>   これでストリーミングするための準備ができました。 サムネイルをつける ここからは、videoタグの属性をつかった高度な設定について紹介します。まずは動画ストリーミングサイトでよく使われている動画のトップ画像（サムネイル）を入れる方法です。サムネイルはposter属性をつかって画像ファイルを指定することで乗せることができます。サムネイルを使うことで、動画の内容をしる手がかりになります。 <video src="video.mp4" poster="samne.jpg"></video> 自動再生する autoplay属性を指定することで、ページを読み込んだことで動画が自動で再生されます。 <video src="video.mp4" autoplay></video> サイズを調整する videoタグで動画を再生すると、動画のサイズでそのままHTMLに表示され、大きいサイズだと、ブラウザの画面をはみ出す上に見ずらいです。そこで、width、heightを使って幅と高さを調整する必要があります。これにより、サイトのデザインに合わせて動画をはめ込みやすくなります。 <video src="video.mp4" width="320" height="240">   [PR] Webデザインで副業する方法とは動画を埋め込んで再生してみよう それでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。まずは再生したい動画ファイルを用意します。動画はmp4かogg用意します。用意したら以下のサンプルHTMLと一緒に任意のフォルダ内に保存します。なお、動画ファイルの名前はご自分のものに合わせて変更しておきます <head>     <title>ビデオデモ</title>     <meta charset="utf-8"> </head> <body>     <h1>ビデオストリーミング</h1>     <video src="./mov_hts-samp005.mp4" controls width="320" height="240"></video> </body> 保存したHTMLをダブルクリックしてブラウザから見ると、このように動画がブラウザ上で再生できるようになります。   監修してくれたメンター メンター三浦さん モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。 実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ストリーミング再生を実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTML5で配信された動画再生実装する方法（video要素の使い方） HTML5 では、videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。 その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。 次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。 ブラウザごとに表示されるインターフェース（操作パネル）は異なるため、それぞれを確認してから使用しましょう。 また、controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。 autoplayは自動再生、loopは繰り返しなどと変更することが可能です。   動画のストリーミング配信とは 動画をストリーミング再生する場合大きく２種類の考え方があります。 それが、HTTP Live Streamingとプログレッシブダウンロードです。   HTTP Live Streaming 動画のストリーミング配信で一般的な方法はHTTP Live Streaming（HLS）という技術を利用しています。 HTTP Live Streamingは元々、アップルがiOS向けに開発しました。 HTTPという汎用的なプロトコル（規格）を利用することで、様々な媒体に対して動画配信が可能です。 メリット 手元の端末にダウンロードしない為、著作権対策が可能 専用サーバーを用意する必要がない デメリット 通信回線が高速安定でない場合は再生が止まってしまう   プログレッシブダウンロード プログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。 メリット すべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。 デメリット オフライン状態で再度再生が可能ということは、著作権上問題が発生する。     [PR] Webデザインで副業する方法とはHTML5で動画のストリーミング再生を実装する方法 HTTP Live Streaming HTTP Live Streamingを利用したストリーミング配信動画の再生実装方法です。   m3u8ファイルについて m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。 m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。 m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。   m3u8ファイルを利用した実装 HTTP Live Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。 ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。 オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。 <video src=”./video/test.m3u8″ controls> でtest.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。 これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。 これだけは覚えたい！絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。 ＊なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body>    <video src="./video/test.m3u8" controls>     </video> </body> </html>   プログレッシブダウンロード プログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。 mp4の利用 <source src=”./video/test.mp4″> のように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。 大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。 ＊なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プログレッシブダウンロード</title> </head> <body>    <video controls>         <source src="./video/test.mp4">     </video> </body> </html> QuickTimePlayerの利用 また、QuickTimePlayerで再生することもできます。 <source src=”./video/test.mov”> で指定したvideoタグをhtmlに埋め込んで利用可能です。 ＊なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>QuickTimePlayer</title> </head> <body>    <video controls>         <source src="./video/test.mov">     </video> </body> </html>   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。   大石ゆかり HTML5でストリーミング再生を実装する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
HTML

HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】

HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の動画切り替えを実行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 動画を再生するには 複数の動画を切り替えるには 複数の動画を切り替えてみよう   動画を再生するには HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。 <video src="./video.mp4"></video> videoタグについて詳しくは以下の記事をご覧ください。 HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】   [PR] Webデザインで副業する方法とは複数の動画を切り替えるには さて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう？ まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。 簡単に手順をまとめると以下のようになります。 Videoタグにidをもたせて、動画を再生するファイルgetElementByIdメソッドでVideoタグを取得できるようにする ボタンなどでgetElementByIdメソッドを実行し、srcの値を変更する関数を入れる ボタンには関数に渡す引数の値をつけておく 大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。   複数の動画を切り替えてみよう それでは実際にサンプルを動かしてみましょう。以下のサンプルHTMLを適当なフォルダに保存します。動画ファイルはHTMLと同じ保存先に保存しましょう（mp4推奨）。動画のファイル名はサンプルを参考に適宣変えてください。 なお、手元に再生できる動画が無い方は以下のリンクのサイトの動画であればフリー素材の動画をダウンロードできます。 https://pixabay.com/ja/videos/   <head>     <title>ビデオデモ</title>     <meta charset="utf-8"> </head> <body>     <h1>ビデオストリーミング</h1>     <video id="movie" src="./1.mp4" controls width="320" height="240"></video>     <hr>     <h3>再生する動画を選択</h3>     <button onclick="playVideo(1)">1</button>     <button onclick="playVideo(2)">2</button>     <button onclick="playVideo(3)">3</button> </body> <script>     function playVideo(num) {         console.log(num);         tag = document.getElementById("movie");         switch (num) {             case 1:                 tag.src = "./1.mp4";                 break;             case 2:                 tag.src = "./2.mp4";                 break; case 3: tag.src = "./3.mp4"; break;         }     } </script> 実際にHTMLを保存したら、画像のような画面でボタンを押すと動画が簡単に切り替わります。ちなみに今回はposter属性を付けませんでしたが、poster属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。     監修してくれたメンター メンター 三浦 モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。 好きな言語はpython, Node.js   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次videoタグについてposter属性の使い方poster属性を使って動画のヒントとなる画像を表示してみよう監修してくれたメンター そもそも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で埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 埋め込み動画の音声を消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   動画を埋め込むvideoタグ 以前はwebサイトに動画を埋め込みたい際、FlashやQuickTimeなどのプラグインを使うのが一般的でしたが、HTML5ではvideoタグを使って簡単に動画を表示させることができます。 基本的なコードはいたってシンプルです。 <video src="hoge.mp4" controls></video> これで動画をいとも簡単に埋め込むことができます。また、videoタグはimgタグとは違い、閉じタグが設定されているので <video src="hoge.mp4" controls> <p>お使いのブラウザは古いので、この動画を見ることができません。</p> </video> のように、動画がサポートされていないブラウザに対して代替テキストを入れ子にして記述することもできます。   音声を消すmuted属性 とても簡単な動画の埋込ですが、サイトを開いたとき、もしくは再生ボタンを押したときにいきなり音が鳴ってしまったら閲覧者もびっくりしますし、スマホなどでは周りの迷惑になってしまいます。そんな時に設定しておきたいvideoタグの属性が「muted」です。こちらを記述しておくことで、動画が再生されたときは最初は音を消した状態で再生されるように設定することができます。 videoタグの属性ですので、videoタグ内に記述してあげるだけなので、いたって簡単です。 <video src="hoge.mp4" muted controls></video> たったアルファベット5文字を記述するだけなので、videoタグを用いるときはなるべく記述してあげたほうがいいでしょう。   [PR] Webデザインで副業する方法とは埋め込み動画の音声を消してみよう 実際に音声を消した状態で動くコードを用意いたしました。コードはコチラです。一応対応ブラウザの幅を広げるため.webmの拡張子の動画も用意しておきました。 <video controls muted> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.mp4"></source> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.webm"></source> </video> ぜひ試してみてください。   監修してくれたメンター メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け】