TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtextareaのreadonly属性を取得、設定する方法について現役エンジニアが解説しています。テキストエリアは複数行入力できるHTML要素でフォームの部品です。readonly属性は読み込み専用で入力が出来ない設定になります。

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

監修してくれたメンター

永井浩平

BtoBtoC事業を行っている会社で社内SEとして勤務。
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。

JavaScriptでtextareaのreadonly属性を取得、設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでtextareaのreadonly属性を取得、設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

はじめに

今回は入力欄を読み取り専用（readonly）にする方法を、inputタグに似たtextareaというHTML要素を使って説明していきます。

読み取り専用（readonly）は入力フォームの最終の確認画面などで使われることがあります。

ぜひこちらの記事の内容を学習し、入力フォームの確認画面などに実装してみてくださいね。

 

textarea（テキストエリア）とは

複数行の文字入力が可能なHTML要素です。

テキストエリアの中の文字が長くなるとスクロールできるようになります。

利用規約など、たくさんの文字列を表示する必要があるときなどに利用されます。

HTMLのテキストエリアの画像。JavaScriptでreadonly属性を取得したり、設定することが出来ます。

MDNのリファレンスはこちら

 

[PR] コーディングで副業する方法とは

readonly属性とは

テキストエリアの入力欄を読み取り専用にすることで、入力できなくする際に指定する属性になります。

入力はできませんが、すでに入力されている文字を選択することはできるので、文章のコピーのみを許可する場合に使うと便利です。

 

readonly属性を設定する方法

以下のHTMLを準備します。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <textarea id="target" col="10" rows="7">
        １行目
        ２行目
        ３行目
        ４行目
        ５行目
        ６行目
        ７行目
        ８行目
        </textarea>
    </body>
</html>

 

textareaのcolは横幅を、rowsは行数を指定しています。

今回は行数が7行の指定のため、表示しきれない部分はスクロールすることで表示できます。

また、inputタグと同様に、以下のように文字列を入力できます。

 

readonly属性の指定

readonly属性の指定は、以下のようにreadonlyと属性を記述することで設定が可能です。

<textarea id="target" col="10" rows="5" readonly style="background-color:;">

 

入力エリアをクリックしても、入力できないことが確認できたかと思います。

またユーザーが入力できないと視覚的に分かるよう、背景色をグレーなどに設定する場合もあります。

JavaScriptから設定する方法

JavaScriptでHTML要素にreadonly属性を設定する方法も紹介します。

一度入力した値を変更させたくない場合など、Single Page Applicationを実装する際に利用することがあります。

const target = document.getElementById('target');
target.readOnly = true;

HTMLではreadonlyでしたが、JavaScriptではreadOnlyと一部大文字となることに注意しましょう。

 

まとめ

今回はtextareaにreadonly属性を指定することで、選択のみ可能なスクロールできるテキストエリアの表示に関して説明しました。

inputタグでも同様に、readonly属性を指定できますので、Webサイトなどを作成する際に変更させたくない項目などがあれば活用してみましょう。

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法を現役エンジニアが解説【初心者

JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用...
JavaScript

JavaScriptでformタグのaction値を操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでformタグのaction値を操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでマイクロ秒単位で時間を計測する方法を現役エンジニアが解説【初心者向け】

JavaScriptでマイクロ秒単位で時間を計測する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入...
JavaScript

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

JavaScriptのgetElementsByNameメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者...
JavaScript

JavaScriptでファイル選択ダイアログを表示する方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイル選択ダイアログを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

JavaScriptの配列(array)データから重複排除(unique)する方法について現役エンジニアが解説

JavaScriptの配列(array)データから重複排除(unique)する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使...
JavaScript

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

JavaScriptでtextareaに改行を入れる方法を現役エンジニアが解説【初心者向け】

