質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1195閲覧

htmlとcssだけで絞り込み機能を実現したい

Kohaku

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

2クリップ

投稿2018/10/06 06:46

編集2018/10/06 09:23

当方ゲームの攻略ページを製作中でありましてキャラの絞り込みを作ろうと思いましたが行き詰まったため質問させていただきます。また、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にチェックが入っても何も起きません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/10/06 09:15

「行き詰まった」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。
Kohaku

2018/10/06 09:23

記述しました。ありがとうございます
guest

回答2

0

クライアントサイドで全文検索を実現する方法 | IDEA*IDEA

js使いますがなかなかおもしろい方法です。

概要

  1. data-indexに検索対象の文字を予め入れておく(js使って自動で入れ込めば良いかな)
  2. :not() - CSSを使って絞り込む

投稿2018/10/06 07:20

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kohaku

2018/10/06 08:11 編集

回答有り難うございます。残念ながら前述の通りjsが使用できない環境なのです。wpサイト以外で使ってみます。
oikashinoa

2018/10/06 08:28

クライアントサイドのjavascript が使えないと言う意味でした? 今回の手法はクライアントサイドで行いますよ。 > jsが使用できない環境
Kohaku

2018/10/06 09:11

クライアントサイドです。さらに言えばわたし、jsはほんの少しかじった程度でよくわからないというのもあります。
oikashinoa

2018/10/06 09:21

言語は何が分かるんです? phpならサーバーサイドしか出来無いないので手段が限られます
Kohaku

2018/10/06 09:26

一応javaのクライアントは勉強していますがweb系はhtmlとcssのみです。
oikashinoa

2018/10/06 09:26

一度でも提示したurlと更にその先を見ました? jsは1、2行ですよ。
Kohaku

2018/10/06 09:47

試したところできました。ですが私の技量ではcheckboxにすることができませんので...
guest

0

ベストアンサー

HTML

1<!-- <div class="woman slash dark UNIT"> 2 ↓ ↓ 全角--> 3 <div class="woman slash dark UNIT"> 4```**動くサンプル:**[https://jsfiddle.net/sp7Lav5b/](https://jsfiddle.net/sp7Lav5b/)

投稿2018/10/06 09:42

編集2018/10/06 09:43
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/10/06 09:48

入れ方が少し面倒なところもありますが、記事内にJavaScriptを入れることも出来ますよ。 (他のページでも使うならテーマ側で読み込むのがお勧め) 【WordPressの記事内にJavaScriptを挿入する4つの方法 | Minory】 https://minory.org/wordpress-javascript.html
Kohaku

2018/10/06 09:48

確認したところ動きました。確認したはずなのですが全角を消してまた全角を入力してしまったのか...ありがとうございます。
Kohaku

2018/10/06 09:50

目標の動作とはまた違った動作をしていたのでまだ改善の余地がありそうです。がんばります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問