TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptにおけるtimeの利用方法について現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptにおけるtimeの利用方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptにおけるtimeの利用方法について現役エンジニアが解説しています。JavaScriptで時間を扱うには、Dateオブジェクトを使います。getTimeメソッドで指定した日付までの経過秒数を取得することができます。JavaScriptのtimeを使って日付や時刻を取得する方法を解説します。

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

JavaScriptにおけるtimeの利用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptにおけるtimeの利用方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

timeとは

時間を取得するときに使う関数ですが、JavaScriptでは直接”time”という関数は存在しません。その代わり”Date”オブジェクト内に”getTime”というメソッドがあります。

[PR] フロントエンドで副業する学習方法を動画で公開中

timeの使い方

では、その使い方を詳しく見ていきましょう。先程もお話したとおり、”getTime”を利用するには”Date”オブジェクトを利用する必要があります。

new Date().getTime();

気をつける点は、上記で取得した値は「1596328790813」の様な値で、「1970 年 1 月 1 日 0 時 0 分 0 秒」からの経過時間がミリ秒で表示されます。

timeを利用して日付・時刻を取得してみよう

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Date getTime JavaScript</title>
  </had>
  <body>
    <h1 id="settime"value="2030/01/01 00:00:00">2030/01/01 00:00:00</h1>
    <p>
      <input id="nowtime"type="button"value="残り時間"onclick="cal_time()">
      <br>
      <label id="year">_____</label>
      <br>
      <label id="date">_____</label>
    </p>
  <scripttype="text/javascript">
    //終了時間
    var SetTime = new Date(document.getElementById("settime").innerHTML)
    //時間を算出
    function cal_time() {
      var NowTime = Date.now();
      // 経過時間をミリ秒で取得
      var ms = SetTime.getTime() - NowTime;
      // ミリ秒を年に変換(端数切捨て)
      var year = Math.floor(ms / (365*24*60*60*1000));
      document.getElementById("year").innerHTML = "残り" + year + "年";
      // ミリ秒を日に変換(端数切捨て)
      var day = Math.floor(ms / (24*60*60*1000));
      document.getElementById("date").innerHTML = "残り" + day + "日";
    }
  </script>
  </body>
</html>

 

まとめ

時間経過など、WEB上では意外と利用する場面がありますので、皆様も覚えて使えるようになってください。

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォームのボタンを無効にする方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ま...
JavaScript

JavaScriptのMathオブジェクトのmultiplyメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptのMathオブジェクトのmultiplyメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
JavaScript

ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】

ChromeでJavaScriptを無効／停止する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...
JavaScript

JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】

JavaScriptのElementオブジェクトについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptのdocument.write()メソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのdocument.write()メソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptにおけるHelloworldの出力方法について現役エンジニアが解説【初心者向け】

JavaScriptにおけるHelloworldの出力方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

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

JavaScriptにおけるDateオブジェクトとgettimeについて現役エンジニアが解説【初心者向け】

