インソースマーケティングデザイン
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(コードペン)
ソースプレビューを行いたい時に使用しています。
サーバにデータをアップロードする必要がないので、すぐ確認をしたい時に便利です。
また、ソースやプレビューをサイトに埋め込めこむことも可能なので、ブログを書く際にとても助かっています。