icon
icon

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

初心者向けにHTMLのオブジェクトをグレーアウトする方法について解説しています。入力フォームでグレーアウトを使用する場面の例、disabledを使ったグレーアウトの実装方法を覚えましょう。

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

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ファイル)
<tbody>

<tr>

<th>テキスト</th>

<td><input type="text"name="名前"value="入力欄1"></td>

<td><input type="text"disabled name="テスト"value="入力欄2"></td>

<td><input type="text"name="テスト"value="入力欄3"style="display:none"></td>

<td><input type="text"name="テスト"value="入力欄4"></td>

</tr>

<tr>

<th>ラジオボタン</th>

<td>1<input type="radio"name="radio"value="ラジオボタン"></td>

<td>2<input type="radio"disabled name="radio"value="ラジオボタン"></td>

<td>3<input type="radio"name="radio"value="ラジオボタン"style="display:none"></td>

<td>4<input type="radio"name="radio"value="ラジオボタン"></td>

</tr>

<tr>

<th>チェックボックス</th>

<td>AAA<input type="checkbox"name="check"value="チェックボックス"></td>

<td>BBB<input type="checkbox"disabled name="check"value="チェックボックス"></td>

<td>CCC<input type="checkbox"name="check"value="チェックボックス"style="display:none"></td>

<td>DDD<input type="checkbox"name="check"value="チェックボックス"></td>

</tr>

</tbody>

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLのオブジェクトをグレーアウトする方法がよく分かったので良かったです!

田島悠介

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

大石ゆかり

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

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

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