最新コラム
-
-
-
-
-
Webサイト制作Web開発
【shopify】テーマをカスタマイズするためのLiquidの書き方
-
Webサイト制作Webデザイン
Webデザインの初心者必見!Webデザインの勉強方法を徹底解説
目次
ポップアップウィンドウについては以下の記事で解説しております。
・html
<div class="cp_qa"> <div class="cp_actab"> <input id="cp_tabfour031" type="checkbox" name="tabs"> <label for="cp_tabfour031">メタバリアEXは、どんな人に向かないものなのでしょう?</label> <div class="cp_actab-content"> メタバリアEXは30日分で4,935円と中々の高価です。そのため安く済ませたいという方には向いていないです。また糖質の吸収を抑えるものでありますので、脂質やカロリーを気にしている方には向いていないです。体質は特に気にしなくても問題ないです。 <div> </div>
・css
/*以下Q&amp;Aの処理*/ .cp_qa *, .cp_qa *:after, .cp_qa *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_qa .cp_actab { position: relative; overflow: hidden; width: 100%; margin: 0 0 1em 0; color: #1b2538; } .cp_qa .cp_actab input { position: absolute; opacity: 0; } /* 質問 */ .cp_qa .cp_actab label { font-weight: bold; line-height: 1.6em; position: relative; display: block; margin: 0 0 0 0; padding: 1em 2em 1em 2.5em; cursor: pointer; text-indent: 1em; border-radius: 0.5em; background: rgba(27,37,56,0.1); } .cp_qa .cp_actab label::before { font-family: serif; font-size: 1.5em; margin-left: -2em; padding-right: 0.5em; content: 'Q'; } .cp_qa .cp_actab label:hover { transition: all 0.3s; color: #00838f; } /* --質問の+アイコン */ .cp_qa .cp_actab label::after { font-size: 1.7em; font-weight: bold; line-height: 2em; position: absolute; top: 0; right: 0; content: '+'; display: inline-block; width: 2em; height: 2em; -webkit-transition: transform 0.4s; transition: transform 0.4s; } /* 答え */ .cp_qa .cp_actab .cp_actab-content { position: relative; overflow: hidden; max-height: 0; padding: 0 0 0 2.5em; -webkit-transition: max-height 0.2s; transition: max-height 0.2s; border-radius: 0 0 0.5em 0.5em; } .cp_qa .cp_actab .cp_actab-content::before { font-family: serif; font-size: 1.5em; position: absolute; margin: 0.4em 0 0 -1em; padding: 0; content: 'A'; } .cp_qa .cp_actab .cp_actab-content p { margin: 1em 1em 1em 0; } /* 質問を開いた時の仕様 */ /* --答えの高さ */ .cp_qa .cp_actab input:checked ~ .cp_actab-content { max-height: 40em; border: 10px solid rgba(27,37,56,0.1); } /* 質問をクリックした時のアイコンの動き */ .cp_qa .cp_actab input:checked ~ label { color: #00838f; border-radius: 0.5em 0.5em 0 0; } /* 質問をクリックした時の+の動き */ .cp_qa .cp_actab input[type=checkbox]:checked + label::after { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
また、見出しやタイトルを目立たせたいあまり、不快感を与えるような言葉を使用してはいけません。ユーザーが友人と共有したり情報源として引用したくなったりするようなコンテンツになるように意識しましょう。ただ、文字数だけ増やしても、ユーザーが求めていないコンテンツになる可能性があるので、ユーザーが求めている情報を適切に書かれているかチェックしましょう。
・jQueryの読み込み
<head> <link rel="stylesheet" href="modaal.min.css"> <script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="modaal.min.js"></script> </head>
・html
<!-- モーダルヘの遷移部分 --> <div id="header"> <ul> <li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</a></li> </ul> <div> <!-- モーダル部分 --> <div id="myModal5" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</div> </div> <div class="modal-body"> <p> モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。イメージとしてはポップアップに近いですが、ポップアップウィンドウはポップアップしている最中でも 他のウィンドウを開くことが出来ますが、モーダルウィンドウは何らかの操作が完了するまで他の画面に遷移することが出来ません。なおモーダルとは、モードを持つという意味であり、 モーダルウィンドウになっているとき、システム上はユーザーの応答待ちの状態になっています。 </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- モーダル部分 -->
・css
.mymodal5 { position:absolute; width:100%; height:100vh; top:0; left:0; display:none; } /* オーバーレイのスタイル */ .overLay { position:absolute; top:0; left:0; background:rgba(200,200,200,0.9); width:100%; height:100vh; z-index:10; } /* モーダルウィンドウの中身のスタイル */ .mymodal5 .inner { position:absolute; z-index:11; top:50%; left:50%; transform:translate(-50%,-50%); @keyframes modal{ 0% {top:-100%} 100% {top:50%} } @keyframes modalClose { 0% {top:50%} 100% {top:100%} }
・js(jQuery)
$(function(){ // モーダルウィンドウが開くときの処理 $(".modalOpen").click(function(){ var navClass = $(this).attr("class"), href = $(this).attr("href"); $(href).fadeIn(); $(this).addClass("open"); return false; }); // モーダルウィンドウが閉じるときの処理 $(".modalClose").click(function(){ $(this).parents(".modal").fadeOut(); $(".modalOpen").removeClass("open"); return false; }); });
<!-- モーダルヘの遷移部分 --> <div id="header"> <ul> <li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</a></li> <li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウのメリットとどんな時に使う?</a></li> </ul> <div> <!-- モーダル部分(1つ目) --> <div id="myModal5" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</div> </div> <div class="modal-body"> <p> モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。イメージとしてはポップアップに近いですが、ポップアップウィンドウはポップアップしている最中でも 他のウィンドウを開くことが出来ますが、モーダルウィンドウは何らかの操作が完了するまで他の画面に遷移することが出来ません。なおモーダルとは、モードを持つという意味であり、 モーダルウィンドウになっているとき、システム上はユーザーの応答待ちの状態になっています。 </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- モーダル部分(1つ目) --> <!-- モーダル部分(2つ目) --> <div id="myModal6" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウのメリットとどんな時に使う?</div> </div> <div class="modal-body"> <p> モーダルウィンドウは、メインコンテンツの場所をとることなくメッセージや機能を入れることができます。 </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
・js(jQuery)
$(function(){ $('.js-modal-open').each(function(){ $(this).on('click',function(){ var target = $(this).data('target'); var modal = document.getElementById(target); $(modal).fadeIn(); return false; }); }); $('.js-modal-close').on('click',function(){ $('.js-modal').fadeOut(); return false; }); });