【Webサイト制作】地味に役立つサイト集【ないと困る】

こんにちは、フロントエンドエンジニアの関根です。
HTML+CSS+JS(たまにPHP/WP)を用いたWebサイト制作を担当しております。

今回は、私がWebサイト制作時によく使っているサイト集についてご紹介したいと思います。
「このサイトではこんなすごいことができるよ！」的な派手なものではなく、むしろ土台というか基礎というか、「これがなかったら私はどうすればいいんだろう……」というくらい生命線または心の支えにしているサイト集です。こういうの知りたいのにあんまり見かけないんですよね！ もっと皆書いてほしい！ よろしくお願いします！

コード関連

・mdn web docs

https://developer.mozilla.org/ja/docs/Web
安心安全Mozilla製のWeb制作向けドキュメント集です。
HTML、CSS、JavaScript、この辺の要素の仕様を調べるのに使っています。
Webアクセシビリティなど、制作者向けチュートリアルも備えているため、基礎を学ぶのにも活用できます。

・Can I use

https://caniuse.com/
使いたいHTMLやCSSの要素がどの主要ブラウザで対応しているか一目でわかるサイト。
mdn web docsでも調べられるのですが、対応ブラウザを調べるだけならこちらで事足ります。
詳しく仕様を見たいときにすぐmdnに飛べるのも良いです。

計算苦手勢の救世主

・2進数、8進数、10進数、16進数相互変換ツール

https://hogehoge.tk/tool/number.html
主に10進数と16進数の変換に使ってます。CSSのカラーコード周りでよく使います。

・比率計算機

https://tools.m-bsys.com/calculators/ratio.php
レスポンシブ周りもそうだし画像の縦横比計算など何かと使います。
デバイスごとの大きさ割り出しなんかでも使ったような。

・Metallic Ratio

https://voidism.net/metallicratio/
デザインするときに比率計算機と合わせて使います。
デザインルールを決めるとき、黄金比や白銀比など既存の美しいルールはどんどん使っていきたいので、こういうサイトの存在はありがたいです。

差分確かめツール

・difff(デュフフ)

https://difff.jp/
Gitを導入したので使用頻度は減ったのですが、それでも差分確認のためによく使います。
文書でもコードでもなんでも使えるのがありがたいです。
春は限定さくらピンクになりますよ！

使用頻度は低めだけどないと困る集

・TinyPNG

https://tinypng.com/
無料では20枚までですが一気に画像を軽くしてくれます。劣化も少なめ。
一通り作業が終わった後にこれでまとめて画像を軽くするみたいな使い方。

・HTML特殊文字一覧

http://web-dou.com/html/t023b.html
たまーに使います。著作権表記のCマークや登録商標のRマークなど、
いつでも見返せるページを持っておくと何かと便利です……。

・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

https://wa3.i-3-i.info/
カタカナ語が飛び交うIT業界、このサイトがなかったらついていける気がしません！
ゆるいピヨ太君のイラストがとてもツボです。

・青空文庫 ポラーノの広場(宮沢賢治)

https://www.aozora.gr.jp/cards/000081/files/1935_19925.html
ダミーテキストが必要なときにとりあえず開いてあの有名な一節をコピペする。
ついでについつい読み始めてしまって時間が溶ける（ここまで1セット）！
銀河鉄道の夜もよく使わせていただいてます。

終わりに

以上、生命線サイトのご紹介でした。
カラージェネレータとかだと画面映えするサイトがたくさんあるんですけど、実用重視のシンプル真面目サイトも大好きでこんな感じになってしまいました。いつもお世話になってます！
Web制作業の皆さんが他にどんなサイトを使っているか知りたいので、おすすめサイトがありましたらコメントいただけますと大変ありがたいです。
それではまた！