今回は私がコーディングする際によく使う便利ツール・ジェネレーターを集めました。
コーディングを勉強中の方やもっと早くコーディングしたい方は参考にしてみてください。
目次
Nth-Child Visual Calculator
nth-childの確認ができるツールです。
nth-childの計算って結構複雑でコーディングしている時に迷ったりしますよね。
このツールでは「3n+4」や「4n+3」など入力するだけで確認できるのでとても便利です！
アスペクト比計算ツール
レスポンシブサイトでYoutubeやGoogle Mapなどの埋め込む時によく使います。
使い方は簡単で横幅と縦幅を入力するだけ！
CSSのサンプルを出力してくれるのでコピペで簡単に実装できます。
Table Tag Generator
tableタグを簡単に作成できるジェネレーターです。
複雑な表をつくるときは「rowspan」と「colspan」が必須ですがこれ結構大変ですよね。
私は計算するのが苦手なのでいつもこのTable Tag Generatorにお世話になってます！
CSS STRIPE GENERATOR
CSSのみでストライプを作成できるジェネレーターです。
画像で対応するとスマホやPCで線の太さの調整ができないので2枚画像を用意する必要がありますが、これを使うと線の間隔や角度など細かく設定できるのでとても便利です。
CSS Gradient
CSSでグラデーション背景を作成するジェネレーターです。
グラデーションを生成するジェネレーターって結構ありますが、こちらはとても使いやすいです。
英語ですがPhotoshopと同じような感覚で使えるのでとてもおすすめです！
吹き出しデザインジェネレーター
CSSで吹き出しを生成できるジェネレーターです。
このジェネレーターは吹き出しの三角の位置やサイズなど、かなり細かく設定できます。
サンプルも用意されているので便利です！
CSS3 Generator
text-shadowやbox-shadowを作成するジェネレーターです。
シャドウのCSSを自分で考えながらするのって結構大変ですよね。
これを使うとプレビューを見ながら設定できるのでデザイン通りに調整しやすいです。
またこちらのサイトでは「TRANSFORM・FILTER・ANIMATION」のジェネレーターもあるので、アニメーションなどの色んな設定もできます！
ダミーテキストジェネレータ
ダミーテキストを作成するジェネレーターです。
WEB制作時によく「とりあえずダミーテキスト入れといて！」ってなりますが、こちらのジェネレーターだと文字数をや日本語・英語など設定できるので便利です。
Placehold.jp
ダミー画像を作成するジェネレーターです。
こちらもWEB制作の際によく使いますが、サイズ・配色・文字など細かい設定ができるのでとても便利です。
HTML Imagemap Generator
イメージマップを作成するジェネレーターです。
最近ではあまり使うことはないですが、設定が結構大変なのでこちらのジェネレーターはとてもおすすめです。
画像をアップしてリンクを付けたい箇所を選択するだけでコードが生成されます。
CSS 2 SASS/SCSS CONVERTER
CSSをSASS/SCSSへ変換してくれるツールです。
最近ではSASSを使うことが多いですが、過去に作られたサイトの修正でCSSしかないことがあります。
そのままCSSを修正しても良いんですがめんどうなので私はいつもこのツールで変換しています。
SassMeister
SASSのコードをCSSへ変換してくれるツールです。
こちらは先程紹介した「CSS 2 SASS/SCSS CONVERTER」の逆バージョンです。
SASSの勉強をしたい方やちょっとした検証におすすめです。
HTML特殊文字変換ツール
HTML特殊文字を変換してくれるツールです。
スタイルガイドの作成やブログにHTMLコードを載せたい時におすすめです。
.htpasswdファイル生成
.htpasswdファイルの生成ツールです。
コーディングが終わってテストアップする際にBasic認証をよく使いますが.htpasswdファイルの生成はいつもこちらのツールを使ってます。
IDとパスワードを入力するだけで簡単に作成できます。
まとめ
さて、いかがでしたでしょうか？
今回は私が普段使っているツールやジェネレーターをご紹介してきましたが結構ありましたね。
気に入ったツールやジェネレーターがあったらブックマークしてどんどん効率化していきましょう！