BLOGスタッフブログ

インソースマーケティングデザイン

2020.08.31 コーディング

コーディング時に便利なサイトのリンク集

コーディングに役立つサイトのリンクをまとめてみました。
どんな時に使用しているかも記載していますので、これからコーディングを初めるという方にも参考になればと思います。

W3C

ソースのチェックや表示崩れが起こった際に原因を突き止める為に使用します。

Google Fonts

Webフォントの設定時に使用しています。
日本語対応のフォントがもっと増えて欲しいですね。

HTMLエンティティ化

メールアドレスをサイトに記載する際に使用しています。
ロボットの収集を防ぐ為にメールアドレスのエンティティ化は必ず行いましょう。

favicon.icoを作ろう!

画像をアプロードするだけでfaviconが作成可能です。

CSS三角形作成ツール

方向・タイプ・サイズを指定するだけで三角形のCSSを生成してくれるので便利です。

OneClickCSS

HTMLをCSSに変換できます。
エディタによってはプラグインで実装可能かもしれません。

URLエンコード・デコード

SNSシェアボタンの文言を設定する際に使用しています。

CSS Gradient

グラデーションのCSSが生成できます。
細かな調整をプレビューをしながら簡単に行えるので感動しました。

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

box-shadowとborder-radiusを同時にプレビューで確認しながらCSSを生成することが可能です。
こちらのサイトは他にもtext-shadowやnth-child、rubyなどのジェネレーターがあるので、要チェックです!

大文字小文字・全角半角・ひらがなカタカナ変換

稀に頂いた原稿に全角と半角の英数字が混在していることがあるので、それを統一する為に使用しております。

CodePen(コードペン)

ソースプレビューを行いたい時に使用しています。
サーバにデータをアップロードする必要がないので、すぐ確認をしたい時に便利です。
また、ソースやプレビューをサイトに埋め込めこむことも可能なので、ブログを書く際にとても助かっています。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します