当方ゲームの攻略ページを製作中でありましてキャラの絞り込みを作ろうと思いましたが行き詰まったため質問させていただきます。また、WPの固定ページ内に作成しようと考えており、よくわかりませんがPHP(ショートコードを含む),jsがいろいろな方法を試しても実行できないためCSSだけで作りたいと思っています。具体的には
・属性
・武器
・性別
それぞれのcheckboxがあり選択されている条件に当てはまるものを表示するというものです。
要素をまずdisplay:noneで消しておき、選択されたものはdisplay:blockで表示しようとしています。
以下作成したコードです。
HTML5
1<div class="Search"> 2 3<p>【属性】</p> 4 <input id="FIRE" checked="checked" name="checkbox_item" type="checkbox" /> 5 <label class="checkbox_item fire_item" for="FIRE"><span class="text-m">火</span></label> 6 7 <input id="WATER" checked="checked" name="checkbox_item" type="checkbox" /> 8 <label class="checkbox_item water_item" for="WATER"><span class="text-m">水</span></label> 9 10 <input id="WIND" checked="checked" name="checkbox_item" type="checkbox" /> 11 <label class="checkbox_item wind_item" for="WIND"><span class="text-m">風</span></label> 12 13 <input id="LIGHT" checked="checked" name="checkbox_item" type="checkbox" /> 14 <label class="checkbox_item light_item" for="LIGHT"><span class="text-m">光</span></label> 15 16 <input id="DARK" checked="checked" name="checkbox_item" type="checkbox" /> 17 <label class="checkbox_item dark_item" for="DARK"><span class="text-m">闇</span></label> 18 19<p style="clear: left">【武器種別】</p> 20 <input id="SLASH" checked="checked" name="checkbox_item" type="checkbox" /> 21 <label class="checkbox_item slash_item" for="SLASH"><span class="text-m">斬撃</span></label> 22 23 <input id="ASSAULT" checked="checked" name="checkbox_item" type="checkbox" /> 24 <label class="checkbox_item assault_item" for="ASSAULT"><span class="text-m">突撃</span></label> 25 26 <input id="BLOW" checked="checked" name="checkbox_item" type="checkbox" /> 27 <label class="checkbox_item blow_item" for="BLOW"><span class="text-m">打撃</span></label> 28 29 <input id="ARCHER" checked="checked" name="checkbox_item" type="checkbox" /> 30 <label class="checkbox_item archer_item" for="ARCHER"><span class="text-m">弓矢</span></label> 31 32 <input id="MAGICIAN" checked="checked" name="checkbox_item" type="checkbox" /> 33 <label class="checkbox_item magician_item" for="MAGICIAN"><span class="text-m">魔法</span></label> 34 35 <input id="GUNNER" checked="checked" name="checkbox_item" type="checkbox" /> 36 <label class="checkbox_item gunner_item" for="GUNNER"><span class="text-m">銃</span></label> 37 38 <input id="HEALING" checked="checked" name="checkbox_item" type="checkbox" /> 39 <label class="checkbox_item healing_item" for="HEALING"><span class="text-m">回復</span></label><br> 40 41<p style="clear: left;">【性別】</p> 42 43 <input id="MAN" class="N-INPUT" checked="checked" name="checkbox_item" type="checkbox" /> 44 <label class="checkbox_item nomal_item" for="MAN"><span class="text-m">男</span></label> 45 46 <input id="WOMAN" class="N-INPUT" checked="checked" name="checkbox_item" type="checkbox" /> 47 <label class="checkbox_item nomal_item" for="WOMAN"><span class="text-m">女</span></label> 48 49 <input id="UNKNOWN" class="N-INPUT" checked="checked" name="checkbox_item" type="checkbox" /> 50 <label class="checkbox_item nomal_item" for="UNKNOWN"><span class="text-m">???</span></label> 51 52<p style="clear: left"></p> 53 54<div class="woman slash dark UNIT"> 55 <a href="https://kuku-fantasy.net/megihazi/?p=278"><img class="alignnone wp-image-282 size-medium" src="https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/roretta-300x179.png" alt="" width="300" height="179" /></a> 56</div> 57
CSS
1 input[type=checkbox]{ 2 display: none; 3 } 4/*全体のスタイル*/ 5 .Search { 6 margin-top: 50px; 7 padding-bottom: 40px; 8 background-color: #fff; 9 width: 100%; 10 margin: 0 auto; 11 } 12/*checkboxのスタイル*/ 13 .fire_item{ 14 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/fire2.png"); 15 } 16 .water_item{ 17 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/water2.png"); 18 } 19 .wind_item{ 20 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/wind2.png") 21 } 22 .light_item{ 23 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/light2.png") 24 } 25 .dark_item{ 26 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/dark2.png") 27 } 28 .nomal_item{ 29 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/BASS2.png") 30 } 31 .slash_item{ 32 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/slash2.png") 33 } 34 .assault_item{ 35 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/assault2.png") 36 } 37 .blow_item{ 38 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/blow2.png") 39 } 40 .archer_item{ 41 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/arrow2.png") 42 } 43 .magician_item{ 44 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/magic2.png") 45 } 46 .gunner_item{ 47 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/gun2.png") 48 } 49 .healing_item{ 50 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/healing2.png") 51 } 52 .checkbox_item { 53 width:52; 54 height: 50px; 55 text-align: center; 56 display: block; 57 float: left; 58 text-align: center; 59 transition: all 0.2s ease; 60 background-size: 50px; 61 background-repeat: no-repeat; 62 background-position: 50% 50%; 63 64 } 65 66 67.checkbox_item:hover { 68opacity: 0.75; 69} 70 71/*表示する中身のスタイル*/ 72.UNIT { 73display: none; 74padding: 40px 40px 0; 75clear: both; 76overflow: hidden; 77} 78 79 80/*選択されている条件に当てはまるキャラのみを表示*/ 81#MAN:checked ~ .man, 82#WOMAN:checked ~ .woman, 83#UNKNOWN:checked ~ .unknown, 84#FIRE:checked ~.fire, 85#WATER:checked ~.water, 86#WIND:checked ~ .wind, 87#LIGHHT:checked~ .light, 88#DARK:checked ~ .dark, 89#SLASH:checked ~ .slash, 90#ASSAULT:checked ~ .assault, 91#BLOW:checked ~ .blow, 92#ARCHER:checked ~ .archer, 93#MAGICIAN:checked ~ .magician, 94#GUNNER:checked ~ .gunner, 95#HEALING:checked ~ .healing 96{ 97 display: block !important; 98} 99/*選択されているcheckboxのスタイルを変える*/ 100 .Search #FIRE:checked + .fire_item { 101 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/fire.png"); 102 } 103 .Search #WATER:checked + .water_item{ 104 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/water.png"); 105 } 106 .Search #WIND:checked + .wind_item{ 107 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/wind.png"); 108 } 109 .Search #LIGHT:checked + .light_item{ 110 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/light.png"); 111 } 112 .Search #DARK:checked + .dark_item{ 113 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/dark.png"); 114 } 115 .Search #SLASH:checked + .slash_item{ 116 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/slash.png"); 117 } 118 .Search #ASSAULT:checked + .assault_item{ 119 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/assault.png"); 120 } 121 .Search #BLOW:checked + .blow_item{ 122 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/09/blow.png"); 123 } 124 .Search .N-INPUT:checked + .nomal_item{ 125 background-image: url("https://kuku-fantasy.net/megihazi/wp-content/uploads/sites/2/2018/10/BASS.png"); 126 } 127 128 .text-m{ 129 position: relative; 130 top: 30px; 131 left: -1px; 132 font-size: 12.5px; 133 font-weight: bold; 134 color: rgb(42,25,15 ); 135 text-shadow: 136 #f7f4ee 2px 0px, #f7f4ee -2px 0px, 137 #f7f4ee 0px -2px, #f7f4ee 0px 2px, 138 #f7f4ee 2px 2px , #f7f4ee -2px 2px, 139 #f7f4ee 2px -2px, #f7f4ee -2px -2px, 140 #f7f4ee 1px 2px, #f7f4ee -1px 2px, 141 #f7f4ee 1px -2px, #f7f4ee -1px -2px, 142 #f7f4ee 2px 1px, #f7f4ee -2px 1px, 143 #f7f4ee 2px -1px, #f7f4ee -2px -1px; 144 } 145
画像ファイル、リンク等は実際のものを使用しています。
予想していた動作は、
1.FIREのidを持つ<input>がチェックされた
2.class、fireを持つ<div>内の要素のdisplay:noneをdisplay:blockにし表示する
といったものですが、checkboxにチェックが入っても何も起きません。
回答2件
あなたの回答
tips
プレビュー