備忘録~CSS,HTML,JQuery~
ランディングページ用テーマを使用してWordpress上にランディングページを作成しました。
↓↓↓テーマはこちらを使用させていただきました！！！↓↓↓
LPテンプレートクリエイティブパック Colorful
http://lptemp.com/
固定ページの編集時に、同時にHeadやBodyのプログラム（CSSやScriptなど）の編集も出来るフォームがあるので、
超超初心者のわたしにはとってもありがたかったです！！
以下、今回の作業で覚えたものの備忘録です。
●画面を複数段に分割
上記のような画面の構成にしたかったため、HTMLとCSSを以下のように設定しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="my_left">/*①*/ </div> <div id="my_left2">/*②*/ </div> <div id="my_body">/*③*/ <div id="header">/*⑥*/ </div> <div id="header2">/*⑦*/ </div> <div id="left">/*⑧*/ </div> <div id="middle">/*⑨*/ </div> <div id="right">/*⑩*/ </div> </div> <div id="my_right2">/*④*/ </div> <div id="my_right">/*⑤*/ </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<style type="text/css"> #my_left{ width : 4%; float: left; } #my_left2{ width : 1%; float: left; } #my_right{ width : 4%; float: left; } #my_right2{ width : 1%; float: left; } #my_body { width : 90%; float: left; } #header { width : 100% ; float: left; background-color: transparent; } #header2 { width : 100% ; float: left; background-color: transparent; } #left { width: 22%; float: left; padding: 0px 0px 0px 8px; background-color: transparent; } #middle { width: 50%; float: left; padding: 0px 0px 0px 16px; background-color: transparent; } #right { width: 22%; float: left; padding: 0px 0px 0px 16px; background-color: transparent; } </style> |
●JQueryとCSSでタブ切り替え機能
上記の分割画面の⑦⑧⑩に画像を用意し、その画像クリックで記事を⑨部分に表示するという構成にしたかった。
方法としては、
・CSSのみで実装する方法
・CSSとjQueryを使用して実装する方法
があることが分かった。
JQueryを使用したことがなかったので、いい機会なので今回は「CSSとjQueryを使用して実装する方法」で作成してみた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<div id="my_left">/*①*/ </div> <div id="my_left2">/*②*/ </div> <div id="my_body">/*③*/ <div id="header">/*⑥*/ </div> <div id="demo3"> <div id="header2">/*⑦*/ <div class="tab_area clearfix"> <ul style="list-style: none; margin: 0px;"> <li class="none" style="margin: 0px; float: left;"><img src="画像7-1.png" alt="ボタン7-1" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="even" style="margin: 0px; float: left;"><img src="画像7-2.png" alt="ボタン7-2" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="odd" style="margin: 0px; float: left;"><img src="画像7-3.png" alt="ボタン7-3" /> <p style="line-height: 25%;"><strong> </strong></p> </li> </ul> </div> </div> <div id="left">/*⑧*/ <div class="tab_area clearfix"> <ul style="list-style: none; margin: 0px;"> <li class="even" style="margin: 0px; float: left;"><img src="画像8-1.png" alt="ボタン8-1" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="odd" style="margin: 0px; float: left;"><img src="画像8-2.png" alt="ボタン8-2" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="even" style="margin: 0px; float: left;"><img src="画像8-3.png" alt="ボタン8-3" /> <p style="line-height: 25%;"><strong> </strong></p> </li> </ul> </div> </div> <div id="middle">/*⑨*/ <div class="content_area"> <div class="content_area_inner clearfix"> <div id="contents3_0" class="content_block_3" style="text-align: center;"> 初期表示の記事 </div> <div id="contents3_1" class="content_block_3" style="text-align: center; display: none;"> ボタン7-1の記事 </div> <div id="contents3_2" class="content_block_3" style="text-align: center; display: none;"> ボタン7-2の記事 </div> <div id="contents3_3" class="content_block_3" style="text-align: center; display: none;"> ボタン7-3の記事 </div> <div id="contents3_4" class="content_block_3" style="text-align: center; display: none;"> ボタン8-1の記事 </div> <div id="contents3_5" class="content_block_3" style="text-align: center; display: none;"> ボタン8-2の記事 </div> <div id="contents3_6" class="content_block_3" style="text-align: center; display: none;"> ボタン8-3の記事 </div> <div id="contents3_7" class="content_block_3" style="text-align: center; display: none;"> ボタン10-1の記事 </div> <div id="contents3_8" class="content_block_3" style="text-align: center; display: none;"> ボタン10-2の記事 </div> <div id="contents3_9" class="content_block_3" style="text-align: center; display: none;"> ボタン10-3の記事 </div> </div> </div> </div> <div id="right">/*⑩*/ <div class="tab_area clearfix"> <ul style="list-style: none; margin: 0px;"> <li class="odd" style="margin: 0px; float: left;"><img src="画像10-1.png" alt="ボタン10-1" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="even" style="margin: 0px; float: left;"><img src="画像10-2.png" alt="ボタン10-2" /> <p style="line-height: 25%;"><strong> </strong></p> </li> <li class="odd" style="margin: 0px; float: left;"><img src="画像10-3.png" alt="ボタン10-3" /> <p style="line-height: 25%;"><strong> </strong></p> </li> </ul> </div> </div> </div> </div> <div id="my_right2">/*④*/ </div> <div id="my_right">/*⑤*/ </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style type="text/css"> #demo3 .tab_area ul li{ } #demo3 .tab_area ul li:hover { background:#ffffff; color:#999999; cursor:pointer; filter: alpha(opacity=60); /* ie lt 8 */ -ms-filter: "alpha(opacity=60)"; /* ie 8 */ -moz-opacity:0.6; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.6; /* Safari 1.x */ opacity:0.6; zoom:1; } #demo3 .content_area { } #demo3 .content_area .content_block { } .content_block_3 { } #contents3_0, #contents3_1, #contents3_2, #contents3_3,#contents3_4, #contents3_5, #contents3_6, #contents3_7, #contents3_8,#contents3_9 { background:transparent; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(function() { //タブクリック時の処理 $('#demo3 .tab_area ul li').click(function() { //.index()を使いクリックされたタブの順番を変数indexに代入する var index = $('#demo3 .tab_area ul li').index(this); //指定した全コンテンツを非表示にする $('.content_block_3').css('display','none'); //クリックされたタブと同じ順番のコンテンツのみを表示させる $('.content_block_3').eq(index).css('display','block'); //top部分に戻る $("html,body").animate({scrollTop:$('#top').offset().top}); }); }); </script> |
↓↓↓こちらを参考にさせていただきました！！↓↓↓
CSS・jQueryを使って簡単にできる！3つの「タブ切り替え」実装方法
http://migo-media.com/tab-coding/
