TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】
HTML

HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで数値の入力欄を作成する方法について解説しています。数値入力欄を作成する場合は、inputタグのtype属性にnumberを指定します。基本の書き方と画面上での動作を覚えましょう。

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

HTMLで数値の入力欄を作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

数値の入力欄を作成する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

inputタグとは

テキストボックスなどの、基本的なユーザー入力フォームを提供するためのタグです。type属性で入力フォーム種別を指定することで、多様な部品を作ることができます。

例１：テキストボックスの場合

<input type="text" value="こんにちは">

例２：ラジオボタンの場合

<input type="radio" value="1" >紅茶
<input type="radio" value="2" >コーヒー

画面表示イメージ

 

数値の入力欄を作成するには

type属性に「number」を指定することで、数値だけ入力可能なテキストボックスを表示することができます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

input type=”number”を使って数値の入力欄を作成してみよう

ユーザーに数値だけを入力してもらいたい場合には、通常のtype=”text”ではなく、type=”number”を指定することで数値専用の入力欄を用意しましょう。

数値入力欄を表示させるためのＨＴＭＬコード

<input type="number" >

画面表示イメージ

 

まとめ

inputタグのtype属性に指定できる値は種類が豊富です。今回紹介したnumber以外にも、何種類か試してみましょう

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

HTML5でdfnタグを使って用語を定義する方法を現役デザイナーが解説【初心者向け】

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

HTMLで同じname属性を配列で受け取る方法を現役エンジニアが解説【初心者向け】

HTMLで同じname属性を配列で受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

jQueryを使ってHTMLをオーバーレイ表示する方法を現役エンジニアが解説【初心者向け】

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

HTMLでrequired属性を使って入力フォームに必須項目を作る方法を現役デザイナーが解説【初心者向け】

HTMLでrequired属性を使って入力フォームに必須項目を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
HTML

HTMLでテーブル枠線が2重線になる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでテーブル枠線が2重線になる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

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

HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら！クリックで見る！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力欄の作り方 ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。 データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。 今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。   名前欄とパスワード入力欄の作り方 名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。 <input>タグ type属性 これら2つのタグと属性について解説します。   <input>タグ <input>タグは、テキスト入力や送信ボタンなど、情報を入力（インプット）するときに使います。   type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。   type属性 type属性は、要素（ここでは<input>タグ）がどんな形式であるかを指定します。   問い合わせフォームを例に見てみましょう。 <input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。 <input>タグは単独で使うので終了タグはいりません。 <input type="text"> <input type="password">   ブラウザで表示しても、一見すると何も変わらない入力欄です。   しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。 このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。   大石ゆかり 氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー？ 田島悠介 あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ！ 大石ゆかり ・・・そもそもなんで入力されていない時に表示させるんですか？ 田島悠介 それはね、例を書くことでヒントになるからだよ！ 大石ゆかり なるほどっ！そう言われてみればそうですね♪   [PR] Webデザインで副業する学習方法を動画で公開中ご意見・ご感想欄の作り方 つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。 <textarea>タグ  <textarea>〜</textarea> 複数の行が入力できるテキスト欄を作ります。 rows属性 テキスト表示エリアの高さを行数で指定します。 cols属性 テキスト表示エリアの幅を文字数で指定します。   表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。 <textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。 <textarea rows="10" cols="60">ここに記入してください</textarea>   ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。 「ここに記入してください」の文言を消して自由に記入してみましょう。     以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。     フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。 用途に応じてカスタマイズしていきましょう。   今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。 HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
HTML

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

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 input要素でパスワードの入力欄を作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   inputタグで使えるパスワード属性について inputタグのtype属性の値に「password」を指定することで、パスワード専用の入力欄になります。 以下のように記述することで、パスワード入力時には文字がドット（●）のような記号に置き換えられ、入力内容が容易に読み取られなくなります。 <input type="password">   以下のResult画面にある入力欄に、実際に入力して確認してみましょう。 See the Pen Untitled by nomallica (@nomallica) on CodePen.   また、パスワード属性を指定したinputタグには以下の属性も指定することができ、入力時の制限や補助的な表示を加えることが可能となっています。 属性 説明 autocomplete ブラウザ等による自動入力を許可するかどうかを設定できる。 pattern 形式に沿った文字が入力されるように、正規表現を使って制限できる。 placeholder 入力時のヒントを表示できる。 required 入力が必須の項目にする。 readonly 入力不可で読み取りのみに制限できる。値の送信は可能。   以降では、それぞれの属性について詳しく見ていきましょう。   パスワード属性を指定したinputタグに追加できる属性 autocomplete属性 以下のようにautocomplete属性を追加することで、入力の際にオートコンプリートを機能させるかどうかを制御できます。 <input type="password" autocomplete="current-password"> オートコンプリートとは、ブラウザやパスワード管理ツール等が、自動的にパスワード入力欄を埋めるしくみのことです。 入力を容易にする便利な機能ですが、パスワード管理のセキュリティを下げることにも繋がりますので、使い所をよく考えて指定しましょう。 指定できる値は以下になります。 値 説明 on 入力時にオートコンプリートを許可します。 off 入力時にオートコンプリートを許可しません。 current-password ブラウザ等に記録されているサイト専用のパスワードを自動入力します。 new-password 新規入力フォーム等で新しいパスワードを提案して自動入力します。   pattern属性 形式に沿った文字が入力されるように、正規表現を使って制限できます。 例えば以下のようにpattern属性の値を指定することで、半角英数字6文字以上を満たすことができない入力値がエラーになります。 <input type="password" pattern="^([a-zA-Z0-9]{6,})$" title="半角英数字6文字以上で入力ください">   正規表現がよくわからない場合は、業務で役立つ！jQueryで覚えておくべき正規表現とは【初心者向け】を読むと基本的な理解が深まります。   placeholder属性 以下のように、値に入力時のヒントとなる文字列を設定することができます。 <input type="password" placeholder="半角英数字6文字以上のパスワードを入力"> このヒント表示により、ユーザー側は入力欄にどのような情報が求められているのかを把握できます。   required属性 以下のようにrequired属性を設定することで、入力必須の項目にできます。 <input type="password" required>   readonly属性 以下のようにreadonly属性を設定することで、読み取りのみで入力不可の項目にできます <input type="password" readonly> 値はサーバーに送信可能です。   [PR] Webデザインで副業する学習方法を動画で公開中inputタグでパスワードの入力欄を作成してみよう 以下のようにシンプルなパスワード入力欄を作成してみましょう。   HTML <form> <input type="password" value="" name="sample" maxlength="10"> </form> inputタグの属性として、nameは、入力装置の識別子（ラベル）として、名前を定義することになります。 また、maxlength属性に定める数値は、入力文字数の上限数を定めることになります。   表示結果 See the Pen Untitled by nomallica (@nomallica) on CodePen.   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。
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でDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。 実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。   目次inputタグとは数値の入力欄を作成するにはinput type="number"を使って数値の入力欄を作成してみようまとめ監修してくれたメンター   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   DOMとは Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。 平たく言うと、文章構造を表現したり操作する部品の集まりです。 ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。 DOMの中には、このHTMLの要素を操作する機能も用意されています。 HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。   Document.formsプロパティとは Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。 Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。 Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。 Document.formsプロパティは、formタグを参照したり操作する場合に使用します。 formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。   [PR] Webデザインで副業する学習方法を動画で公開中Document.formsプロパティの使い方 ここでは、基本的なDocument.formsプロパティの使い方を解説します。 基本文法 document.forms[index] 解説 Document.formsプロパティは、document.formsと記述すれば使うことができます。 [index]の部分に、インデックスを指定することが可能です。 Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。 JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由
JavaScript

