Web制作で必須では無いけれど知っていたら便利なブラウザで使えるオンラインツール
Date: | 2023.12.12 |
---|---|
Update: | 2023.12.13 |
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
Web制作10年の上杉がたまーに使っている便利なツールを紹介します!
目次(読みたい所をクリック!!)
gridのCSSを生成してくれるツール
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/647cdcd5cfa650a4a0af819485ae24d7.jpg)
法則性がないデザインをgridで実装したい時に便利!
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
grid-template-areasで書くのって結構めんどくさくないですか?
ブラウザのサポート状況を確認
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/382544269d0474e7e5621da796129f94.jpg)
CSSだけじゃなくてHTMLやJavaScriptも調べられるのが便利
パッと見で使い方はわかると思うけど、サポートしていない場合の対応方法やシェア率など他にも色々有用な情報を見れるので、何がわかるかは知っておいたほうがいいと思います
CSSで三角形を作るコードを生成してくれるツール
https://10015.io/tools/css-triangle-generator
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/bf22c7547217e6dc6e68da886ebfe227.jpg)
ボタンで使う三角形とかを実装する時によく使います
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
コード自体は単純でツールを使うまでも無い気がするけどなかなか暗記できない、、、
JSONをGUIで操作できるツール
https://jsoneditoronline.org/#left=local.rokibe&right=local.rebena
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/36dce59fbb74a596fa646887041d6bba.jpg)
JSONの中身を編集したいときとか構造を理解したい時に使います
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
構文エラーを自動で直してくれたりするから便利
CSSからSASSに変換するツール
https://css2sass.herokuapp.com/
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/64dad77f7d78e4830852502c086a4b47.jpg)
古いホームページを調整するときに地味に使えることがある
SVGを全てフォント化してくれるツール
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/31894981db890ed74925c208189dfd53.jpg)
SVGをフォントとして使うことができるようになるツール
IcoMoonで用意されているアイコンを使うこともできるし、自前のSVGをアップロードしてフォント化することもできる
fontawesomeだと使わないアイコンまで読み込んでしまってリソースの無駄が気になる人にはオススメ
後はフォント化することで、font-sizeで大きさを指定できたり、colorで色を変えたりとかもできる
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
イチオシツールかも
HTMLでホームページにSVG画像を表示させるオススメの方法
構造化マークアップのコードを生成してくれるツール
https://technicalseo.com/tools/schema-markup-generator/
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/12/5b373e1c41afe36364d92acc26e1a7f5.jpg)
構造化マークアップのコーディングはテストしないと反映されているかわからないので事前にこのツールを使っておけば確実
![](https://sbwinc.co.jp/cms/wp-content/uploads/2023/07/50896eeeb7a85db1f3007ac670a4f067.jpg)
みなさんが使っている必須ではないけれどワンポイントで使える便利なツールがあれば教えてください!!
この記事へのコメント 0件