)「HTMLで入力欄をつくってみたいけど、やり方がわからない...。」そんなお悩みありませんか?この記事では「HTMLで入力欄をつくる方法」「入力欄のデザイン3選」「入力欄をつくる場面」について解説していきます。それでは、まず入力欄のつくり方からみていきましょう。HTMLで文字を打つ入力欄をつくる方法HTMLで入力欄をつくるときは、以下の2つのタグを書きます。inputタグtextareaタグそれぞれ具体的に解説していきます。inputタグinputタグは、「一行におさまる入力欄をつくるためのタグ」になります。メールアドレスや電話番号、住所などを入力する欄をつくるときに使われます(お問い合わせフォームなどでよく見かけますね)。コードは以下のように書きます。type="text">このコードを出力すると、以下のようになります。このタグは基本的に「属性」をつけます。使う属性としては、「type」「name」「placeholder」などが挙げられます。type属性は、デフォルトでは「type=”text”」になっています。文字を入れるボックスをつくる場合はこれでOKです。他には、パスワードを入れる欄をつくる場合の値「type=”password”」、メールアドレスを入れる場合の値の「email」などがあります。name属性は、inputのタグに名前をつけるために使います。ここに関してはサーバー側の話になるのでくわしくは割愛します。placeholder属性をつけると、文字を入れる欄の背景に薄い文字を表示させることができます。placeholder="氏名">(↓文字を入力すると背景の文字が消えます)これらはよく使う属性なので覚えておきましょう。一行の入力欄をつくるときはinputタグを使いましょう。textareaタグtextareaタグは、「複数行にわたり入力する入力欄をつくるためのタグ」になります。お問い合わせ内容を入力する欄をつくるときなどに使います。コードは例えば以下のように書きます。textarea>のことです)。このコードを出力すると以下のように表示されます。inputタグ同様、textareaタグも属性を使用します。上の例では、「cols属性」「rows属性」を使いました。colsはcolumns(縦列)の略で、rowsは「行」と言う意味です。これらの属性の値を決めることで、タテとヨコの長さを変えます。複数行の入力するための入力欄をつくるときは、textareaタグを使いましょう。入力欄のよくあるデザインとして以下の3つを紹介します。角に丸みをつける外枠の線の色を変える下線のみにするそれぞれ解説していきます。角に丸みをつけるまず、1つ目のデザインは「角に丸みをつける」です。角に丸みをつけることで、やわらかくて今風のデザインになります。7px;}角に丸みをつけるために、CSSの「border-radius」プロパティを使いました。機会があれば入力欄の角に丸みをつけるデザインを参考にしてみてください。外枠の線の色を変える2つ目は「入力欄の外枠の色を変える」です。ここでいう外枠の色は、通常時の色ではなく、フォーカス(入力欄をクリックして起動する)ときの色のことです。コードを以下のように書きます。orangered;}「:focus」と書くことで、入力欄を起動させたときのCSSを設定することができます。none;」とすることで、デフォルトの枠線を消すことができます。このコードで、入力欄をクリックすると下のようになります。外枠の色を変えられるということも覚えておいてください。下線のみにする3つ目は「入力欄を下線のみにする」です。下線のみの入力欄にすることで、今風の洗練されたデザインになります。以下のようなかたちです。none;}下線のみにするためには、CSSのborderプロパティを使います。下の線(border-bottom)以外の、上と右と左の線を「none」の値で表示させないようにしましょう。入力欄をつくる場面ここまで、入力欄のつくり方とデザインについて見てきました。入力欄をつくる場面はどこでしょうか。結論からいうと、「お問い合わせフォーム」「ユーザー情報の登録ページ」や、「検索ワードの入力フォーム」などです。逆に言うとそれら以外ではinputタグやtextareaタグは基本使いません。HTMLでコーディングしているときにすごく出現するというわけではないです。ユーザー情報の入力ページや検索フォームで入力欄をつくる場面ではinputタグやtextareaタグは必須なので、おさえておきましょう。まとめいかがでしたか?HTMLの入力欄のつくり方が明確になったと思います。入力欄をつくるにはinputタグとtextareaタグを使いましょう。今回挙げたデザインも参考にしてみてください。