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

admin

5年前

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

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

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

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

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

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

1 inputタグを使ったハンバーガーメニュー
2 inputタグを使ったタイピングチェック
3 シューティングゲーム
4 最後に

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

HTML

<label class="hunb_wrap" for="open">
   <input type="checkbox" name="" id="open">
   <div class="hunb">
     <div></div>
     <div></div>
     <div></div>
   </div>
   <div class="main">open</div>
 </label>

</div>

</label>

CSS

   .hunb {
     width: 20px;
     height: 20px;
     position: relative;
   }

   .hunb>div {
     width: 100%;
     height: 1px;
     background: #000000;
     position: absolute;
   }

   .hunb>div:nth-of-type(1) {
     top: 0;
     left: 0;
     transition: 0.3s;
   }

   .hunb>div:nth-of-type(2) {
     top: 50%;
     left: 0;
     margin-top: -1px;
     opacity: 1;
     transition: 0.3s;
   }

   .hunb>div:nth-of-type(3) {
     top: auto;
     left: 0;
     bottom: 0;
     transform: rotate(0deg);
     transition: 0.3s;
   }
   #open:checked ~ .hunb>div:nth-of-type(1) {
     top: 50%;
     left: 0;
     margin-top: -1px;
     transition: 0.3s;
     transform: rotate(45deg);
   }

   #open:checked ~ .hunb>div:nth-of-type(2) {
     top: 50%;
     left: 0;
     margin-top: -1px;
     opacity: 0;
     transition: 0.3s;
   }

   #open:checked ~ .hunb>div:nth-of-type(3) {
     top: 50%;
     left: 0;
     margin-top: -1px;
     transition: 0.3s;
     transform: rotate(-45deg);
   }
   .main {
     width: 200px;
     height: 200px;
     padding: 40px;
     border: 1px solid #000000;
     display: none;
   }
   #open:checked ~ .main {
     display: block;
   }

.hunb {

width: 20px;

height: 20px;

position: relative;

}

.hunb>div {

width: 100%;

height: 1px;

background: #000000;

position: absolute;

}

.hunb>div:nth-of-type(1) {

top: 0;

left: 0;

transition: 0.3s;

}

.hunb>div:nth-of-type(2) {

top: 50%;

left: 0;

margin-top: -1px;

opacity: 1;

transition: 0.3s;

}

.hunb>div:nth-of-type(3) {

top: auto;

left: 0;

bottom: 0;

transform: rotate(0deg);

transition: 0.3s;

}

#open:checked ~ .hunb>div:nth-of-type(1) {

top: 50%;

left: 0;

margin-top: -1px;

transition: 0.3s;

transform: rotate(45deg);

}

#open:checked ~ .hunb>div:nth-of-type(2) {

top: 50%;

left: 0;

margin-top: -1px;

opacity: 0;

transition: 0.3s;

}

#open:checked ~ .hunb>div:nth-of-type(3) {

top: 50%;

left: 0;

margin-top: -1px;

transition: 0.3s;

transform: rotate(-45deg);

}

.main {

width: 200px;

height: 200px;

padding: 40px;

border: 1px solid #000000;

display: none;

}

#open:checked ~ .main {

display: block;

}

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

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

HTML

 <div class="q_area">
   <input type="radio" id="key">
   <div class="txtbx">
     <h1>タイピングゲーム</h1>
     <label class="q_area_start" for="key">スタート</label>
   </div>
   <div class="test" id="test">
     <div class="inputbx">
       <h2>問題:栃木県佐野市で有名な名物と言えば？</h2>
       <input type="text" pattern="(佐野ラーメン|佐野らーめん|さのらーめん)" autofoucs required>
       <div class="message">
         <p>正解！<br>佐野の名物といえば佐野らーめんです。<br>青竹打ちという技法で作られた手打ち麺に<br>薄味しょうゆベースの透き通るスープ！<br>         
           <a href="https://tochigi-seeds.com/sano-sightseeing#i-8" target="_blank" rel="noopener noreferrer">詳しく知りたい方はこちら</a></p>
       </div>
     </div>
   </div>
 </div>

<h1>タイピングゲーム</h1>

</div>

<h2>問題:栃木県佐野市で有名な名物と言えば？</h2>

