system
大貫 晃一

2020.8.31HTML/CSS 

システムエンジニア

大貫 晃一

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

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

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(コードペン)

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

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら

その他の記事

ページTOPへ