JavaScriptにおけるDateオブジェクトとgettimeについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Dateオブジェクトとgettimeについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Dateとは gettimeの使い方 gettimeを利用して現在時刻からミリ秒形式に変換してみよう まとめ   Dateとは 日時を表すオブジェクトです。日時を操作するメソッドを持っているので、日時を増やしたり減らしたりする場合や、日時から月だけや時刻だけのような特定の値を取得する場合などに活用できます。   [PR] フロントエンドで副業する学習方法を動画で公開中gettimeの使い方 gettimeメソッドはDateオブジェクトが持つメソッドで、協定世界時 (UTC) の1970年1月1日からの経過ミリ秒の数値を返します。使い方は、Dateオブジェクトに.gettime()と記述するだけです。協定世界時からの数値なので、プログラムを実行した環境の時差に関係なく同じ結果が取得できます。   gettimeを利用して現在時刻からミリ秒形式に変換してみよう まずは一番シンプルな記述でDateオブジェクトを生成します。下記のように記述することで、nowという変数にプログラムを実行した日時のDateオブジェクトが格納されます。 let now = new Date(); gettimeメソッドを使うには、Dateオブジェクトが格納されたnowに.gettime()と記述します。 let nowTime = now.getTime() これでnowTimeという変数に、協定世界時（UTC)1970年1月1日 00:00:00から、Dateオブジェクトを生成した日時までの経過ミリ秒の数値が格納されました。 次はJavaScriptを実行している環境と時差をふまえてgetTimeメソッドの結果を確認してみます。Dateオブジェクトを1970年1月1日で生成し、getTimeメソッドを使います。 let date = new Date(1970, 0); let dateTime = date.getTime(); console.log(dateTime); 上記のプログラムを日本語の環境で実行すると、-32400000とコンソールに表示されます。1970年1月1日 00:00:00を指定してDateオブジェクトを生成したのに、getTimeの結果が0にならないのは時差があるからです。 この結果を補足説明します。 まずnew Date()の引数に1970と0を指定しています。これは1970年と1月を指定したことになります。Dateオブジェクトの月は0から始まるので、1月は0、2月は1、3月は2、、、というように増えます。日や時は省略しているので、日は1、それ以降の時や分は0となります。 日本語環境で実行した場合のDateオブジェクトは、下記のようにUTCからの時差9時間を持つ日本標準時となっています。 Thu Jan 01 1970 00:00:00 GMT+0900 (日本標準時) getTimeメソッドでUTCにするので、この時差9時間分のミリ秒が引かれます。9時間分のミリ秒は下記の式により、32400000となり、UTC時刻からのミリ秒であるgetTimeメソッドは-32400000となっています。 9時間　×　60分　×　60秒　×　1000   まとめ DateオブジェクトとgetTimeメソッドの扱い方を紹介しました。getTimeメソッドを使うことで、環境に関わらず同じ結果が取得できます。   監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptで時間の比較を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで時間の比較を行う方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで時間の比較を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptで日時・経過時間などの比較を行う方法 日付計算を行うにはDateオブジェクトを利用します。Dateオブジェクトは”1970/01/01/00:00:00″から始まるミリ秒を基準としています。 最初に「new Date()」でインスタンス化して、作成したインスタンスを使って計算を行っていきます。作成時は、new Date(2019,10,1,20,00,00)などの指定を行いますが、引数を指定しない場合は、現在時刻で作成されます。 Dateオブジェクトを利用して○○後、○○前の日付などを求めるには、DateオブジェクトのsetXXX,getXXXメソッドを利用して算出します。 まずは、下記の表を確認してください。 種類 取得メソッド 設定メソッド 注意点 年 getFullYear setFullYear 月 getMonth setMonth 0～11の値 日 getDate setDate setDayは週 時 getHours setHours 分 getMinutes setMinutes 秒 getSeconds setSeconds 例として、日付を計算する場合の書き方を説明いたします。まずは、インスタンスを作成 var newDate = new Date(); 続いて、作成したインスタンスから日付部分を取得します。 newDate.getDate(); 取得した日付に減加算したい日数を加算し、元のインスタンに設定します。あわせて書くと下記の様になります。 newDate.setFullYear(newDate.getFullYear() + 10)); ※10日後を計算 JavaScriptで処理時間の比較を行う方法 開始時間と終了時間を計算するには、開始前の時間と開始後の時間をインスタンス化し、getTimeを使ってミリ秒を取り出し差を算出します。 var startTime = new Date(); /*色々な処理*/ var endTime = new Date(); var elapsedTime = endTime.getTime() - startTime.getTime() /*最後にミリ秒を分や秒に変換します。*/ var mins = elapsedTime / ( 1000 * 60 ); // 分の計算 elapsedTime = elapsedTime % ( 1000 * 60 ); // 算出した分を取り除く var secs = elapsedTime / 1000; // 秒の計算 Math.floor(mins) + "分" //分を切り捨てで表現 Math.floor(secs) + "秒"
JavaScript

JavaでDate型の日時を加算・減算する方法を現役エンジニアが解説【初心者向け】