<p>正解！<br>佐野の名物といえば佐野らーめんです。<br>青竹打ちという技法で作られた手打ち麺に<br>薄味しょうゆベースの透き通るスープ！<br>

<a href="https://tochigi-seeds.com/sano-sightseeing#i-8" target="_blank" rel="noopener noreferrer">詳しく知りたい方はこちら</a></p>

</div>

CSS

  .q_area {
     width: 600px;
     height: 600px;
     background: rgba(0, 0, 0, 0.6);
     position: relative;
     text-align: center;
   }

   .q_area .txtbx {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
   }

   .q_area h1 {
     width: 100%;
     color: #ffffff;
     line-height: 1em;
   }

   .q_area_start {
     color: #ffffff;
   }

   .test {
     display: none;
     position: relative;
   }

   .test h2 {
     font-size: 20px;
     color: #ffffff;
   }

   #key:checked ~ .test {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0,1);
     position: absolute;
     top: 0;
     left: 0;
     display: block;
   }
   .test .inputbx {
     width: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
   }
   .test .inputbx .message {
     display: none;
     padding: 20px;
   }
   .test .inputbx .message p {
     color: #ffffff;
     opacity: 0;
     transition: 0.4s;
   }
   .test .inputbx input:valid {
     display: block;
     opacity: 0;
     position: absolute;
     z-index: -1;
   }
   .test .inputbx input:valid + .message {
     display: block;
   }
   .test .inputbx input:valid + .message p {
     color: #ffffff;
     opacity: 1;
     transition: 0.4s;
   }
   .test .inputbx input:valid + .message p a {
     color: #99cc00;
   }

.q_area {

width: 600px;

height: 600px;

background: rgba(0, 0, 0, 0.6);

position: relative;

text-align: center;

}

.q_area .txtbx {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

}

.q_area h1 {

width: 100%;

color: #ffffff;

line-height: 1em;

}

.q_area_start {

color: #ffffff;

}

.test {

display: none;

position: relative;

}

.test h2 {

font-size: 20px;

color: #ffffff;

}

#key:checked ~ .test {

width: 100%;

height: 100%;

background: rgba(0, 0, 0,1);

position: absolute;

top: 0;

left: 0;

display: block;

}

