Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと

前置き

HTML/CSS/JavaScriptだけで
コードを書いてみたら
色々と困ったので備忘録です✍️

初心者の方は
どんなことで躓いて
どう対処すれば良いのか、
イメージするために🧸💭
ぜひ1度は目を通してみてください👀

今までNuxt.jsばかりやっていて、
CSSは後回しになっていました。
(たぶん普通の人は逆ですが笑)
そしてJSも簡単に書けるので、
素のJSを理解することもなかった…

ということで、
困った点や勉強になった点、
こうした方が良いな〜と思った点
等々を書いていきます🍀

コードを書く前に

ファイルの読み込み確認

まずは全てのファイルを作成し、
htmlに外部ファイルのcss, jsが
読み込みできているかをチェック👀

htmlを考える

まずは全体の構成を考えて、
HTMLをどう書いていくかを
決めておく必要があります🌟

あとから修正はとにかく面倒です❌
divで囲う必要があったわ…🤔
だからクラス名もずらさなきゃ…🤔
CSSも合わせなきゃ…🤔
全てがズレると本当に大変💦

頭の中だけで考えるのは苦手なので
ノートにざっくりと色分けしたり、
どこを1つにまとめるかなど
書いておくとスムーズ。

メディアクエリが突然効かなくなった

本格的にコードを書き始める前に
cssの読み込みチェック。
メディアクエリが適応できていたことを
確認していたにも関わらず、
なぜか途中から効かなくなり困惑💦

p {
	color: blue;
}
/* sp */
@media screen and (max-width: 480px) {
  p {
    color: pink!important;
  }

}

p {

color: blue;

}

/* sp */

@media screen and (max-width: 480px) {

p {

color: pink!important;

}

確認したこと

!importをつけても効かないし、
reset.cssを確認したけど
メディアクエリの記述はなし。
PCファーストの書き方も合っている。
min-widthとmax-widthを
併用すべきかと思いましたが、
共通にしたいところと分けるのが面倒だし、
なるべくmax-widthだけで指定したい…

セレクタは同一にしないとダメ、
というのも見つけましたが
同じにしていたので
今回は関係なさそう。
CSSのメディアクエリを誤解していた話

解決

色々ググってやっと見つけたのが
viewportの記述…！
これで適応されました🙌✨
cssでMedia Queries(@media)が効かないときに確認すること

JSが読み込めない？

JSでまずやろうとしたのが
buttonをクリックしたら
consoleを表示させるだけの
シンプルなもの。

しかしconsoleだけなら表示されるのに、
関数にした途端、
consoleが表示されなくなりました🌀
読み込めていないことはなさそうですが…

document.getElementById("header-hamburger").addEventListener("click", function() {
  console.log('hey')
})

document.getElementById("header-hamburger").addEventListener("click", function() {

console.log('hey')

})

確認したこと

idの指定
→コピペしたので間違えようがない
buttonのサイズ指定
→きちんとできている
外部ファイルではなくhtml内のscriptに移動
→エラーになったため次を実行
　Uncaught TypeError: Cannot read property 'addEventListener' of null at index.html:15
DOMContentLoadedを使用
→html, jsどちらでも試し、動作しない
Chrome設定を確認
→JavaScriptは有効になっている

解決

なんと要素が重なって
buttonをクリックできておらず、
z-indexを指定して解決❗️笑

やはり読み込めていた❗️❗️😂笑
まずはそもそもクリックできているか
確認するべきでした…
問題はなるべく小さく捉えないと。
勘の良い人、慣れた人は
すぐに思いつくことでしょう…👍

素のJavaScriptが難しい

やりたいことは
ハンバーガーメニューのボタンを押して
クラスを追加することで
メニューを表示させること。
同時にボタンを閉じるボタンに変更。

Nuxtだとクリックイベントとか
@click="methods名"で
超〜〜〜簡単じゃないですか…
それが素のJavaScriptだと
こんなに面倒だなんて…❗️笑

document.getElementById("header-hamburger").addEventListener("click", function() { // ここに処理 })

1	document.getElementById("header-hamburger").addEventListener("click", function() { // ここに処理 })

単純にクラスの追加…
classList.add()をやってみましたが、
これだと付与したクラスを外せない❗️
メニューが閉じれない…❗️笑

解決

toggleないのかな❓
と検索したら出てきたので
今回の中では割とすんなりいきました🍀

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("header-hamburger").addEventListener("click", function() {
    document.getElementById("header-hamburger").classList.toggle("toggle")
    document.getElementById("header-container").classList.toggle("nav-in")
  })
})

document.addEventListener('DOMContentLoaded', function() {

document.getElementById("header-hamburger").addEventListener("click", function() {

document.getElementById("header-hamburger").classList.toggle("toggle")

document.getElementById("header-container").classList.toggle("nav-in")

})

ちなみにidで要素を指定ではなく
classで指定する
getElementsByClassName()もあります。
ただこれにaddEventListenerは
通常できないようですね💡
配列にして…と
工夫すればできるみたいですが、
idが無難ですね🍀

デザインと違う？余白の指定

今回は参考デザインと
参考コードがあるものを
作成していました。

デザインと見た目は合っているのですが、
アイコンリンクの部分で
謎のpxが見受けられました👀

これは単純に、
クリックできる範囲を広げるためでした🌟
使いやすさも重要なポイントですね❣️

hoverでborder

ホバーした時に、
aタグ内のテキストの長さに合わせた
ボーダーを引きたい…

liに指定❓
aに指定❓

まぁテキストの長さを考えると
aだと分かるのですが、
本当にそうだったっけ…
とかclassどうするんだっけ…
と結構忘れがちです🌀

<nav id="nav">
    <ul class="nav-lists">
      <li class="nav-list"><a class="nav-link" href="/">TOP</a></li>
      <li class="nav-list"><a class="nav-link" href="/">ABOUT</a></li>
      <li class="nav-list"><a class="nav-link" href="/">NEWS</a></li>
    </ul>
</nav>

<li class="nav-list"><a class="nav-link" href="/">ABOUT</a></li>

</ul>

</nav>

⬇️こちらを参考にしました！
【CSS】hover時に左から右に下線を引くアニメーションの作り方

解決

aタグを基準にしたいので
position: relative;

そして擬似要素::afterで
ボーダのwidthを0にした状態で
他の情報を記載

ホバーした時に
widthを100%にすればOK⭕️

.nav-link {
	position: relative;
}

.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 0;
	height: 2px;
	background: var(--color-stroke-default);
	z-index: 1;
	transition: all 0.4s;
}
.nav-link:hover:after {
	width: 100%;
}

.nav-link {

position: relative;

}

.nav-link::after {

content: '';

position: absolute;

left: 0;

bottom: -10px;

width: 0;

height: 2px;

background: var(--color-stroke-default);

z-index: 1;

transition: all 0.4s;

}

.nav-link:hover:after {

width: 100%;

}

まとめ

改めてNuxtの便利さが分かりました。
でも素のJSが本当はどんな物か、
これを知ることで
ググった時にNuxtやVueのコードではなくとも、
読み解く力もアップしますし損はないですね💫☝️

それからCSSの重要さ。
Firebaseなどをメインにやっていましたが、
結局は見た目が整ってないと
データ処理なども活きてこない。。。
1番難しいのはCSS❗️
と言ってる人もいるくらいですしね…🤔💭
CSS、強化します🔥✊