サイトアイコン ホームページ制作&デザイン制作のYORIYORK(ヨリヨーク)| 栃木県佐野市

inputタグを使用したテクニック

inputタグを使用したテクニック_アイキャッチ
Yoriyork デザインチームです。

今回は「inputタグ」をご紹介いたします。

ホームページに欠かせないのが、お問い合わせフォーム。
そこでのデータのやりとりに使うのが、inputと呼ばれるタグです。

WEBについて調べたことがある方ならお分かりかと思いますが、実はinputタグには色々なタイプが存在するのです。

テキスト入力、パスワード入力、ラジオボタン、チェックボックスと、あげればキリがありません。
またinputタグは、工夫次第でフォーム以外の使い方もあるのです。
それでは表題にもある通り、inputタグを使用したテクニックをご紹介いたします。

※動きやコードは簡易的なものにしてあります。また最新のGoogle Chromeでの閲覧を推奨いたします。古いブラウザや他のブラウザでは正常に表示されない可能性がありますので、あらかじめご了承下さい。

inputタグを使ったハンバーガーメニュー


HTML

CSS

WEBサイトでおなじみの「ハンバーガーメニュー」です。
なぜこれがinputタグで可能なのかというと、擬似クラス「:checked」が関係します。
チェックボックスやラジオボタンは、チェックしたかどうかの判定を「:checked」で確認することができます。
それを利用して、チェックした場合のみメニューに動きを表示するようにします。
その際、CSSセレクタの「~」を入れることで、チェックしたinputタグの後ろにあるコンテンツや、ハンバーガーのアイコンを対象にすることができます。

inputタグを使ったタイピングチェック

HTML

CSS

CSSのみで作成したタイピングゲームです。
問題の答えを入力し「正解」すると、詳細のテキストと外部リンクが出てきます。
先ほどハンバーガメニューで使用した「:checked」で画面移動しています。

入力した答えをどうやってチェックしているのか。
inputタグの「pattern」で判断しています。

この場合、佐野ラーメンの3種類どれかと同じなら正解になります。
あとは「:valid」の後にあるメッセージを表示するようにします。
今回は再入力出来ないように入力欄は消してしまいます。

シューティングゲーム

HTML

CSS

今までの応用編です。
ルールはシンプルで、全部で10人の忍者を倒すゲームです。

忍者をクリックすると、inputタグがチェック状態になり消えるようになっています。
全員倒すと「任務完了」、倒せなければ「任務失敗」とメッセージが変化します。
なぜメッセージが変化するのかというと、実は最初から「任務失敗」は隠されているだけで常に画面上で存在しています(画面外に出るようにCSSで調整)。

10人の忍者をクリックできた場合のみ「成功」を表示するようになっています。
これは「失敗」を分岐させるより、「成功」つまり、チェックしたという動きを把握する方が簡単だからです。
10秒過ぎたら自動的に画面が切り替わるようになっており、この管理はCSSの「@keyframes」で行なっています。

最後に

今回は技術的な内容でしたが、いかがでしたでしょうか。
「CSSだけで、こんなことができるんだ!」と、驚いた方も多いのではないでしょうか。

普段は、JavaScriptを使用するようなことも、CSSだけでできてしまいます。
ただし最初にお断りしたように、古いブラウザでは正常に動作しないものもございます。
その辺りは念頭において頂ければ幸いです。

これからも一風変わった技術発信を行ないますので、よろしくお願いいたします。

モバイルバージョンを終了