現在の仕事・課題
・働いているレストランのLP制作
→デイトラが終わったので、再開。
・クラウドワークス 、ランサーズにて仕事探し
→現在のところ、まだ1つも見つかっていません。提案数を増やさないと厳しい。
先日、ようやくデイトラ2ndの最終課題が終了しました。日数は、2ヶ月半ほど、時間は43時間かかってしまいました。
フルタイムで働きながらとなると、なかなか難しかったです。言い訳ですね。
ただ、毎日10時間これに取り組めたとして、4、5日で終わるかというと、まだ厳しいかなと思います。もっと勉強が必要ですね。
一応、レスポンシブも含めてほぼ作り上げることができましたが、結局43時間かかってしまいました。1日12時間やる計算でいけば4日で終わるので、まあ良しとしましょう。
ただ、スライダーの挙動がおかしいので、そこの修正は後でしようと思います。
やってみた感想としては、なかなか難しかったですが、新しいことを多く学べたのでよかった、という感じです。途中、このまま終わらないんじゃないかなと思ったこともありましたが、なんとか終えることができました。
今回は、その最終課題の中で僕が行き詰まった主なところを紹介したいと思います。ただ、対処法が合っているかどうかは分からないので、参考程度に見ていただければと思います。
もし、この方法は良くないからこうした方がいい、ということを教えてくれる人がいれば、ものすごくありがたいです。
ナビバーホバー時の下線
問題点：
メニューホバー時に下線が表示される処理を入れたところ、ホバーするたびにメニュー全体ががたつくようになってしまいました。
対処法：
原因はホバーしたのメニューにのみ下線を入れるようにしたことで、そのメニューだけが1ピクセル分上がってしまうようになったことでした。
そこで各メニューの下に常に透明の下線を入れるようにしたところ、ガタつかなくなりました。
ホバー時一定領域内の色を変える処理
問題点：
ホバー時にニュースの一行全体に色が当たらない。
対処法：
ホバー時の色を当てる処理用に、ニュース一行を囲むdivをもう一つ作ることで対応しました。
swiperの挙動
問題点1：
swiper-slideは5個しか設定していないはずが、デベロッパーツールで確認すると、7個になっている。
対処法：
調べた結果、loop:true;が悪さをする場合がある、というのを見つけたので、消してみたところうまく行きました。ただ、ループさせたい時にどうするのかなど細かいところまで調べきれていないので、また勉強し直そうと思います。
問題点2：
swiper-paginationのbulletsがアクティブ状態の時に、まるで囲むというのがなかなか再現できない。
対処法：
下記のようにbox-shadowをカンマ区切りで書くようにすると、二重円が作れることがわかりました。
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
↓下記サイトを参考にしました。
擬似要素と擬似クラスの併用
問題点：
ラジオボタンの選択する部分を擬似要素で作ったため、擬似クラスである:hoverをつけても動作しない。
対処法：
擬似要素を擬似クラスの中に再度書くとうまく動作するようになった。
↓下記サイトを参考にしました。
z-indexが効かない
問題点：
ドロワーのオーバーレイが画面全体にかかってしまって、ハンバーガーメニュー展開時でも画面全体が暗くなってしまう。
対処法：
調べた結果、要素同士のz-indexだけみて単純に上に持ってきたい要素のz-indexの値を大きくしてもダメで、親要素や階層構造を意識して要素同士の重なりを考える必要があることがわかりました。
方法としては、ハンバーガーメニュー展開時のオーバーレイのwidthを狭めることで対処しました。（←逃げですね（笑）次回からはhtmlを書く段階で要素同士の重なりについて意識しながら作るようにしようと思います。）
↓z-indexの使い方については下記サイトを参考にしました。
【CSS】 重なり順を指定するz-indexの使い方！効かないときの対処法と注意点も
最後に
今回挙げた5点は自分の中で特に勉強になった点です。もちろんその他にもつまづいたところはたくさんありますが、その多くは結果的に大したことのないものだったりしました。
今回わかったことは、デザインができているサイトであれば、自分でも作れるようになっている、ということです。
まだまだhtmlやcssの書き方は勉強が必要なことは間違い無いのですが、半年前はほとんど分からなかったことと比べると間違いなく成長しているということが実感できました。
30daysトライアルのおかげで成長できたことは間違いないです。感謝しかありません。
最近は30daysトライアル3rdなるものが始まっているようなので、それもチャレンジしていこうかなと思っています。
以上！
