コーディングをしていく中で
「どういうレイアウトにすれば表現できるかな…」
「SCSSで構築してるのに参考サイトがCSSでしか紹介していない…」
なんて思うこともあるかと思います。
調べれば表現したいレイアウトの方法やSCSSで紹介しているサイトがあると思います。
ですが、そんなサイトを検索して見つけ出すまでの時間の方が長くなってしまう、なんてことになりかねません。
少しでも作業時間を軽減出来るように、コーディングに便利なツールをまとめました。
それではどうぞ。
目次
CSS Grid Generator
CSS Grid Generatorはその名の通り、GridレイアウトのCSSを感覚的に作成する事が出来るジェネレーターです。
「Gridレイアウトを使ってみたいけどよく分からない…」「取り入れてみたいけどちょっと面倒そう…」と思っている人も、こちらを利用すれば気軽にお試しできますので、ぜひ使ってみてください。
gridの対応ブラウザ状況
現在のブラウザ対応状況を見る限り、最新のブラウザだったら問題無く動作するようです。
IE11に限ってはベンダープレフィックスを付ければ基本的に問題なく動作するようです。
使用方法
右側にある項目「Columns」や「Rows」などで、何列何行のレイアウトにするのか指定することが出来ます。
初期数値は、縦5×横5です。
ボックスの追加
緑の枠線内に点線で区切られたブロックがあると思います。
こちらをクリックするとカラーがついて、ブロックを指定したことになります。左上にある「.div1」はそのボックスのクラスになります。実際にコードに入れ込む際は自由に変更可能です。
複数まとめて一つのボックスとして指定する場合はクリックしたまま、まとめたいブロックまでドラッグしてください。
ボックスの追加の注意点
ボックスを追加するにあたって注意点が2点あります。
①クラス名は繰り上げられる
若い番号のクラスを持つボックスが削除されると削除された番号の次の要素にそのクラスが付与されるので、新しく追加し直したところで削除したクラスは付きません。
②移動はできない
カーソルが上下左右が矢印のものですが選択したボックスを移動出来るものではありません。その上にまた新しいボックスが生成されてしまうので気を付けてください。
ボックスの高さ・幅を指定
幅や高さを指定するにはこちらに数値を入力します。
初期値は「1fr」です。
コードの生成
幅や高さも記入出来たら、右側にある「Please may I have some code」を押します。押すとHTMLコードとCSSが生成されます。
やり直したい場合は「Reset grid」を押せば、リセットしてくれます。
CSSがポップアップで表示されます。「Show HTML」を押すとHTMLコードに切り替わります。
「Show CSS」を押すとCSSコードが表示されます。
「Copy to clipboard!」を押すと全選択されるのでその状態で「ctrl+C」をしてコピーして貼り付けてください。
CSS 2 SASS/SCSS CONVERTER
CSS 2 SASS/SCSS CONVERTERは、CSSをSASSもしくはSCSSに変換してくれるツールです。
自分はSASS（またはSCSS）でコーディングを進めているのに、参考サイトではCSSで紹介されている、ということってありますよね。
短いコードなら手打ちで書き換えても良いのですが、膨大な量の場合はちょっと面倒です。
そういった時に、こちらのツールは役立ちます。
使用方法
左側にCSSの記述を入力（張り付け）します。
真ん中にある矢印にカーソルを合わせるとSASSかSCSSどちらで変換するか選択できるようになります。
クリックすると右側に選択したタイプでのコードが出力されます。（今回はSCSSで出力しました。）
これで簡単にCSSをSASS、SCSSに変換して使用することが出来ます。
プログラマーのためのネーミング辞書
コーディングする際、クラスやIDは必要ですよね。でもどんなクラスを付けるべきか、悩むこともあると思います。
特に初心者の方だと、まだ自分なりのルールも確立しておらず、ちょっとしたクラスにも迷うことが多いのではないでしょうか。
プログラマーのためのネーミング辞書は、そんな悩みを解決する内容に合う日本語を入力するだけそれに合ったクラス名を自動で生成してくれるツールです！
使用方法
「日本語を入力するとネーミングを生成します。」とある箇所に、日本語を入力します。
「ファイルを削除」と入力してみました。
そうすると右側に入力した内容がクラス名になって変換されます。
今回は「ファイルを削除」と入力したので「DeletingFile」と変換されました。
また名詞の末尾に「s」をつけると複数形のクラス名が出力されます。
例）「ファイルｓを削除」⇒「DeletingFiles」
左上の「Aa」を押すと単語の連結方法を指定できます。
連結方法は以下の6種類になります。
PascalCase
単語の先頭をすべて大文字にする
例）「ファイルを削除」⇒「DeletingFile」camelCase
先頭の単語だけ小文字にする
例）「ファイルを削除」⇒「deletingFile」snake_case
単語の間をアンダーバーつなぐ
例）「ファイルを削除」⇒「deleting_file」SNAKE_CASE
単語をすべて大文字にして、単語の間をアンダーバーつなぐ
例）「ファイルを削除」⇒「DELETING_FILE」ハイフネーション
単語の間を「-」つなぐ
例）「ファイルを削除」⇒「deleting-file」変換なし
単語の間にスペースつなぐ
例）「ファイルを削除」⇒「deleting file」
VS Codeにcodicの拡張機能を追加する
また、VS Codeを使用している人は、これを拡張機能に追加すればエディタ内ですぐ使うことが出来ます。
大まかな手順は以下の3つです。
① codicでアカウントを作成し、アクセストークンを取得する
② VS Codeに拡張機能「codic」をインストールする
③ VS Codeのコマンドパレットから使用
① codicでアカウントを作成し、アクセストークンを取得する
codicでアカウントを作成します。
登録したメールアドレスにメールが届くので、メールに記載されているURLから引き続き登録していきます。
APIを取得するために任意のプロジェクトを作成します。今回は「sample-project」という名前で登録しました。
登録すると左サイドバーに機能が3つほど追加されているので、機能の一つである「API」をクリックしてその中にあるアクセストークンをコピーします。
web上で行う準備は以上です。
② VS Codeに拡張機能「codic」をインストールする
ここからはVS Codeでの準備になります。
VS Codeで、拡張機能「codic」をインストールします。
インストールがされたら、「ファイル ⇒ ユーザー設定 ⇒ 設定」（Windowsでは「ctrl + ,」、Macでは「⌘ + ,」でも開けます。）で、codicと検索をかけて取得したアクセストークンを貼り付けます。
アクセストークンを貼り付けた後は、単語の連結方法を決めます。
③ VS Codeのコマンドパレットから使用
コマンドパレット（Shift + ⌘（ctrl） + P）を開いて「codic」か「Ttanslate」と入力すると、「codic: Translate Japanese Phrase」が出てくるので、クリックします。
再度入力できるようになるので変換したい内容の日本語を入力します。「ファイルを削除」と入力しました。
Enterを押すと内容にあったクラス名をいくつか出力してくれます。
これだけでVS Code上でもクラスを簡単に生成することが可能になります！
一括pxからvw計算機
一括pxからvw計算機は、pxを簡単にvwに変換することが出来るツールになります。
使用方法
使用方法は簡単です。
① Baseに基準値を入力
② 左側の入力欄に変換したいpxのCSSを入力
③ ②の入力が完了すると自動で右側にvwに変換されたCSSが出力される
Baseに入力する基準値は画面幅になります。ここに入力された数値を元にpxがvwへ変換されます。
使用する注意点として、数値だけ入力しても変換されません。入力欄に薄く入力例が記されているのでそれに倣って入力してください。
また、クラス名や中括弧は無くても変換してくれますが、セミコロンは無いと変換されません。
計算が苦手な文系のためのコーディング単位計算ツール
コーディングで必要な単位の計算を簡単にできるツールです。
以下の6種類の計算をしてくれます！
px単位からem単位への変換
要素間の余白の計算
line-height に使用する計算
固定値から割合に変換する計算
割合から固定値に変換する計算
縦横比を保持したまま可変
使用方法
数値を入力すると、自動的に赤枠で囲われている箇所に計算結果が出力されます。
それぞれのTIPSの中に詳しい使い方も記載されているので、使い方が分からなくても安心です。
まとめ
いかがだったでしょうか？
個人的に単位の計算などのちょっとした計算は地味に時間を取られるな、という印象があります。
紹介したツールに出会うまではPC内にある電卓で計算したりしていましたが、少しだけ手間でした。
その手間もツールを使用したら軽減されましたのでブログを見た方々の作業時間も軽減できれば幸いです。
またSassなどを使用しているのならば、@mixinなどで計算できるようにしておくと便利ですが「一部分だけvwの時の値を知りたい」などといった場合だとそっちの方が手間ですよね。
そういった時にも役に立ちますのでぜひ使ってみてください。
今回のブログ以外にもコーディングする際に、便利なツールをまとめたブログを公開していますのでこちらも合わせて見て頂くと作業効率がより上がること間違いなしです。
コーディングをより効率的に！楽にHTMLやCSSを生成できるジェネレータ8選（おまけあり）【2020年度版】
