【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
1 |
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 |
.tab_menu .wrap_menu { border-bottom: 2px solid #0b367f; position: relative; padding: 25px; } .tab_menu .wrap_menu .tab { position: absolute; right: 5%; /* タブの位置を固定 */ bottom: -2.0px; background: #fff; color: #0b367f; border-left: 2px solid #0b367f; border-right: 2px solid #0b367f; border-top: 2px solid #0b367f; border-bottom: 2px solid #0b367f; border-top-left-radius: 10px; border-top-right-radius: 10px; width: 43%; font-size: 20px; font-weight: 600; position: absolute; text-align: center; padding: 15px 0 10px; cursor: pointer; } .tab_menu .wrap_menu .tab.t01 { left: 5%; /* MENU01側のタブは左に固定 */ } .tab_menu .wrap_menu .tab.display { border-bottom: 0; /* 選択されているタブの場合、border-bottomを消す */ } .tab_menu .wrap_menu .tab p { margin-bottom: 0; } .content_tab { color: #0b367f; padding: 50px 20px; font-size: 18px; display: none; } .content_tab.display { display: block; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function(){ $('.tab').click(function(){ var tab_name = $(this).data('tab'); //.tabのdata-tabの内容を取得 if(tab_name == 't01') { //data-tabの値によって、displayクラスを切り替えて表示する内容を変更する $(this).addClass('display'); $('.t02').removeClass('display'); $('#t01').addClass('display'); $('#t02').removeClass('display'); } else { $(this).addClass('display'); $('.t01').removeClass('display'); $('#t02').addClass('display'); $('#t01').removeClass('display'); } }); }); |
Miki Kohinata
大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
PICK UP