こんにちは!
今回ウェブ制作を行うにあたって複雑な選択チャートみたいなものを作成する必要がありました。
本来は図でSVGなどでお越しもよかったのですが、スマホでの見え方を考えるとどうなんだとうか…というところもありこのブログに記載してあるJSを使用したということです。
本来簡単なチャートや図などはこれだけcssが発達しているのでcssで作成してしまうのですが、今回はスタートから選択肢が複数あって、さらに一つの選択肢から複数に分岐するという内容だったのでなかなかcssでは対処できませんでした。仮にできたとしても、選択肢が一つ増えたらメンテがめちゃくちゃ大変なことになる!というのが今回作成にあたった背景です。
ではさっそくサンプルから!
See the Pen 心理テストチャート by sayuri (@giraffeweb) on CodePen.0
コードをそれぞれ分離すると以下のような形になってます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="choose_box"> <div id="q_01" class="fit"> <p>質問1</p> <ul class="flexbox fw"> <li class="even"><a class="btn" href="#q_02">選択肢1</a></li> <li class="odd"><a class="btn" href="#q_03">選択肢2</a></li> <li class="odd"><a class="btn" href="#q_04">選択肢3</a></li> <li class="odd"><a class="btn" href="#q_05">選択肢4</a></li> </ul> </div> <!-- 最初の選択肢 --> <div id="q_02" style="display: none;"> <p>質問2?</p> <ul class="flexbox fw"> <li class="even"><a class="btn" href="#q_06">選択肢1-1</a></li> <li class="odd"><a class="btn" href="#q_07">選択肢1-2</a></li> </ul> </div> <!-- 次の選択肢 --> <div id="q_03" style="display: none;"> <p>質問2?</p> <ul class="flexbox fw"> <li class="even"><a class="btn" href="#q_06">選択肢2-1</a></li> <li class="odd"><a class="btn" href="#q_07">選択肢2-2</a></li> </ul> </div> <!-- 次の選択肢 --> <div id="q_04" style="display: none;"> <p>質問2?</p> <ul class="flexbox fw"> <li class="even"><a class="btn" href="#q_06">選択肢3-1</a></li> <li class="odd"><a class="btn" href="#q_07">選択肢3-2</a></li> </ul> </div> <!-- 次の選択肢 --> <div id="q_05" style="display: none;"> <p>質問2?</p> <ul class="flexbox fw"> <li class="even"><a class="btn" href="#q_06">選択肢4-1</a></li> <li class="odd"><a class="btn" href="#q_07">選択肢4-2</a></li> </ul> </div> <!-- 次の選択肢 --> <div id="q_06" style="display: none;"> <p>あなたにおすすめなのは…</p> <h4>『答え①』です!!</h4> <span><a class="btn" href="#q_01">もどる</a></span> </div> <!-- 選択肢の答え① --> <div id="q_07" style="display: none;"> <p>あなたにおすすめなのは…</p> <h4>『答え②』です!!</h4> <span><a class="btn" href="#q_01">もどる</a></span> </div> <!-- 選択肢の答え② --> </div>
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif; } .choose_box { position: relative; height: 50vw; width: 100%; } .choose_box p { font-size: 24px; display: block; font-weight: 600; text-align: center; } .choose_box ul { width: 80%; text-align: center; margin: auto; display:flex; flex-wrap: wrap; } .choose_box ul li { width: calc(100% / 2 - 20px); margin-right: 20px; margin-bottom: 20px; list-style: none; } .choose_box ul li:nth-child(2n) { margin-right: 0; } .choose_box ul li a { color: #fff; display: block; padding: 20px 60px; text-align: center; background-color: #2791d4; font-weight: 600; font-size: 18px; border: 2px solid #2791d4; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .choose_box ul li a:hover { background-color: #fff; color: #2791d4; -webkit-transition: 0.7s; -moz-transition: 0.7s; -o-transition: 0.7s; transition: 0.7s; } h4 { width: 50%; clear: both; margin: auto; padding: 20px; text-align: center; font-size: 24px; font-weight: 600; color: #fff; text-align: center; background-color: #C00003; } .fit { position: absolute; left: 0px; top: 20px; width: 100%; } #q_06 span,#q_07 span { display: block; width:100%; } #q_06 a,#q_07 a { display: block; width:100%; text-align: center; }
$(function () { $(".btn").on("click", function () { $(this).closest("div").css("display", "none"); id = $(this).attr("href"); $(id).addClass("fit").show("slow"); }); });
cssはもちろん好きにカスタマイズしていただいて構いません。
選択肢も自由に増やせるのですごくいいと思います♪
ぜひみなさんも使ってみてください(*’ω’*)
ご返答できておらず申し訳ございません。
コメントいただきありがとうございます。
無事解決されたようで安心いたしました。
来週中にコメントは削除させていただきます~!
わざわざ返信までいただいて、ありがとうございます。
こちらこそ、ご面倒をおかけして申し訳ありませんでした。
こちらの記事もそうですが、他のサイトに載ってないような興味深い事を書いてくださっていて
とても勉強になります。
シンプルで素敵なサイトですね。
コメント失礼します。
ウェブデザインについて勉強中の者です。
選択ボタンを押して次のページが表示される際、左からアニメーションで表示される設計ですが、
どのようにされていますでしょうか?
また、このアニメーションを無効にする際、どのように制御すれば無効になりますでしょうか。
どのような仕組みで、動いているのか気になり質問させていただきました。
以上、よろしくお願いします。