これからHTML・CSSを学びはじめる方へ（申し込みフォームを作成しHTML・CSSの基本をおさえよう）

はりまろん

2020年7月5日 14:34

こんにちは！はりまろんBです。
久しぶりの投稿になります。これからはWeb周りの技術を主に書いていこうかと思います。

早速ですが、HTML・CSSを学ぶ上で効率のいい学び方は実際に実装を行いながら学んでいくことです。
実際に手を動かすことで、このレクチャーを終えた時は見違えるほど成長できているかと思います！
そして、今回皆さんに実装していただく内容は、

「お申し込みフォームの作成」

になります。
お申し込みフォームをHTML・CSSを使って作成していきましょう！

今回の完成イメージ

これから作成するお申し込みフォームの完成図は以下のようになります。

１．基礎的なHTMLでベースをつくろう

まずは、申し込みフォームのベースとなる部分を作成することで、HTMLの基礎的な箇所について学んでいきましょう。

この章の完成イメージ

この章で使用したHTMLコード

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>申し込みフォーム</title>
</head>

<body>
 <h1>お申し込みフォーム</h1>
 <p>下記にご記載ください</p>
 <p>お名前：<input type="text" name="yourName"></p>
 <p>メールアドレス：<input type="email" name="mailAdress" </p>
 <p><button type="submit">送信する</button></p>
</body>

</html>

では、早速ですがコードを簡単に解説していきたいと思います！

１．１　Webページの設定を行う<head>タグ

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>申し込みフォーム</title>
</head>

こちらに書き込んだ内容は、Webページに表示されることはありませんが、Webページの設定を記述する際に必要となります。

今回は、文字コードとしてUTF-8（ほとんどの場合においてUTF-8を設定）を使用しています。
また表示するWebページは、デバイスの幅に応じた設定になっています。
これらは下記の２文で設定されています。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

さらに<title>では、webページのタイトルを設定することが可能です。
Webページのタイトルを指定することで、どのような内容なのかがGoogleなどに認識されやすくなり、検索にも引っ掛かりやすくなります。

<title>申し込みフォーム</title>

今回は申し込みフォームのWebページを作成するので、タイトルはお申し込みフォームと設定しました。

１．２　Webサイトに表示される<body>タグ

表示される内容は、<body>タグ内に記載していきます。
Webサイトを構築する上でメインの部分になってきます。

<body>
 <h1>お申し込みフォーム</h1>
 <p>下記にご記載ください</p>
 <p>お名前：<input type="text" name="yourName"></p>
 <p>メールアドレス：<input type="email" name="mailAdress" </p>
 <p><button type="submit">送信する</button></p>
</body>

・見出しを設定する<h>タグ
<h>タグを使用することで、見出しを設定することができます。例として、<h1>は大見出し、<h2>は中見出しという風に設定していきます。

<h1>お申し込みフォーム</h1>

ここで注意していただきたい点として、見出しタグで文字の大きさを調整してはいけないことです。
文字の大きさはCSSで設定できるため、見出しタグでの設定はNGになります。

・Webページの段落を設定する<p>タグ
<p>タグを用いることで段落を設定することができます。
どの箇所が一つの段落なのかを<p>タグを使って設定してみてください！

・入力機能を追加する<input>タグ

<input type="text" name="yourName">

<input>タグを使用することで、入力機能を追加できます。
また、<input>タグの中には、追加の情報を加える属性が記述されています。
属性では、タグに機能を追加することや名前を付けることができます。
今回は、text文のみの入力が可能で、タグの名前をyourNameという感じで設定しています。

・ボタンを追加する<button>タグ

<button type="submit">送信する</button>

<button>タグでは、Webページにボタンを追加することができます。
今回は<button>タグの中に type=submit と記載し、送信する機能を持ったボタンを作成しました。

２．CSSを使ってデザインを調整しよう

CSSを用いることでWebページのデザインを自在に調整することができるようになります。
では、「style.css」というファイルを先ほどの htmlファイルと同じ階層に作成してください。

使用したCSSファイルのコード（全体像）

/* style.css */
h1{
 font-size: 30px;
 color: coral;
}
p{
 font-size: 20px;
 color: black;
}
.content{
 background-color: white;
 width: 500px;
 margin: 10px auto;
 padding: 20px;
 border: 1px solid gray;
}
input{
 border: none;
 border-bottom: 1px solid pink;
 outline: none;
 width: 100%;
 font-size: 18px;
 padding: auto;
}
button{
 font-size: 24px;
 width: 100%;
 color: white;
 background-color: blue;
 border: none;
 padding: 12px;
 border-radius: 5px;
 box-shadow: 0 0 5px gray;
}