JavaScriptで数値チェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptで数値チェックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで数値チェックする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Number.isNaN()関数による数値チェック Number.isFinite()関数による数値チェック 実際に書いてみよう まとめ   Number.isNaN()関数による数値チェック Numberは数値をオブジェクトとして扱うラッパーオブジェクトです。 Number.isNaN()関数は値がNaNであればtrue 、そうでなければfalseを返します。 Number.isNaN(値)   JavaScriptのグローバル関数にもisNaN()関数があります。 こちらは暗黙的に値を変換するため、以下のような場合でもtrueを返します。 用途にもよるものの、基本的には厳密に判定できるNumber.isNaN()関数を使用するようにしましょう。 isNaN('abc') [PR] Webデザインで副業する学習方法を動画で公開中Number.isFinite()関数による数値チェック 数値かどうか判定するにはNumber.isFinite()関数を使用します。 Number.isFinite(値) こちらも同様にグローバル関数のisFinite()関数があり、暗黙的に値を変換します。 基本的には Number.isFinite()関数を使用しましょう。     実際に書いてみよう 今回のサンプルプログラムでは、Number.isNaN()関数とNumber.isFinite()関数の使い方について確認していきましょう。 実行はChromeブラウザーのデベロッパーツールで行います。 はじめに評価する値を用意します。 const vals = { val_NaN: Number.NaN, val_true: true, val_false: false, val_zero: 0, val_100: 100, val_pi: 3.141592, val_abc: "abc" }; 次はNumber.isNaN()関数で評価してみます。 for (key in vals) { console.log(`Number.isNaN( ${vals[key]} ) = ${Number.isNaN(vals[key])}`); } 実行結果は以下のとおりです。 厳密にNaNだけがtrueと評価されていることが確認できるでしょう。 Number.isNaN( NaN ) = true Number.isNaN( true ) = false Number.isNaN( false ) = false Number.isNaN( 0 ) = false Number.isNaN( 100
JavaScript

HTMLのオブジェクトをグレーアウトする方法を現役エンジニアが解説【初心者向け】

HTMLのオブジェクトをグレーアウトする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 オブジェクトをグレーアウトする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 グレーアウトとは 使用可否を切り替える方法 表示非表示を切り替える方法 オブジェクトをグレーアウトしてみよう   グレーアウトとは グレーアウトとは、お問い合わせフォームなどの入力画面や入力欄が灰色の表記になっており、入力が出来ない状態になっていることを指します。 アンケートの入力欄では、条件によってある項目のチェックボックスなどが選択出来ないようにグレーアウトされている場合もあります。 webアプリケーションで条件分岐などを記述することでも可能であるものの、期限が過ぎた場合や数量などの上限を超えた場合は、HTMLによって表記をグレーアウトすることでユーザーにも元の表記を見ることが可能です。   [PR] Webデザインで副業する学習方法を動画で公開中使用可否を切り替える方法 無効という意味のdisabledを記述することで可否を切り替えられます。 テキストなどの入力欄やラジオボックスなどのinput要素の中に「disabled」と書き加えるだけでグレーアウトすることが可能です。   表示非表示を切り替える方法 また、HTMLで入力欄の表示をなくしてしまう場合にはstyle=”display:none”をinput要素に記述しましょう。 こちらはcssでも表示を調整できるものの、一時的にHTMLの要素の一つを非表示にして置く場合などには、classやidを設定せずに直接htmlファイルに記述することでも実現できます。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】