JavaでDate型の日時を加算、減算する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次 Date型とは Calendarクラスとは Date型の日時を加算する方法 Date型の日時を減算する方法 実際に書いてみよう まとめ Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Date型の日時を加算、減算する方法だよ。知らないとよくつまずく内容だから、詳しく説明していくね！ 大石ゆかり お願いします！ Date型とは Date型とは、Javaで日付の処理を行うクラスです。 Date型の持つ日時情報は「1970年1月1日0時からの経過時間」をミリ秒単位で示したものです。 また、printlnメソッドなどで表示すると、下記のように年月日と曜日まで加えてわかりやすく表示してくれます。 Tue Feb 18 17:38:14 JST 2020 しかし、Date型では時間、秒などの細かい日時を扱うことは推奨されていません。 日時情報の時間、秒などの細かい日時を扱う場合には、Calendarクラスを利用します。   [PR] フロントエンドで副業する学習方法を動画で公開中Calendarクラスとは Date型と同じように日時を扱うことのできるクラスで、時間や秒などの細かい日時が計算可能です。 Date型の計算を行いたい場合には、Calendar型に一度変換し、計算を行います。 Date型をCalendar型に変換する場合、setTimeメソッドを使って下記のように記述しましょう。 Calendar Calendar型オブジェクト名 = Calendar.getInstance(); Calendar型オブジェクト名.setTime(Date);   逆に、Calendar型からDate型を取得するには、getTimeメソッドを使い下記のように記述します。 Date Date型オブジェクト名 = Calendar型オブジェクト名.getTime();   Date型の日時を加算する方法 Date型の日時を加算する方法としては、Calendar型のaddメソッドを使います。 addメソッドは、下記のように記述しましょう。 Calendar型.add(年 or 月 or 日 or 時間 or 分などを指定, 加算する値);   第一引数の部分に関しては、以下のいずれかの定数を指定し、加算する対象を設定します。 年→Calendar.YEAR 月→Calendar.MONTH 日→Calendar.DAY_OF_MONTH など 時間→Calendar.HOUR_OF_DAY など 分→Calendar.MINUTE   例えば、2ヶ月先の日時を取得したい場合は、下記のようにCalendar型で2ヶ月分を加算してからDate型に変換してみましょう。 Calendar型.add(Calendar.MONTH, 2);   Date型の日時を減算する方法 Date型の日時を減算する方法は、加算の場合と同じくCalendar型のaddメソッドを使います。 加算の場合は、第二引数に正の整数を指定しましたが、減算の場合には、第二引数に負の整数を指定する点に注意が必要です。 単純に数字にマイナスをつければ問題ないので、減算は難しくないでしょう。 例えば、2ヶ月前の日時を取得したい場合、下記のようにCalendar型で2カ月分を減算し、さらにDate型に変換すれば取得できます。 Calendar型.add(Calendar.MONTH, -2);   実際に書いてみよう それでは、コードで日時の加算、減算をしてみましょう。 import java.util.Date; import java.util.Calendar; class DateSample{     public static void main(String args[]){       //日時を格納するためのDateクラスを宣言(現在時刻)        Date date = new Date();        Calendar calendar =
Java

JavaでTimestamp型とDate型を変換する方法を現役エンジニアが解説【初心者向け】

JavaでTimestamp型とDate型を変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Javaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Java講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaでTimestamp型とDate型を変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Timestamp型とは java.sql.Timestampクラスは、java.util.Dateのラッパークラスです。 データベースと連携した日時情報のやりとりを行う場合に利用します。 ラッパークラスはJavaのクラスが基本型となっているものをオブジェクトとして使えるようにするクラスです。 Timestampに関する詳しい説明はこの記事をご覧ください。   Date型とは java.util.Dateクラスはある特定の日時を保持するためのクラスです。 [PR] フロントエンドで副業する学習方法を動画で公開中Timestamp型からDate型に変換する方法 TimestampクラスのgetTime()は、1970年1月1日00:00:00 GMTからのミリ秒数をlong型で返します。 そのため、この数値を引数としてDateクラスのインスタンス化を行うことで、Timestamp型からDate型への変換が可能です。   Timestamp型からDate型への変換コード例 import java.sql.Timestamp; import java.util.Date; public class Sample { public static void main(String[] args) throws Exception { // 現在日時を取得 Timestamp timestamp = new Timestamp(System.currentTimeMillis()); // Timestampオブジェクトの出力 System.out.println("timestampオブジェクト:" + timestamp); // Date型へ変換 Date date = new Date(timestamp.getTime()); // Dateオブジェクトの出力 System.out.println("Dateオブジェクト:" + date); } } 実行結果 timestampオブジェクト:2019-11-30 00:34:40.039 Dateオブジェクト:Sat Nov 30 00:34:40 JST 2019 となります。（時刻情報は実行のタイミングにより異なります。）   Date型からTimestamp型に変換する方法 DateクラスもTimestampクラスと同様にgetTime()メソッドを提供しており、1970年1月1日00:00:00 GMTからのミリ秒数をlong型で得ることが可能です。 この数値を引数としたTimestampクラスのインスタンス化を行うことで、Date型からTimestamp型への変換ができます。   Date型からTimestamp型に変換するコード例 以下、コード例です。 import java.sql.Timestamp; import java.util.Date; public class Sample { public static void
Java

Javaのdateクラスとcalendarクラスの違いを現役エンジニアが解説【初心者向け】

Javaのdateクラスとcalendarクラスの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 dateクラスとcalendarクラスの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Dateクラス Calendarクラスとは DateクラスとCalendarクラスの使い方 DateクラスとCalendarクラスを変換する方法 まとめ   Dateクラスとは Dateクラスとは、日付の時間のデータを取得するクラスです。 Dateクラスは、特定の日付や時間を取得したいときに使用されます。 Dateクラスを生成するときは、下記のように記述しましょう。 Date オブジェクト名 = new Date();   この場合、Date型の保持する時間が現在時刻となります。 日付に関する細かい処理を行ないたい場合には、Calendarクラスが必要です。   [PR] フロントエンドで副業する学習方法を動画で公開中Calendarクラスとは Calendarクラスとは、Dateクラスと同じように日付、時刻を保持することのできるデータ型です。 Dateクラスとの大きな違いは、日付や時刻についての演算を行う機能があるという点です。 Calendarクラスを生成するときは、下記のように記述しましょう。 Calendar オブジェクト名 = Calendar.getInstance(); また、生成したCalendar型が保持する時刻データも現在時刻になります。     DateクラスとCalendarクラスの使い方 Date・calenderクラスの使い方を見ていきましょう。   Dateクラスの使い方 Dateクラスの基本的な使い方としては、日付の比較と日付の文字列への変換が挙げられます。 日付の比較を行う場合、4つのメソッドが用意されています。 afterメソッド beforeメソッド equalsメソッド compareToメソッド   それぞれのメソッドは、以下の用ように記述し、出力されます。 Dateクラス1.メソッド(Dateクラス2); afterメソッドの場合→Dateクラス1がDateクラス2よりも後の時刻ならtrue、そうでないならfalse beforeメソッド→Dateクラス1がDateクラス2よりも後の時刻ならtrue、そうでないならfalse equalsメソッド→Dateクラス1とDateクラス2と同じ時刻ならtrue、そうでないならfalse compareToメソッド→Dateクラス1がDateクラス2より先なら1、同じなら0、後なら-1 また、日付の文字列の変換に関しては、SimpleDateFormatクラスをこちらの記事を参考にしてください。   Calendarクラスの使い方 Calendarクラスの重要な使い方としては、日付や時刻の演算です。 日付や時刻の演算を行なうときは、addメソッドを用います。 Calendar型.add(Calendar.MONTH, 2); addメソッドに、年月日時分を指定して整数を渡すと、指定した時間の加算や減算を行なうことが可能です。 詳しい使い方はこちらの記事を参考にしてください。   DateクラスとCalendarクラスを変換する方法 ここでは、DateクラスとCalendarクラスを変換する方法について解説します。   Dateクラス→Calendarクラス CalendarクラスのsetTimeメソッドに、Dateクラス変数を渡して、下記のように記述しましょう。 Calendarクラス変数.setTime(Dateクラス変数);   Calendarクラス→Dateクラス この場合は、CalendarクラスのgetTimeメソッドを使うことで、下記のように記述します。 Date型 = Calendarクラス.getTime(); DateクラスとCalendarクラスを相互に変換することができれば、それぞれのメリットを使い分けることが可能です。   まとめ この記事では、Javaにおける日付、時刻を扱うクラスであるDate型とCalendar型の違いや変換方法について解説しました。 それぞれの使い方を把握しておくことで、効率的なデータ処理ができるので、ぜひ覚えておきしょう。   執筆してくれたメンター メンターOS AIプログラミングを使って開発を行う。 プログラミング歴は約3年。 Pythonは割と好きな方。J avaもAndroid開発で触れていたりする。 大学では物理学を勉強中。 好きな物理理論は一般相対性理論らしい。 意外と動物が好きだったり、、、。   大石ゆかり Javaのdateクラスとcalendarクラスの違いがよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaやServletの技術を使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Java

フォーム作成に必須！HTMLでlabelタグを使う方法【初心者向け】

HTMLでlabelタグを使う方法について解説しています。 問い合わせフォームやアンケートフォームを作る上では重要な知識になるので、ぜひlabelの書き方を理解しましょう。ここでは2種類の書き方を紹介しています。   HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   labelタグとは HTMLでフォームを作る時に、例えばテキストボックスの横に「名前」であったり、ラジオボタンの横に「男」「女」などの文字を 入れたいことがあります。その時に便利なタグが「labelタグ」です。   labelタグの書き方 labelタグの書き方は2種類あります。1つはlabelタグで挟む方法と、for属性を使う方法です。 labelタグで挟む方法は、 <label><input type="radio" name="sex" value="男" />男</label> のように、フォームの部品をlabelタグで挟みます。 もう一つのfor属性を使う方法は、 <label for="text_id">名前:</label> <input type="text" name="name" id="text_id" /> のように、フォームの部品のidをlabelタグのfor属性に割り当てる方法です。   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう それでは実際に書いてみましょう。「label.html」を作成し、以下を記述します。 label.html ------------------------------------------------------------------------ <html> <head> <meta charset="utf-8" /> </head> <body> <label for="name">名前</label> <input type="text" name="name" id="name" placeholder="名前"><br /> <label><input type="radio" name="sex" value="male">男</label> <label><input type="radio" name="sex" value="female">女</label><br />
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptにおけるtimeの利用方法について現役エンジニアが解説【初心者向け】