使用したHTMLファイルのコード（全体像）

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>申し込みフォーム</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>
 <div class="content">
   <h1>お申し込みフォーム</h1>
   <p>下記にご記載ください</p>
   <p>お名前：<input type="text" name="yourName"></p>
   <p>メールアドレス：<input type="email" name="mailAdress"> </p>
   <p><button type="submit">送信する</button></p>
 </div>
</body>

</html>

２．１　CSSファイルの読み込み

CSSファイルをHTMLファイルに読み込む場合は、下記のように記述することで読み込むことができます。先ほどのHTMLファイルの<head>タグ内を次のように変更してみてください。

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>申し込みフォーム</title>
 <link rel="stylesheet" href="style.css">
</head>

新しく<link>タグが追加されていることが分かります。hrefでは、CSSファイルが格納されているアドレスを指定しています。

２．２　<h1>タグ、<p>タグ内のレイアウトを整える

<h1>タグの内のレイアウトをCSSファイルで設定するときは、下記のように記述します。
font-sizeでは文字の大きさを設定し、colorでは文字の色を調整しています。
<p>タグ内の設定も同様です。

h1{
 font-size: 30px;
 color: coral;
}
p{
 font-size: 20px;
 color: black;
}

２．３　class属性の追加

CSSでレイアウトを記述する際によく使用するのがclass属性になります。
CSSでclassの指定は下記のように記述するだけで可能です。

.content{
 
}

ここでは、contentという名前のclass属性を定義しています。class属性を定義するときは「 . 」の後に指定します。
では、詳細をつめていきましょう。

.content{
 background-color: white;
 width: 500px;
 margin: 10px auto;
 padding: 20px;
 border: 1px solid gray;
}

まずbackground-colorでは、背景色を定義しています。widthでは横幅、marginでは要素外の余白の調整を行い、paddingでは要素内の余白の調整を行うことができます。
また、borderでは枠線の種類や色を設定することが可能です。ここでは、「1pxの大きさの、solid（一本の線）、灰色」という枠線に設定しました。

２．４　HTMLファイルにclass属性の読み込みを行う

.contentで定義したclass属性をHTMLファイルに読み込んでいきましょう。
先ほどのHTMLファイルを開いて、<body>タグ内に下記のようにコードを追加してください。

<body>
 <div class="content">
   <h1>お申し込みフォーム</h1>
   <p>下記にご記載ください</p>
   <p>お名前：<input type="text" name="yourName"></p>
   <p>メールアドレス：<input type="email" name="mailAdress" </p>
   <p><button type="submit">送信する</button></p>
 </div>
</body>

新しく追加されたのは<div>タグになります。<div>タグでは、複数のタグを一つのまとまりとして指定することができます。
この<div>タグ内に class="content" と記載することにより、先ほどCSSファイル内で定義したcontentクラスを読み込むことができました。

２．５　<input>タグと<button>タグも同様にレイアウトを調整しよう

それでは、<input>タグと<button>タグのレイアウトも設定していきましょう。

input{
 border: none;
 border-bottom: 1px solid pink;
 outline: none;
 width: 100%;
 font-size: 18px;
 padding: auto;
}
button{
 font-size: 24px;
 width: 100%;
 color: white;
 background-color: blue;
 border: none;
 padding: 12px;
 border-radius: 5px;
 box-shadow: 0 0 5px gray;
}

まず<input>タグの設定ですが、borderをnoneとすることで一度枠線のリセットを行っています。
またoutlineでは、入力する際に枠線が現れるのをなくしています。

次に、<button>タグ内の設定では、border-radiusを用いることでボタンの角の丸みを調整することができます。box-shadowでは、ボタンに影をつけています。

最後に

いかがだったでしょうか。
実際に実装をすることでHTML・CSSの概要は掴めたのではないかと思います。もし、それぞれのタグの役割や属性内の調整などが気になったら、その度に調べてみてください。

今回は、HTML・CSSの基本について紹介しました。

ぜひこれを機会に勉強してみるのも面白いかもしれません。
これからもWeb系の技術についてまとめていこうと思いますので、興味がある方もない方も、ぜひ「いいね！」と「登録」をお願いします。

読んだ本や勉強したことの備忘録です('ω')