【2023年版】コーディング効率化 無料Webサービス7選
コーディングの際に本当によくお世話になっている、便利Webツールをご紹介します。
これらのツールがなければ、これまでのコーディングにかけた時間は倍以上になっていたはず。（製作者さまたちには感謝しかありません）
正しいHTMLを！『HTML5 入れ子チートシート | 吉川ウェブ』
HTMLを書いていて「あれ？ul直下にdivってOKだったっけ？」など迷う時があります。
そんな時はここで特定のタグの親子関係を素早く確認。
わたしはかなりの頻度でアクセスしています。
知らないタグを発見するきっかけにもなります。
知っておきたい 『HTML Living standard』
セル結合があってもさくっとtable作成『Table Tag Generator』
セルの結合があると途端に面倒になるtableタグを、必要最低限に生成してくれるツール。
ドラッグでセルを選択して、ボタンで「結合／分割」「th指定」などが可能。
不等辺も怖くない『CSS三角形作成ツール』
三角形を表現する方法はいくつかありますが、まだまだ定番のborderを使うタイプの三角形ジェネレーター。
カンプデータからピクセルを拾って、縦横の比率で入力すればレスポンシブにだって使えます。
PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱
Retinaや4Kなど高解像度モニター対策で、2〜3倍のサイズに書き出した画像のファイルサイズが大きすぎて、表示に時間がかかる場合はWebPを使います。
最新のPhotoShopで書き出せるけれどあまり圧縮されない※ので、サルカワさんのお世話になっています。※設定次第かも
サルカワさんの良いところは、何といっても
複数のJPG／PNG／GIFファイルを一括でWebPに変換、zipでDLでき、ファイル名が保持される（〇〇.jpg→〇〇.webp）点。
特に、ファイル名が保持されるのは効率面で魅力的。
デザイナーにも使ってほしい『OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ』
最近はOGP設定が欠かせなくなってきたOGP。
SNSサービスによって、画像がトリミング表示されるのでデザインに配慮が必要です。
また、制作サイズと表示サイズが違うため、実際にSNS投稿してみると画像のテキストが思ったより小さいなんてこともあるので、このツールを使って確認しています。
このツールの良いところは、画像ファイルだけで表示を確認できるところ。
デザイン段階で確認できるので、「コーディングされたものをテスト投稿。修正したい場合はデザイナーさんに戻す」といった手間を省くことができます。
あらゆるファビコンを一括設定『Favicon Generator for perfect icons on all browsers』
今や必須設定となっているファビコン。
デバイス毎にファイルサイズや形式が若干異なるため、１つのファイルで一気に設定ソースを書き出せるこちらを重宝しています。
アイコンの背景を透過にするか否かの設定もここでできちゃう。
『パスワード生成』 - ルフトツールズ（LUFTTOOLS）
おそらく10年近くお世話になっているパスワード生成ツール。
似通った英数字を省いたり、8文字以内の場合は同じ文字を使わないよう設定したり、シンプルながらも痒い所に手が届くツールです。
パスワード生成に悩んでなんていられない！