プログラミング

HTMLを用いて簡単なinfoを作成しよう!【初心者がやってみた】

code

 

HTMLのみを用いて、簡単なインフォームを作成しよう!

 

こんにちは、プログラミング学習歴4週間目のTOMOです。

 

今回は、タイトル通り

HTMLのみを用いて、簡単なインフォームを作成しよう!

という内容です。

 

当記事のコンセプトとしては

 

パカ美さん
パカ美さん

プログラミング学習を始めたけど仲間がいなくてモチベーションがあがらない

 

 

こういった方のために一緒にプログラムを書いて、楽しく理解を深めようというのが目的です。

 

よって、専門的な知識や解説などを求めている方には参考にならないと思われます。ご了承ください。

 

それでは早速やっていくよ!

 

今回の作成したいテーマ

 

今回私が作りたいテーマは以下の内容です。

ラブライブの推しと愛を伝えるような送信フォーム

完璧に自分の趣味です。

 

よって、私の場合はラブライブでしたがあなたの好きなものをテーマにして作成することをおススメします。

 

①.構成をおおまかに考える

 

作りたいものが決まったが、イメージが掴めん!!

ということで、ざっくりした構成を書きました。

  • 名前
  • 性別(ラジオを使う)
  • あなたの推し(ドロップダウンメニューにしたい)
  • コメント
  • 送信(使えないようにする)

 

私たちは初心者なので、小難しいことは考える必要ない!

こんなのザックリ書いてイメージさえ固めればOKなのです。

 

②.スタートだよ!

1

なんもない真っ白な状態からスタート!(右は参考用)

さて、こっから<head><html><body>やらを書いていくわけですが面倒なんでいきなりショートカットを使用します。

『Shift + 1 + enter』でそれらの工程が全部ショートカットできるので覚えておきましょう!

info 2

※<html lang=”en”>はデフォルトでは “en” のままです。「”en” → “ja”」に変更しておきましょう!

 

info 3

<title>も変更しました、これで準備はOK

③.<h1>と<p>をつけるんだよ!

info 4

 

info 5

 

なんとなく<h1><p>をつけました、しかしどうも<p>部分が横並びで気に食わない…

<br>を使って改行してやろう!

 

よし、いい感じになりました。

 

④.<input>で名前・性別を作成

うまく実装されてますね、よしよし。

それでは、同じようにやっていきますよ!

info 9

同じく<input>で type=”radio” name=”gender” としました。

typeの「” ”」部分は『text、checkbox、radio』などと種類によって性質が変わるので、いろいろ試してみよう!
info 10

ちょっとインフォームぽくなりましたね。

 

⑤.<select>でドロップダウンメニューを作る

info 11

ドロップダウンメニュー作成のために<select>を使用、内容は<option>で指定します。

 

info 12

確認ができましたね!よって、<option>を複製してメンバー9人を記載していくよ!

 

TOMO
TOMO

あれ?9人って多くね?

 

info 13

よし、無事に実装できました。

ぶっちゃけ、9人全員の名前を書くのが一番しんどかった…..

 

順番に並べてはいいもの、学年別に分けたくなったので移動することにしました。

『alt+ 矢印キー』で行が移動できるので、いちいちコピーして削除する必要はないよ!

 

⑥.<optgroup>で学年別にわかりやすく

info 16

<optgroup>で各学年を囲ってやりました。

このことで、2枚目のようにわかりやすく学年別にわけることに成功。

 

ちょいややこしいので『コードの順番』を記載しておきます。

<select>

<optgroup lavel=”2年生””>(2年生)
<option></option>
</optgroup>
<optgroup lavel=”1年生”>(1年生)
<option></option>
</optgroup>
<optgroup lavel=”3年生”>(3年生)
<option></option>
</optgroup>

</select>

『select > optgroup >option』という順番を頭の片隅に入れておきましょう!

⑦.<textarea>で入力欄の作成をしたよ!

info 18

最早、スクリーンショットを取るのがめんどくさくなりました。

<textarea>で入力欄を作成しました。

良いですね!それっぽくなりつつあります。

 

info 19

cols(横方向)rows(縦方向)にて入力欄の大きさを変えることが可能です。

ラブライブ愛をたくさん伝えたい人はいるに違いないので、横幅を広くしました。

 

⑧.<fieldset>で囲みを作成しより見やすく。

info 20

<fieldset>で全体を囲みました。これで分けてより見やすくなりましたね!

でも、ここからさらにグループ分けをしたいので名前を付けたい….

そこで、<fieldset>に名前を付けるべく<legend>タグを付けましょう!

 

info 22

これでグループの識別ができますね。ついでに、送信ボタンもつけました。

大体の枠組みが完成しました!

 

⑨.ここが何気に地獄やった…

 

ここからがある意味地獄でした….なんせラブライブシリーズは

3グループ×9人+1人=28人

よって、28人分の名前と学年分けが必要です。

通常は絶対ここまでやる必要はないんですが、やってしまったものは仕方がない

 

TOMO
TOMO

ショートカット多用しても地道な作業が必要です…しかし、ここまできたらもう気合いや!

 

info 22

全体を選択 →『alt + shift + ↓キー』でコピー → 後は気合いで全てのメンバー名を書く!

info 24

なんとか終わった….

 

info 25 info 26

よしよし、しっかりリストに入ってるね。

てことで完成しました!

 

今回の学習まとめ

HTMLのコード

 

今回使用したタグ

  • <fieldset>
  • <legend>
  • <input>
  • <select>
  • <optgroup>
  • <textarea>

 

以上を用いて簡単なインフォームができました。

一見すると難しそうに見えますが、やってみると意外と簡単なので一度実践してみることをおススメします。

 

私なりに今回の学習を踏まえてアドバイスをするなら

  • とりあえず調べつつ書いてみる
  • ショートカットキーは時短のために覚えよう
  • メンバー数が多すぎると地獄です

 

さぁ、あなたも素敵なプログラミングライフをスタートしましょう!

 

最後に参考動画と参考書籍のリンクを貼っておきます。私的には初心者のうちは動画で無料で学習することがオススメです。

 

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です