.test .inputbx {

width: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

.test .inputbx .message {

display: none;

padding: 20px;

}

.test .inputbx .message p {

color: #ffffff;

opacity: 0;

transition: 0.4s;

}

.test .inputbx input:valid {

display: block;

opacity: 0;

position: absolute;

z-index: -1;

}

.test .inputbx input:valid + .message {

display: block;

}

.test .inputbx input:valid + .message p {

color: #ffffff;

opacity: 1;

transition: 0.4s;

}

.test .inputbx input:valid + .message p a {

color: #99cc00;

}

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

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

pattern="(佐野ラーメン|佐野らーめん|さのらーめん)"

1	pattern="(佐野ラーメン\|佐野らーめん\|さのらーめん)"

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

シューティングゲーム

HTML

 <div id="ninja">
   <input type="checkbox" id="flag">
   <div id="menu">
     <h1>忍</h1>
     <p><label for="flag">開始</label></p>
   </div>
   <div class="field" id="play01">
     <!-- flag  -->
     <input type="radio" name="" id="next01">
     <input type="radio" name="" id="next02">
     <input type="radio" name="" id="next03">
     <input type="radio" name="" id="next04">
     <input type="radio" name="" id="next05">
     <input type="radio" name="" id="next06">
     <input type="radio" name="" id="next07">
     <input type="radio" name="" id="next08">
     <input type="radio" name="" id="next09">
     <input type="radio" name="" id="next10">

     <label class="item next01" for="next01">
       <input type="checkbox" name="" id="">
       <img src="assets/img/common/ninja.png" alt="">
       1
     </label>
     <label class="item next02" for="next02">
       <img src="assets/img/common/ninja.png" alt="">
       2
     </label>
     <label class="item next03" for="next03">
       <img src="assets/img/common/ninja.png" alt="">
       3
     </label>
     <label class="item next04" for="next04">
       <img src="assets/img/common/ninja.png" alt="">
       4
     </label>
     <label class="item next05" for="next05">
       <img src="assets/img/common/ninja.png" alt="">
       5
     </label>
     <label class="item next06" for="next06">
       <img src="assets/img/common/ninja.png" alt="">
       6
     </label>
     <label class="item next07" for="next07">
       <img src="assets/img/common/ninja.png" alt="">
       7
     </label>
     <label class="item next08" for="next08">
       <img src="assets/img/common/ninja.png" alt="">
       8
     </label>
     <label class="item next09" for="next09">
       <img src="assets/img/common/ninja.png" alt="">
       9
     </label>
     <label class="item next10" for="next10">
       <img src="assets/img/common/ninja.png" alt="">
       10
     </label>
     <div id="clear">
       <p>任務完了</p>
       <p><a href="">再挑戦</a></p>
     </div>
     <div id="end">
       <p>任務失敗</p>
       <p><a href="">再挑戦</a></p>
     </div>
   </div>
 </div>

</div>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</label>

</div>

</div>

CSS

 body {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 }

 #ninja {
   width: 600px;
   height: 600px;
   position: relative;
   background: rgba(0, 0, 0, 0.8);
   overflow: hidden;
 }

 #menu {
   width: 100%;
   height: 100%;
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 #menu h1 {
   font-size: 60px;
   padding-bottom: 80px;
 }

 #menu p,
 #menu label {
   font-size: 20px;
 }

 .field {
   display: none;
   position: relative;
 }

 .field .item {
   font-size: 0;
   position: absolute;
   top: 30%;
   left: 30%;
 }

 .field .item:nth-of-type(1) {
   animation: anime01 3s alternate infinite;
 }

 .field .item:nth-of-type(2) {
   animation: anime02 3s alternate infinite;
 }

 .field .item:nth-of-type(3) {
   animation: anime03 3s alternate infinite;
 }

 .field .item:nth-of-type(4) {
   animation: anime04 3s alternate infinite;
 }

 .field .item:nth-of-type(5) {
   animation: anime01 3s alternate-reverse infinite;
 }

 .field .item:nth-of-type(6) {
   animation: anime02 3s alternate-reverse infinite;
 }

 .field .item:nth-of-type(7) {
   animation: anime03 4s alternate-reverse infinite;
 }

 .field .item:nth-of-type(8) {
   animation: anime04 2s alternate-reverse infinite;
 }

 .field .item:nth-of-type(9) {
   animation: anime05 1s alternate infinite;
 }

 .field .item:nth-of-type(10) {
   animation: anime05 3s alternate-reverse infinite;
 }

 @keyframes anime01 {
   0% {
     transform: translate(0, -100%);
   }

   100% {
     transform: translate(0, 100%);
   }
 }

 @keyframes anime02 {
   0% {
     transform: translate(-100%, 0);
   }

   100% {
     transform: translate(100%, 0);
   }
 }

 @keyframes anime03 {
   0% {
     transform: translate(0, 0%);
   }

   50% {
     transform: translate(-100%, 0%);
   }

   100% {
     transform: translate(0%, 0%);
   }
 }

 @keyframes anime04 {
   0% {
     transform: translate(-300%, 0%);
   }

   50% {
     transform: translate(0%, -100%);
   }

   100% {
     transform: translate(100%, 50%);
   }
 }

 @keyframes anime05 {
   0% {
     transform: translate(0%, -100%);
   }

   50% {
     transform: translate(100%, 0);
   }

   100% {
     transform: translate(0, 100%%);
   }
 }

 @keyframes timelimit {
   100% {
     transform: translateX(0%);
     opacity: 1;
     visibility: visible;
     z-index: 100;
   }
 }

 #next01:checked~.item.next01,
 #next02:checked~.item.next02,
 #next03:checked~.item.next03,
 #next04:checked~.item.next04,
 #next05:checked~.item.next05,
 #next06:checked~.item.next06,
 #next07:checked~.item.next07,
 #next08:checked~.item.next08,
 #next09:checked~.item.next09,
 #next10:checked~.item.next10 {
   display: none;
 }

 #flag:checked~.field {
   display: block;
   background: rgba(255, 255, 255, 1);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid #000000;
 }

 #clear {
   display: none;
   width: 100%;
   height: 100%;
   color: #ffffff;
 }

 #end {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 1);
   position: absolute;
   top: 0;
   left: 0;
   color: #ffffff;
   visibility: hidden;
     transform: translateX(-100%);
     opacity: 0;
     z-index: -1;
   animation: timelimit 0s 10s forwards;
 }

 #clear p,
 #end p {
   font-size: 20px;
 }

 #clear a,
 #end a {
   display: block;
   font-size: 14px;
   color: #ffffff;
   padding-top: 40px;
 }

 #next01:checked+#next02:checked+#next03:checked+#next04:checked+#next05:checked+#next06:checked+#next07:checked+#next08:checked+#next09:checked+#next10:checked~#clear {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 1);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 99999;
 }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

