前回も言ったとおり、まずは投票ページを作ります。
まずはHTMLとCSSから作ります。
HTML自体はそんなに難しくないと思います。
まずは大きく分けてみます。
タイトル
投票をするところ
リセットボタン
この三つだけ、ということになりますね。
骨組み
というわけでまずこれを書きます。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> タイトル </div> <div > 投票するところ </div> <div> リセットボタン </div> </body> </html>
見出し
ここは普通にタイトル替わりの見出しと説明書きを書きます。
見出しは<h1>、説明書きは<p>ですね。
<div> <h1>投票アプリ</h1> <p>萎えずに投票アプリつくるぜ</p> </div> <div > 投票するところ </div> <div> リセットボタン </div>
こんな感じですね。
投票するところ、リセットボタンはCSSとJavaScriptで作ることになります。
あれ？
HTMLはもう終わりかな？？
※追記
いきなり追記です。
タイトルなどはヘッダーにつけていきます。
あとメニューなんかもヘッダーにつけていきます。
で、ヘッダーを作るのだから、メインとフッターもつけていきます。
ってか、HTMLを作るときにはこの三つは基本というか定番です。
今までは勉強の中身とはあまり関係なかったので作ってきませんでしたが。
ヘッダー、メイン、フッター
さて、ヘッダーのタグは<header>、メインは<main>、フッターは<footer>です。
で、これはボディタグの中に書きますので、まとめて書くとこんな感じ。
<header> </header> <main> </main> <footer> </footer>
上で作ったものはメインですので、これはぜんぶメインに放り込みます。
<header> </header> <main> <div> <h1>投票アプリ</h1> <p>萎えずに投票アプリつくるぜ</p> </div> <div> 投票するところ </div> <div> リセットボタン </div> </main> <footer> </footer>
タイトルはヘッダーに入りますのでちょっと移動します。
<header> <div> <h1>投票アプリ</h1> <p>萎えずに投票アプリつくるぜ</p> </div> </header>
次にヘッダーにはメニューもつけておきたいのでそれも書いておくことにします。
メニューはPCユーザーのためのもので、スマホユーザーについてはハンバーガーメニュー（右上にある三本線のやつ）を作ります。
HTMLでメニューはナビゲーションに当たりますので<nav>で囲み、メニューはリストですので<ul>、リストの各項目は<li>になります。
ちなみに<ul>は順序なしのリスト、つまり「Unordered List」の略です。
順序がありのリストとなると「Ordered List」の略である<ol>になります。
閑話休題。
話を戻します。
メニューとして先ほどのタグを付け加えていくと
<header> <div> <h1>投票アプリ</h1> <p>萎えずに投票アプリつくるぜ</p> </div> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="vote.html">投票</a></li> <li><a href="comment.html">コメント</a></li> </ul> </nav> </header>
こんな感じですね。
ちなみにVS Codeでは<heaまで書けば候補としてここまで書いてくれます。
バージョンにもよりますが、基本的には候補を有効にするためにはTabキーを押します。
ここまでのまとめは以下のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="vote.html">投票</a></li> <li><a href="comment.html">コメント</a></li> </ul> </nav> </header> <main> <div> 投票をするところ </div> <div> リセットボタン </div> </main> <footer> <p>© 2025 投票アプリ</p> </footer> </body> </html>
フッターは空にしておくのも寂しいので適当に書いておきました。
おわりに
とりあえずここまでにしておいて、必要がでてきたらまた追記していくことにします。
というかタグにIDやなんかを付け足していくことは確定ですので、追記も確定ですね。
というか、これを書いてる時点ですでに修正して「おわりに」の位置も最後に移動しています。
次は「投票するところ」をCSSで作っていこうと思います。
この「投票するところ」はかなり時間がかかりそうな気がしますので、焦らずにやっていこうと思います。
本当なら投票するところでもHTMLが必要になるんですけど、それはCSSと混ぜてやることになるので、そちらに譲るとします。
