【コーディング】できなかったことをやり直し☆

今日はもくもく会。（まとめられたらまとめたい。笑）

昨日はスクールの授業の日だったので、授業後に先生に質問して、サイト模写でうまくいかなかったところを色々と教えてもらいました。

目からウロコで、ググっても分からなかったことがどんどん腑に落ちて理解できるようになったので、直したところをnoteにまとめます。

前回模写したこちらのサイト

PAS-POL -旅のモノづくりブランド-｜TABIPPO

できなかったこと：
・メインビジュアルのアニメーション
・ナビゲーションにマウスオンしたときに出てくる下線がなめらかにフェードアウト＆イン
・メインビジュアルの下側を丸くすること
・スクロールを表す記号の文字の横幅だけを広くすること
・文字とルビまるごと「」で囲むこと
・PRODUCT、NEWS下の波線
・divの箱まるごとリンク範囲を広げること
・テキストオーバーしたら「・・・」
・箱と箱の境界線に設置されたトップページに戻るボタン
・トップページにスクロールしながら戻るボタン

この中から今回やり直し記事として
・ナビゲーションにマウスオンしたときに出てくる下線がなめらかにフェードアウト＆イン
・メインビジュアルの下側を丸くすること
・文字とルビまるごと「」で囲むこと
・divの箱まるごとリンク範囲を広げること

をまとめようと思います。

ナビゲーションマウスオン時になめらかに下線

前回はナビゲーションメニューにマウスオンしたら下線は出るけど、なめらかに出現せずにカクカクに出現するという困ったことが起こりました。

どんなCSSを書いていたかというと

クラス名 a {
　　padding-bottom: 10px;
　　transition: 0.3s;
}

クラス名 a:hover {
　　border-bottom: 2px solid #fff ;
}

的な感じ。（消しちゃったので詳細不明、、）

hoverしたらボーダーが出るように指示したつもりでしたが、これではカクカク出てくるのです。

この問題を解決したのが擬似要素【after】でした。

改善したコードはこちら

.クラス名 a::after {
position: absolute;
content: "";
display: block;
margin: 10px auto;
border-bottom: 2px solid #fff ;
width: 100%;
opacity: 0;
transition: 0.3s;
}

.クラス名 a:hover::after {
opacity: 1;
margin: 10px auto;
}

positionを使うことで、テキストが動かないように固定。

opacityで、hoverする前は疑似要素で作った線が見えないように0に指定。（透明に表示）hoverしたらopacity:1;で見えるように。

今回は動かず定位置でフェードイン・アウトするようにしたいので、hover前後で同じmarginを指定。

（完成形を動画であげたいけど、noteには動画が貼れませんでした；）

メインビジュアルの下側を丸くする

これはプロパティがわかればわりとすぐにできました(^o^)

クラス名 {
background: url(../image/画像.jpg);　/*本当はアニメーションだけど今は画像*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
}

borderプロパティはtop right bottom leftの組み合わせで場所が指定できて、さらに値に【数字(半角スペース)数字】を指定することで水平半径・垂直半径も指定できます。
これも利用して、いい具合の丸みを表現しました。

ただし、問題発生。

左右にできた空欄に白色が出てきてる ；＿；

なぜ白色が出てきてしまったのかというと、borderで削りとったところからbodyの背景色が見えてしまっているとのことでした。

そういえば、bodyも存在してましたね・・・

これはheaderをdivで囲んで、divに背景色をつけてあげれば解決！！

headerをdivでくくっていいんだﾟ（´-`）.｡oO

headerは一番上でないといけないと思い込んでいました。divでくくってあげてもいいというのは新たな発見。

その他にもaタグやpタグにクラスをつけてもいい。（こんな小さいタグにクラスつけるのはご法度だと思い込んでいました）

質問するとググるだけでは見つからない新たな発見があり、とても有意義でした。ググることも大切だし、勉強になるけど、質問することも大事。

文字とルビまるごと「」でくくること

前回のコーディングはこちら

もはやこれでよくない？と思っちゃう（´-`）笑

でも、きっとルビも含めて一つの言葉なんでしょうね。もとのサイトになるべく忠実に再現したかったので、方法を質問しました。

いろんなやり方があるようでしたが、今回試したのは【「】にspanタグ・クラス名をつけて、positionで位置を底上げして調整する方法。

上にあがりました＾＾

position使いすぎは型崩れ起こしがちであまりよくないみたいですが、きれいに使いこなせるようにもっといろんな形に挑戦したいと思います。

divの箱丸ごとリンク領域を広げること

これも目からウロコでした・・・

<a href ="">
<div>中身〜
</div>
</a>

以上。

これも思い込みでaタグの中にはdivみたいな大きいもの（←私のdivのイメージ）を入れてはいけないと思っていました・・・

全部入れこんでしまえばよかったのですね。

仕組みがわかればかんたんでしたー♪

パッと見の見た目はそんなに変わらないけど、hoverしたときのアニメーションのなめらかさがきれいに表現できて嬉しい＾＾

でも、まだまだtransitionをうまく使いこなせてないようにも思うので、次のサイト模写にはアニメーションをいい感じに使ってるサイトを選ぼうかなぁ。

でも、コーディングばかりじゃなくてデザインもやらなきゃ。

せっかくサクサクうごくMacbookを購入したんだから！！

大きい容量のデザインもストレスフリーでできるようになったから、サイト模写をフォトショップとかでXDやってみようかなぁ。

XDも使えるようになりたい。

勉強、勉強〜〜〜