コーディング

コーディングに便利なwebサイトおすすめ5選

役に立つサイト

プログラミングに役立つサイト5選

コーディングに便利なおすすめのwebサイト

制作現場で使えるサイトを5つ紹介します。

結構使うことが多いサイトばかりなので覚えておくといいと思います。

HTMLバリデーションツール

[jin-yohaku10]

Gateway – Another HTML-lint 5

HTMLのコードを解析して文法に問題がないかチェックしてくれるツールです。

コードの何行目にどんなミスがあるが教えてくれる便利なツールです。

毎回コーディングが完了したらバリデーションツールを使って確認するのが制作現場の一般的な流れです。

下の画像では<ul>タグに対応する閉じタグが無いためエラーが出ています。

[jin-yohaku10]

バリデーションツール

テキストの差分表示ツール

[jin-yohaku10]

difff

テキストを比較して差分を表示するツールです。

左右にテキストを貼り付けて比較します。

テキストに違いがある部分に背景色をつけて表示してくれます。

バリデーションツール

画像圧縮ツール

[jin-yohaku10]

squoosh

画像の圧縮を行うツールです。

下の画像は圧縮を行なっている最中です。

左側がビフォー、右側がアフターとなっており、左右で比較しながら調を行うことができます。

[jin-yohaku10]

画像圧縮ツール

[jin-yohaku20]

box-shadowとborder-radiusのコード生成ツール

[jin-yohaku10]

box-shadowとborder-radiusジェネレーター

box-shadowとborder-radiusのCSSコードを簡単に作成できるツール

影と角丸の見た目を調整してCSSのコードを生成してくれる便利なツールです。

[jin-yohaku10]

影と角丸の作成ツール

[jin-yohaku20]

HTML特殊文字変換ツール

[jin-yohaku10]

HTML特殊文字変換ツール

テキストを特殊文字に変換してくれるツール

そのままではHTMLに表示できない文字を一括で特殊文字に変換してくれます。

[jin-yohaku10]

バリデーションツール

[jin-yohaku20]

コーディングに便利なツール5選を紹介しました。

web業界に入る前に知っておきたい知識・スキル5選【初心者向け】

スポンサーリンク

-コーディング
-

© 2020 まめしばweb Powered by AFFINGER5