これを見てくれている皆さまは、コードを書いてサイト制作やったことありますか？
２月の上旬ごろにやった模写コーディングのデモサイトの修正をしました。今日は。
タブメニュー、ハンバーガーメニュー＆ドロワーメニュー、モーダルウィンドウ、スライダー、トップに戻るボタンとかするする動くアニメーションとか画面がにゅっとでてくるやつとか、基本的なもののいくつかを実装したけど、なかなかうまくいかなくて。
修正してるんだけど、うまく動かないぃぃぃぃ。
でも、基本的だろうけど、しばらくやらなければ忘れちゃいます。
他の皆さんはわかりませんが、少なくとも私は結構短いスパンで忘れます(笑)
だから、同じことでググって解決策を探したりします。
今回も、タブメニューとスライダーが隣り合ってる箇所がありました。
片方は写真のタブメニュー。もう片方はスライダー。
その写真の大きさがタブメニューとスライダーで違うんですね。
確か、スライダー（slick）とフレックスボックスだったかを合わせると写真の大きさが指定できないんだったか不具合がでるとありました。
あ、この不具合は最初に仕上げたときに確認したけど、放置してたんですね。
だから今はそんな不具合は解消されているかもしれないです。
で、なんで左がタブで右がスライダー？
コーポレートサイトだったら左右対称にしそうなものだけど、なんで？と不思議に思いつつ、スライダーをタブメニューに変更しよう！他の場所でスライダーは実装しよう！と修正開始～。
まあ、片方はタブメニューだから半分以上コピペですみます。
でも、動きを確認したらスライダーからタブに変更した写真が表示されない！
スペル間違いかなーとか、CSSで余計な指定してないかとか原因探しに確認したりググったり。
しばらくググって手当たり次第にヒットしたサイトとかブログとか読んでたんですが、
わかりました～！タブメニューは基本同じページに複数置かない。らしい。
複数置きたい時のjQueryの書き方はこうです！って紹介されてました。
↓ HTML ↓
<div class="tab-box">
<a class="tab_menu active">画像１</a>
<a class="tab_menu tab2">画像２</a>
<a class="tab_menu tab3">画像３</a>
<div class="tab_item show"><img src="images/building2.png"></div>
<div class="tab_item"><img src="images/building12.png"></div>
<div class="tab_item"><img src="images/building13.png"></div>
</div>
<div class="tab-box">
<a class="tab_menu active">画像１</a>
<a class="tab_menu tab2">画像２</a>
<a class="tab_menu tab3">画像３</a>
<div class="tab_item show"><img src="images/building1.png"></div>
<div class="tab_item"><img src="images/building12.png"></div>
<div class="tab_item"><img src="images/building13.png"></div>
</div>
↓ CSS ↓
.tab-box a{
cursor:pointer;
}
.tab_menu{
display:inline-block;
width:100px;
padding:5px;
font-size:18px;
text-align: center;
border-radius:10px 10px 0 0;
border:solid 1px tomato;
line-height: 20px;
}
.tab_item{
width:430px;
height: 280px;
display:none;
}
.tab_item.show{
display:block;
opacity:1;
}
↓ script ↓
$(function(){
$('.tab_menu').on('click',function(){
var tabBox=$(this).parents('.tab-box');
var tabMenu=tabBox.find('.tab_menu');
var tabItem=tabBox.find('.tab_item');
tabMenu.removeClass('active');
$(this).addClass('active');
var elmIndex=tabMenu.index(this);
tabItem.removeClass('show');
tabItem.eq(elmIndex).addClass('show');
});
});
こう書きました。（２１日追記）
この紹介されていたコード、見覚えがあったんです。はい。
わたし、このページ見たことある。
紹介されていたコードを見ながら手順を追ってたら思い出しました。
あの時はJavaScriptとかjQueryって名前しか知らなくて、HTML/CSSも今以上にわからない時期で。
最初に左右対称になるからタブメニュー二つ置いたら片方しか反応しなくて、複数置く場合のコードも理解できなかったから完コピは止めよう。ってスライダーに変更したんです。
私、過去の自分より理解できるようになってる～(#^.^#)
なんかめっちゃ照れくさいような安心したような気持ちいい気分でした＾＾
いい感じの余韻はありましたが、今は覚えることが他にも多いです。
まだ駆け出しにもなってないエンジニアの卵なので＾＾
簡単なバナーを作りたいので、Photoshopの本を購入しました。
動画見ましたが、基本的な操作を先に全部教えてもらっても覚えてないから、操作になったとたん意味が解らないんですよ(笑)
わかる人は解ると思います。もしかしたら大半がまず機能説明が先。と思うんでしょう。が、
手順①
手順②
手順③
ていう風に教えてくれないと私の狭い短期記憶のワーキングメモリーからこぼれていってしまうから操作さえ覚えられないという悲惨な状態になってしまう。。。((+_+))
なので、オリジナルバナーの作り方っていう動画（機能の説明はなかったような感じ）と本を使って覚えたいと思います。
明日からは授業形式でちょこちょこ３つか４つ並行して進めてみようと思います。
進みが遅くても後回しをしないようにね。
↓強い味方。amazon＾＾探してる本が必ずあるイメージ＾＾