JavaScriptでtextareaに改行を入れる方法について解説します。これができるようになると複数行に渡る内容を入力することができます。ぜひ参考にしてみてください。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでtextareaに改行を入れる方法について詳しく説明していくね！ 大石ゆかり お願いします！   textareaとは textarea とは、複数行のテキストを入力できるHTMLタグです。 inputタグでもテキスト入力は可能ですが、textareaでは前述の通り、改行を使って複数行に渡る内容を入力することができます。 <input type="text" value="1行"> <textarea> 複数行に 渡って 内容を入力 </textarea>   JavaScriptでtextareaに改行を入れる方法 textarea に改行を入れる方法の前に、JavaScriptでinput タグの値を設定する方法を確認しておきましょう。JavaScriptでinputの値を設定するには、querySelectorやgetElementByIdなどで要素を取得後に、valueプロパティを使います。 // <input id="text" type="text"> の値を設定する let input = document.getElementById('text'); input.value = 'my input'; textarea に対しても同じ流れで設定できます。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = 'my text'; textareaに値を設定する方法が分かったので、次に「改行」について説明します。改行を入れるには「改行コード」と呼ばれる、特殊な文字を使います。バックスラッシュ(\)と小文字nとを組み合わせた\nが改行コードです。 ここまでを踏まえて、textareaに改行を入れる(改行を含む内容を入力する)には、次のようなJavaScriptを用います。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = 'こんにちは\n今日は\n良い天気ですね'; 上のスクリプトが実行されると、以下の内容がtextareaに設定されます。 こんにちは 今日は 良い天気ですね また、別の方法としてバッククォート(`)を使うことでも、改行を含む内容を設定できます。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = `こんにちは 今日は 良い天気ですね;` ただし、インデントが崩れて見づらくなるため、使い所には注意が必要でしょう。 [PR] コーディングで副業する方法とは実際に書いてみよう 以下の textarea に対して、改行を含む内容を設定してみましょう。 <textarea id="test"></textarea> まずは textarea要素を取得しましょう。 let textarea = document.getElementById('test'); 続いて、textareaに値を設定してみましょう。 textarea.value = 'Hello\nmy\nworld'; これで改行ありの内容が設定できたかと思います。他にも色々と設定して試してみてください。 筆者プロフィール メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】

