開発ブログ

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

前置き

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

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

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

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


コードを書く前に

ファイルの読み込み確認

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

htmlを考える

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

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

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


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

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


確認したこと

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

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


解決

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


JSが読み込めない?

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

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

確認したこと

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


解決

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

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


素のJavaScriptが難しい

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

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

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


解決

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

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


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

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

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

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


hoverでborder

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

liに指定❓
aに指定❓

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

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


解決

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

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

ホバーした時に
width100%にすればOK⭕️


まとめ

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

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

-開発ブログ
-,

© 2021 aLiz Nuxt