body {

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif;

}

#ninja {

width: 600px;

height: 600px;

position: relative;

background: rgba(0, 0, 0, 0.8);

overflow: hidden;

}

#menu {

width: 100%;

height: 100%;

color: #ffffff;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

#menu h1 {

font-size: 60px;

padding-bottom: 80px;

}

#menu p,

#menu label {

font-size: 20px;

}

.field {

display: none;

position: relative;

}

.field .item {

font-size: 0;

position: absolute;

top: 30%;

left: 30%;

}

.field .item:nth-of-type(1) {

animation: anime01 3s alternate infinite;

}

.field .item:nth-of-type(2) {

animation: anime02 3s alternate infinite;

}

.field .item:nth-of-type(3) {

animation: anime03 3s alternate infinite;

}

.field .item:nth-of-type(4) {

animation: anime04 3s alternate infinite;

}

.field .item:nth-of-type(5) {

animation: anime01 3s alternate-reverse infinite;

}

.field .item:nth-of-type(6) {

animation: anime02 3s alternate-reverse infinite;

}

.field .item:nth-of-type(7) {

animation: anime03 4s alternate-reverse infinite;

}

.field .item:nth-of-type(8) {

animation: anime04 2s alternate-reverse infinite;

}

.field .item:nth-of-type(9) {

animation: anime05 1s alternate infinite;

}

.field .item:nth-of-type(10) {

animation: anime05 3s alternate-reverse infinite;

}

@keyframes anime01 {

0% {

transform: translate(0, -100%);

}

100% {

transform: translate(0, 100%);

}

@keyframes anime02 {

0% {

transform: translate(-100%, 0);

}

100% {

transform: translate(100%, 0);

}

@keyframes anime03 {

0% {

transform: translate(0, 0%);

}

50% {

transform: translate(-100%, 0%);

}

100% {

transform: translate(0%, 0%);

}

@keyframes anime04 {

0% {

transform: translate(-300%, 0%);

}

50% {

transform: translate(0%, -100%);

}

100% {

transform: translate(100%, 50%);

}

@keyframes anime05 {

0% {

transform: translate(0%, -100%);

}

50% {

transform: translate(100%, 0);

}

100% {

transform: translate(0, 100%%);

}

@keyframes timelimit {

100% {

transform: translateX(0%);

opacity: 1;

visibility: visible;

z-index: 100;

}

#next01:checked~.item.next01,

#next02:checked~.item.next02,

#next03:checked~.item.next03,

#next04:checked~.item.next04,

#next05:checked~.item.next05,

#next06:checked~.item.next06,

#next07:checked~.item.next07,

#next08:checked~.item.next08,

#next09:checked~.item.next09,

#next10:checked~.item.next10 {

display: none;

}

#flag:checked~.field {

display: block;

background: rgba(255, 255, 255, 1);

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

border: 1px solid #000000;

}

#clear {

display: none;

width: 100%;

height: 100%;

color: #ffffff;

}

#end {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 1);

position: absolute;

top: 0;

left: 0;

color: #ffffff;

visibility: hidden;

transform: translateX(-100%);

opacity: 0;

z-index: -1;

animation: timelimit 0s 10s forwards;

}

#clear p,

#end p {

font-size: 20px;

}

#clear a,

#end a {

display: block;

font-size: 14px;

color: #ffffff;

padding-top: 40px;

}

#next01:checked+#next02:checked+#next03:checked+#next04:checked+#next05:checked+#next06:checked+#next07:checked+#next08:checked+#next09:checked+#next10:checked~#clear {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 1);

position: absolute;

top: 0;

left: 0;

z-index: 99999;

}

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

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

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

最後に

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

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

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