HTMLとCSSとJavaScriptでキャラクター選択画面を作る
ゲームとかにありがちなキャラクター選択画面のアニメーションをHTMLとCSSとJavaScriptで簡単に作ります。
動作イメージ
キャラクターを選択する前はボタンは灰色になっていて押せません。
キャラクターをクリックすると、キャラクターの周りが赤く囲われます。
ボタンは灰色から黄色に変化して、押せるようになります。
他のキャラクターをクリックすると、キャラクターの周りが赤く囲われます。
先程クリックしたキャラクターの周りの赤枠は消えます。
論よりコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charaset = "utf-8"> <title>キャラクター選択</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> </header> <div id="main" class="site-width"> <!-- キャラクター選択画面--> <div class="characters-select-area" > <h1>キャラクターを選んでね</h1> <form method="post"> <!--上段のキャラクターが配置されているエリア --> <div id="container-top-characters" class="site-width"> <!-- for属性の値とinputタグのid属性の値を同じにすることで、ブラウザでラベルをクリックした際に、inputタグをクリックしたのと同じ動作が可能になる --> <!-- labelタグにはjsで使うクラス「js-panel-select」を用意しておく--> <label for="man" class="panel panel-ceo js-panel-select"> <!-- ラジオボタンを用意する--> <input type="radio" name="ceo-select" value="0" id="man"> <img class="panel-img" src="img/man.png"> </label> <label for="woman" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="1" id="woman"> <img class="panel-img" src="img/woman.png"> </label> <label for="ninja" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="2" id="ninja"> <img class="panel-img" src="img/ninja.png"> </label> </div> <!--下段のキャラクターが配置されているエリア --> <div id="container-bottom-characters" class="site-width"> <label for="monkey" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="3" id="monkey"> <img class="panel-img" src="img/monkey.png"> </label> <label for="dog" class="panel panel-ceo js-panel-select"> <input type="radio" name="ceo-select" value="4" id="dog"> <img class="panel-img" src="img/dog.png"> </label> </div> <!-- submitボタンのinputタグにはjsで使うクラス「js-btn-prohibid」を用意しておく --> <!-- 属性disabledをつけておき、ボタンを非活性にする --> <input type="submit" class="btn btn-slect js-btn-prohibid" value="選択" disabled="disabled"> </form> </div> <footer class="site-width"> </footer> <script src="js/vendor/jquery-2.2.2.min.js"></script> <script> ////キャラクター選択 //クラス js-panel-select のDOMを変数に入れる var $selectPanel = $('.js-panel-select'); //変数$selectPanelの要素をクリックしたとき $selectPanel.on('click', function(e){ //変数$selectPanelの要素のCSSを変更して、枠線を透明にする（前回クリックしたときの赤い枠線を消すため） $selectPanel.css('border', '5px rgba(0,0,0,0) solid'); //クリックした要素のCSSを変更して枠線を赤くする $(this).css('border', '5px red solid'); }); ////ボタン活性化 //クラス js-btn-prohibid のDOMを変数に入れる var $prohibidBtn = $('.js-btn-prohibid'); //変数$selectPanelの要素をクリックしたとき $selectPanel.on('click', function(e){ //クラスjs-btn-permitを追加する(ボタンの色が変わる) //クラスjs-btn-prohibidを削除する(ボタンの色が変わる) //属性disabledを削除する(ボタンが活性化される) $prohibidBtn.addClass('js-btn-permit').removeClass('js-btn-prohibid').removeAttr('disabled'); }); </script> </body> </html>
CSS
/* ====================================== サイト全般レイアウト ====================================== */ /*リセットCSS*/ *{ text-decoration: none; padding: 0px; margin: 0px; color: rgba(0,0,0,0.87); } .site-width{ width: 100%; } #main{ background-color: #F9C80E; } /* ====================================== キャラクター選択画面 ====================================== */ .characters-select-area img{ width: 100%; } .character-area{ float: left; } input[type=radio] { display: none;/*ラジオボタンを見えないようにするCSS*/ } .panel-ceo{ width: 33vw; display: block; float: left; box-sizing: border-box; } #container-top-characters{ margin: 0 auto; width: 100vw; overflow: hidden; } #container-bottom-characters{ margin: 0 auto; width: 66vw; overflow: hidden; } .btn{ width: 50vw; margin: 0 auto; display: block; font-size: 6vw; } .js-panel-select{ border: 5px rgba(0,0,0,0) solid;/*キャラクターパネルのデフォルトのCSS*/ } .js-btn-prohibid{ background-color: gray;/*非活性のときのボタンのCSS*/ } .js-btn-permit{ background-color: yellow ;/*活性のときのボタンのCSS*/ }
ポイントまとめ
・キャラクターパネルtype="radio"のinputタグにし、CSSで「display: none;」を指定してラジオボタンを見えなくする。
・labelタグで「type="radio"のinputタグ」と「キャラクター画像のimgタグ」を囲う。
・「labelタグのfor属性の値」と「inputタグのid属性の値」を同じにすることで、ブラウザでラベルをクリックした際にinputタグをクリックしたとき(ラジオボタンをクリックしたとき)と同じ動作をさせる。
・submitボタンのinputタグにはあらかじめ属性disabledをつけておき、ボタンを非活性にする。
・キャラクターパネルをクリックしたときに、JavaScriptで枠線を付ける/消す、ボタンを活性化する。