HTMLのtextarea要素の使い方について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 textarea要素の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   textarea要素とは textarea要素とは、複数行の入力ができるエリアを作成するためのタグです。input要素が1行しか入力できないので、長いテキストをユーザーに入力させる場合はtextareaを使います。 rows属性とcols属性を持っており、textareaを何行にするか横幅を幾つにするかを指定できます。入力された情報は、buttonやinputが押されることでサーバーサイドに送信されます。   textarea要素の使い方 textarea要素は以下のように使用します。 <textarea name=名前 cols=横幅 rows=行数></textarea> name要素で、要素の名前、cols要素で横の長さ、rows要素で縦の長さ（行数）を指定します。作成したい入力欄の大きさに合わせてcolsやrowsを指定して作りましょう。   [PR] コーディングで副業する方法とは実際に書いてみよう それでは実際に書いてみましょう。いくつかサンプルのテキストエリアを書いてみます。 1. colsが20のtextarea colsが20 <textarea name='sample' cols='20' rows='5'>colsが20</textarea> 2. colsが40のtextarea colsが40 <textarea name='sample' cols='40' rows='5'>colsが40</textarea> 3.rowsが5のtextarea rowsが5 <textarea name='sample' cols='30' rows='5'>rowsが5</textarea> 4.rowsが10のtextarea rowsが10 <textarea name='sample' cols='30' rows='10'>rowsが10</textarea> 以上で解説を終わります。   監修してくれたメンター メンター金成さん 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次はじめにtextarea（テキストエリア）とはreadonly属性とはreadonly属性を設定する方法JavaScriptから設定する方法まとめJavaScriptを学習中の方へ そもそも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] コーディングで副業する方法とは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のinput要素でパスワードの入力欄を作成する方法を以下の内容で解説しました。 inputタグで使えるパスワード属性について パスワード属性を指定したinputタグに追加できる属性 パスワード入力欄の作成方法 input要素を理解することで、パスワード入力欄に限らず様々な入力フォーム作成を実現します。 ぜひ使いこなせるように覚えておきましょう。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

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

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 目次はじめにtextarea（テキストエリア）とはreadonly属性とはreadonly属性を設定する方法JavaScriptから設定する方法まとめJavaScriptを学習中の方へ そもそも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] コーディングで副業する方法とはご意見・ご感想欄の作り方 つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。 <textarea>タグ  <textarea>〜</textarea> 複数の行が入力できるテキスト欄を作ります。 rows属性 テキスト表示エリアの高さを行数で指定します。 cols属性 テキスト表示エリアの幅を文字数で指定します。   表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。 <textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。 <textarea rows="10" cols="60">ここに記入してください</textarea>   ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。 「ここに記入してください」の文言を消して自由に記入してみましょう。     以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。     フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。 用途に応じてカスタマイズしていきましょう。   今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。 HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 執筆してくれたメンター メンターSS 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり inputとtextareaってこうやって使い分けるんですね〜！ 田島悠介 inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！ 大石ゆかり すごい便利なんですね〜！ありがとうございましたっ！ 田島悠介 また何でも聞いてください！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
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] コーディングで副業する方法とは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で覚えておきたい頻出タグ15選【初心者向け】現役エンジニアが紹介

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。 どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。 実際に書きながら進めていくと理解しやすいです。 目次 HTMLとは HTMLの基本構造に関するタグ サイトコンテンツの作成でよく使うHTMLタグ   HTMLとは HTMLは、Hyper Text Markup Languageの頭文字を集めたもので、Webサイトの構造を形成するために使用される言語です。 HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作り、その間に命令を書き実行します。 (終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。   [PR] コーディングで副業する方法とはHTMLの基本構造に関するタグ HTMLの基本的な構造は、以下の通りです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html> それでは、ひとつずつ分解して見ていきましょう！   <html> HTML文書であることを示すタグで、(DOCTYPE宣言※のあとの)最初に<html>、最後に</html>と記述します。 すべてのHTMLタグは、この<html></html>の中に記述していきます。 ※DOCTYPE宣言は、その文書がHTMLですよということを表すおまじないのようなキーワードです。   <head> 文書全体の基本的な情報、ヘッダ情報を定義します。 このタグに記述した内容はページには表示されませんが、ブラウザや検索エンジンがその内容を読み取り、そのWebサイトの状態を判定するため、内容はしっかり吟味する必要があります。   <title> このタグはheadタグ内に記述します。 ブラウザのタブで表記される名前、ブックマークされた際に表示される名前になります。 <title>●●通販の△△</title>   <meta> このタグはheadタグ内に記述します。 Webサイトのメタ情報を設定するタグです。 メタ情報とは、検索エンジンやブラウザに伝える情報全般のことで、様々な種類があります。 以下はその中でもよく用いるメタ情報の記述です。 <!-- 文字コードをUTF8に指定する --> <meta charset="utf-8"> <!-- Webサイトの説明を検索エンジンに伝える --> <meta name="description" content="サイトの説明文"> <!-- サイトの表示領域を、閲覧するデバイスの幅に合わせる --> <meta name="viewport" content="width=device-width, initial-scale=1">   <link> このタグはheadタグ内に記述します。 指定した文書を参照するタグです。 外部スタイルシート（CSS）を適用する場合などはこれを使用します。 <!-- style.cssという外部スタイルシートを読み込む--> <link rel="stylesheet" href="style.css" type="text/css">   <body> Webサイトに実際に表示されるコンテンツすべてを囲むタグです。   <header> HTML5※から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します(ヘッダー情報を扱う<head>タグとは別のものです)。 主にサイトのタイトルや、ナビゲーション（ヘッダーメニュー）などが入ります。 ※HTML5とは？ HTML5はHTMLの仕様のひとつで、2014年に有効化しました。 それまでのHTML4と比べて全体的に機能が拡充されており、よりリッチなWebサイトの開発がしやすい仕組みになっています。 本記事執筆時点（2021年）では、HTMLといえばこのHTML5のことを指すことが多くなっています。   <footer> HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。 サイトに関する情報、著作権に関する注記、連絡先などが入ります。   サイトコンテンツの作成でよく使うHTMLタグ 次は、bodyタグの中でコンテンツの作成に使用する頻出タグの紹介です。   <p> 文章を作成する際に最もよく使うタグです。 正確には「段落（paragraph）」を表しており、別々のpタグで囲んだ文章は別の段落とみなされます。 例えば以下の場合、2つの<p>～</p>によって2つの段落に分けられています。 <p>この文は段落その1です。</p> <p>この文は段落その2です。</p>   <h1～h6> 各見出しを設定する際に使用します。 h1タグの内容がそのページで最も重要なキーワードとみなされ、ついでh2, h3と重要度が続きます。 文字の大きさだけを表すタグではなく、検索エンジンにより正しい情報を伝えるためのタグなので、内容には常に注意しましょう。 <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6>   <img> 画像を貼り付ける際に使用するタグです。 配置や大きさの設定はCSSで行うことができます。 <img src="img_1.png">   <a> 他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。 開始タグでリンクしたい内容を属性で指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。 <a href="https://example.com/">リンク</a> リンクを別のブラウザタブで開きたい場合、以下のようにtarget=”_blank”という属性を追加します。 <a href="https://example.com/" target="_blank">リンク</a>   <ol>・<ul>・<li> リストを作成する際に使用する3種類のタグです。 olとliのセット、もしくはulとliのセットで用います。 <ol> リストを作成するタグです。 ordered listの略で、「1,2,3～」「a,b,c～」といった順番のあるリストを作成します。 <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ul> unordered listの略で、順番がないリストを作成します。 <li> list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。 それらのリストの各項目を作成するときに使用します。 コード例は、上記olタグとulタグのサンプルコードを参照してください。   <table>・<tr>・<td>・<th> テーブル(表)を作成する際に使用されます。 <table> 表の開始を示すタグです。 内部に<tr>・<td>・<th>が入ります。 デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。 色や大きさなどの設定はCSSで行います。 <tr> table rowの略で、テーブルの行に使用します。 このタグを使用した分だけ行が追加されます。 画像では全部で3つの行が作成されています。 <td> table dataの略で、テーブルのセルに使用します。 画像内の「内容」の部分にあたります。 <th> table
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者向け】