HTMLの基礎
Webアプリの基礎
ブラウザで動作するWebアプリを作るにあたって、ブラウザに情報を表示させるHTMLの知識は必須です。
テキストボックス、ボタン、チェックボックス...など。
このあたりをどう表示してコントロールしていくか、基礎をまとめていきます。
ファイル拡張子が「.html」の適当なファイルを作って、中に記述しながら進めていきましょう。
テキストエディター
HTMLを書くだけであれば最悪メモ帳でもできますが...
さすがに開発するにあたってメモ表はしんどいので何らかの開発用エディターをインストールすることをお勧めします。
おすすめプログラミングエディタ9選！初心者向けに選び方も解説(侍エンジニア)
本記事ではVisual Studio Codeを使っていきます。
お決まりの形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<p>ここがブラウザに表示されるよ</p>
</body>
</html>
大枠は上記のように記述します。
- DOCTYPEにて、htmlであることを宣言
- <html>...</html>を記述し、どこまでがhtmlの記述なのかを設定
- <head>...</head>にはページの設定を記述（文字コード・タイトル）
- <body>...</body>には実際にブラウザ上に表示する内容を記述
テキスト
h1タグ、h2タグ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<h1>これがh1タグ</h1>
<h2>これがh2タグ</h2>
</body>
</html>
見出しタグにあたります。
商品紹介ページとか、記事とか静的なページでは重要ですが、Webアプリではあまり使わないイメージです。
※個人の感想です。
aタグ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<a>aタグだよ～ん</a>
</body>
</html>
文字を入力する際に使用するタグです。
文字を打つだけなら実はaタグで囲む必要はないのですが、例えば太字にしたりリンクテキストにしたりすることができるので、「基本的には裸で文字をHTML内に記述しない」です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<a href="https://zenn.dev/rain0811/articles/d50a2bc0bb688c" target="_blank">aタグだよ～ん</a>
</body>
</html>
リンクを追加したコードイメージ
- hrefには遷移先のURLを記述
- target="_blank"により、新しいタブでページを開くように設定
ちょっとコラム
aタグのhrefにはURLを、aタグに囲まれている部分には表示する文字を表示するので...
見えているリンクと全然別のリンクに飛ばすことができてしまいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<a href="https://zenn.dev/rain0811/articles/d50a2bc0bb688c" target="_blank">https://x.com/home</a>
</body>
</html>
こういう記述をすると、あたかもXのリンクに見せかけて違うリンクへ遷移させることができます。
蛇足ではありますが、自衛に使える知識なので頭の片隅に入れておいていただければ。
テキストボックス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<a>テキストボックス：</a>
<input type="text" />
</body>
</html>
<input type="text" />部分がテキストボックス部分にあたります。
※aタグのhref属性のように、inputタグにも属性をつけることができます。例）最大文字数
ドロップダウンリスト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<a>ドロップダウン：</a>
<select>
<option>小学生</option>
<option>中学生</option>
<option>高校生</option>
<option>大学生</option>
<option>社会人</option>
<option>ニート</option>
</select>
</body>
</html>
<select>...</select>がドロップダウンリストの内容で、１つ１つの選択肢はoptionタグで囲います。
チェックボックス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<label><input type="checkbox" />小学生</label>
<label><input type="checkbox" />中学生</label>
<label><input type="checkbox" />高校生</label><br />
<label><input type="checkbox" />大学生</label>
<label><input type="checkbox" />社会人</label>
<label><input type="checkbox" />ニート</label>
</body>
</html>
<input>タグに、type="checkbox"を設定することでチェックボックスを表示します。
なお、
はHTML上の改行を示しています。
Tips
チェックボックスをlabelタグで囲んで表示しておりますが、labelタグがなくともチェックボックスとして機能します。
じゃあなぜlabelタグを設定するかというと、例えば「ニート」という文字の部分をクリックしてもニートのチェックボックスのチェックをつけ外しできるようにするためです。
labelで囲まないと、チェック部分をピンポイントでクリックしないとチェックのつけ外しができません。
ラジオボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<label><input type="radio" name="test" />小学生</label>
<label><input type="radio" name="test" />中学生</label>
<label><input type="radio" name="test" />高校生</label><br />
<label><input type="radio" name="test" />大学生</label>
<label><input type="radio" name="test" />社会人</label>
<label><input type="radio" name="test" />ニート</label><br /><br />
<label><input type="radio" name="test2">うんこ味のカレー</label>
<label><input type="radio" name="test2">カレー味のうんこ</label>
</body>
</html>
画像のように、選択肢の中から１つだけ選べる状態にしているボタンを「ラジオボタン」と言います。
これは<input type="radio" name = "xxx" />の形で記述して表示します。
name属性が同じものの中からは１つしか選択できないように制御される部品です。
なお、labelに関してはチェックボックスのときと同じく、文字のところをクリックしても選べるようにすることが目的です。
フォームとボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<form name="form1" method="post" action="test.html">
<a>ユーザーID：</a>
<input type="text" name="userId" maxlength="11" placeholder="00000000000" /><br />
<a>パスワード：</a>
<input type="password" name="password" /><br /><br />
<input type="button" value = "ログイン" onclick="form1.submit()" />
</form>
</body>
</html>
ちょっとアプリっぽくなってきましたね。
formタグ
アンケートフォームや登録フォームのようなイメージで、<form>...</form>の内容を別のページへ送信することができます。
method属性は、getかpostかというデータの送信ルールを記述します。
※ここでは詳しくは触れません。データの送り方に２種類あって、それを指定してるんだなーくらいで見てもらえ手ば大丈夫です。
actionはデータの送信先を記述します。
私はこのサンプルコードを[test.html]というファイルで作成しているので、この書き方だと自分自身に対して入力データを送信する記述になっています。
※このファイルに受け取ったデータを処理する記述はないので、データを受け取っても何もしません。
ボタン
input属性にtype=buttonを設定することで、ボタンとして機能させることができます。
valueにはボタンに表示する文字を記述し、onclickにはクリックしたときに何の処理をするかを記述します。
今回のonclickには、formタグの内容をactionに設定された先へ送信するsubmit()という処理を記述しています。
見方を詳しく説明はしませんが、入力された内容を開発者ツールで確認すると
userIdという名前でname=userIdに設定したテキストボックスに入力した内容が
passwordという名前でname=passwordに設定したテキストボックスに入力した内容が
送られてきていることが確認できます。
おまけ：Submitについて
実際にSubmit処理を実行する際は下記で記述することのほうが多いと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML基礎</title>
</head>
<body>
<form name="form1" method="post" action="test.html">
<a>ユーザーID：</a>
<input type="text" name="userId" maxlength="11" placeholder="00000000000" /><br />
<a>パスワード：</a>
<input type="password" name="password" /><br /><br />
<button type="submit">ログイン</button>
</form>
</body>
</html>
本記事ではより汎用的な「ボタン」を表現するために、type=buttonのinput属性を使用しています。
Discussion