昨日の夜中、一応提出しました~。
3日以内に提出だったんだけど、1日目ハンバーガーメニューが表示されないとか背景が設定できないとかありまして、丸一日つぶしてしまった感じ。。。
初心者さん、初学者さんは多分同じ状態になる人いると思います。
でもね、原因はとてもとても単純なミスのことが多いです。
だって、私がそうだもん(笑)
手順通りにやって反映されないってことは、どこかにミスがかくれていることがおおいです。
私の昨日のミス
・ハンバーガーメニューが表示されない
→ハンバーガーメニューの子要素の色指定をしっかりしましょう。
私はcolor:blackで指定してしまいました。
正解はbackground-color:blackでっす
イメージは要素は枠線。
色は中の塗りつぶしだから背景色じゃないといけない。
て感じですかね
.hamburger span{
display: block;
position:absolute;
width:30px;
height:2px;
left:6px;
transition:0.4s ease-in-out;
color:black;
}
↑ このようにcolorで指定していたんですが
.hamburger span{
display: block;
position:absolute;
width:30px;
height:2px;
left:6px;
transition:0.4s ease-in-out;
background:black;
}
↑ これが正解です
・背景が設定できませんでした
→書いたコードが合っている場合、全体を見ましょう
私はコメントアウト/*〇〇*/の外に**をつけてしまっていました
/*aaaaaaaa*/****************
ではなく
/*bbbbbbbbb*****************/
ですよね。。。。
・ハンバーガーメニューが動かない
→コードを書く前の準備を忘れずしましょう
私はjQueryの読み込みをせずにjQueryが動かないって
騒いでました。
CDNかファイルを自作scriptの直前に入れましょう
え?こんなミスするの私だけ?^^;
あと、これからの課題も見つかりました。
いや、課題は山盛りなんですが、知らない(見えない)ことはその場になるまで課題にはならないと思いますが、今回、その場になって見えたところで引っかかったところがわかったんです。
・背景にimageとcolorの両方を設定できない
(若しくはimageの大きさ調整がうまく出来てない)
・スクロールするとアイコンが大きく表示される動作ができない
・今のところ、この2点かなあ?
背景画像を右側に、背景色を左側に半分ずつ表示させる方法。
しっかりググりたいと思います。
背景色だけとか背景画像だけを半々表示することはできるんですけどね。
どうするんだろ?