コーディング時短!効率化におすすめなWebツール6選!

2021年9月15日コーディング, ツール

コーディング効率アップ

みなさんはhtml、CSSコーディングをするときにどれくらい効率アップをしていますか?

私はローカルにテンプレやメモを保存しておいたり、今回紹介するWebツールを毎回のように使っています。

だってコピペするだけだもの。

ということで今回はよく使うWebツールの中から6つを簡単に紹介します。




htmlをCSSに一発変換!『OneClickCSS』

その名の通りhtmlをワンクリックでCSSに変換してくれます。

記述方法も複数選べて、プロジェクトや用途に合わせて変換ができるのがいいですね。
「タグ要素無し」のチェックはhtmlタグをCSSに記述するかどうかを選べます。

「タグ要素無し」あり
div#top {}

「タグ要素無し」なし
#top {}

このツールを知ったときは本当に神!と思いました。
必要に応じて少しカスタマイズするだけでいいし、何行も手書きしなくていいのが本当に最高です。




CSSをSASS/SCSSに一発変換!『CSS 2 SASS/SCSS CONVERTER』

クライアントから教えていただいたソース変換ツールです。

こちらも使い方はOneClickCSSに似ているのですが、用途はCSSをSASS/SCSSに変換をしたいときに使用します。

一瞬で変換できるのも魅力的です。

子要素の幅を%で自動計算!『Really Quick』

こちらは特にレスポンシブのときに真価を発揮する便利ツールです。

子要素の幅を可変させたいときに、親要素と子要素のwidth(px)を入力するだけで子要素のwidth(%)を自動計算してくれます。
あとはそれをコピペするだけ。

ようは、「この画面サイズ(親要素px)のときに子要素はこのサイズ(px)になってほしいから、何パーセントだ…?」などというときに使えます。

pxをvwに変換!『CSS一括pxからvw計算』

こちらは名前で答えが分かるのですが、基準値となる数値を入力してpxをvwに変換してくれるツールです。

私は主にレスポンシブのときに使用します。

視覚的にテーブルを作成してhtml出力!『HTML Tables Generator』

機能が満載のtableタグジェネレーターです。
めちゃくちゃお世話になっています。

シンプルなテーブルなら使わなくてもいいのですが、セルの結合が複雑なテーブルだとかなり大変になってきます。
そこでこのジェネレーターを使うと、視覚的にテーブルを組んでhtml出力をしてくれるので簡単に時短でテーブルを構築することができます。

ただ、機能が満載なのですが英語しかないみたいなのですべて把握していません。
なのでまずは必要最低限の使い方を覚えておきましょう。

テーブル作成、セルの結合

まっさらにしたい場合:
「Table → Clear table」
「File → New table」

列、行を増やしたい:
「Table → Set size」

html出力または更新したい:
テーブル下の「Generate」ボタン

あとは「Generate」ボタン下にある「Do not generate CSS」にはチェックを入れておきましょう。
チェックがないとCSS出力とclass名が勝手に入って後々面倒なことになります。

これだけ分かれば問題はないと思います!




CSSで三角形を作るなら必須!『CSS三角形作成ツール』

こちらは有名なジェネレーターかもしれませんね!

三角形をCSS出力してくれるジェネレーターです。

三角形の向きを斜めにも指定できたりするので、画像を用意しなくてもパパッと三角形を作成できます。

私はリストやボタンのアイコンとしてよく使います。




おわり

以上が私の選んだコーディング効率アップのためのWebツール6選でした!
コーディング自動化まではいかないけど時短することで結果的に単価アップにもなるのでよかったら駆使してみてくださいね。




コーディング, ツール