こんにちは！　ネクストページ2年目エンジニアの森田です。

私は日々、フロントエンドエンジニアとしてWeb制作をしているのですが、度々難しい仕様や、独特なデザインに遭遇します。
そんな時よく、ネットで参考になるサイトを調べてコードを引用したりします。

というわけで今回はWeb制作で私がよく使っている参考サイトを5サイトほどご紹介したいと思います。

フロントエンドの上級者には少し退屈な記事になってしまうと思うので、
初級〜中級者向けだと思ってみていただければと思います。

1.特定の要素以外をクリックした時のイベント [JavaScript]

https://hirakublog.com/outside-click-event-js/
このイベントのよう使う場面はモーダルを自作した時や、セレクトボックスを作成する時です。
「ボタンをクリックスして何かしらを開いた後、閉じるときに適当な余白を押したら開いたものが閉じる。」という動きが実装できます。
参考サイトに使用例とコードも載っています。
これを実装することでUIの向上にも繋がるので、他のJSとバッティングしないのなら実装することをお勧めします。

2.リストの最後の行だけ、スタイルを適用する方法 [css]

https://taneppa.net/list-style-css/
リストの最後の行だけスタイルを変えたいとかってよくあると思います。
ただ数に規則性がなかったりすると、調整が意外に面倒くさかったりします。
この参考サイトに載っているコードを引用すれば、問題なく実装できます。

3.cssセレクタ指定方法 [css]

https://cbashalog.c-brains.jp/12/03/06-235258.php
タイトルだけではピンと来なかったのですが、リンク先がPDFの時だけPDFアイコン出したいなって時ありますよね。
そういた時に使える参考サイトです。覚えれば見直すことはないですが、意外と使わなかったりするので、忘れがちになってしまいます。
リンクのパス次第でスタイルを切り替える時に便利です。

4.CSSの否定疑似クラス「:not()」[css]

https://coliss.com/articles/build-websites/operation/css/css-not-with-multiple-classes.html
あまり使わない気もしますがnotセレクタの使い方が載っている参考サイトです。
マルチクラスで設計していても例外的に同じクラスでもスタイルを変更しなければいけない時があります。そんな時にnotセレクタを使います。
常用するものは使っているうちに覚えるので、使い方の参考サイトって必要ないんですが、あまり使わないものは忘れてしまいがちなのでブックマークしておくことをお勧めします。

5.「UAParser.js」 [JavaScript]

https://liginc.co.jp/421738
ユーザーエージェントを実装したい時に、使用するライブラリです。
公式へのリンクも貼ってあるのでそれでもいい気がしますが、導入から説明しているので見やすいです。
またUAを識別するための文字列一覧も載っているので親切です。
最近ではマルチデバイス対応がもっぱらの話題ですから、スマホでスムーズに操作できるようにするのはマストになりつつあるのかもしれません。

私もまだまだ駆け出しの身ですが、こうして先人の知恵を吸収しながら少しずつ成長していければなと思っています。

やはり自分の力で完成させたいという人にはカンペを見るようで気が進まないかもしれませんが、たくさん調べることで、いずれは自分の力として胸を張れる時がくると思います。その時まで一緒に頑張りましょう。

それではまたどこかで。