トピックス

  1. HOME
  2. トピックス
  3. ホームページ制作
  4. コーディング全般
  5. コーディング初心者におすすめ!便利なジェネレーターサイト6選

コーディング初心者におすすめ!便利なジェネレーターサイト6選

今回はコーディング初心者にもおすすめな簡単な操作で複雑なCSSや画像の圧縮などを行えるジェネレーターサイトをご紹介します

CSS生成系

「CSS3 Text Shadow Generator」

サイト名

CSS3 Text Shadow Generator

URL https://css3gen.com/wp-content/cache/all/text-shadow//index.html
解説

text-shadowのCSSを作成できるジェネレーターサイトです。
直観的に操作できるのでデザインデータ通り簡単にtext-shadowが作成できます。

「CSS三角形作成ツール」

サイト名

CSS三角形作成ツール

URL http://apps.eky.hk/css-triangle-generator/ja
解説 CSSで三角形を描画しなければならない!っという時におすすめなジェネレーターサイトです。
方向とサイズと色を入力するだけで三角形のCSSのソースコードが画面右側に表示されます。また、IE6の対応も可能です。

「Ultimate CSS Gradient Generator」

URLhttp://www.colorzilla.com/gradient-editor/

サイト名

Ultimate CSS Gradient Generator

解説

こちらはCSSでグラデーションのソースコードを生成してくれるジェネレーターサイトです。
Photoshopやillustratorのグラデーションパレットと同じ感覚でグラデーションを調整したら、右側に生成されるCSSをコピー&ペーストするだけです。色の反転やグラデーションの方向変更も簡単にできるうえに古いブラウザにも対応しています。
他にも画像からグラデーションを読み取る機能やscss形式の記述に変更できる機能もあり大変多機能で便利なサイトです。

画像作成系

「favicon generator」

 

サイト名

favicon generator

URL https://ao-system.net/favicongenerator/
解説

各種サイズに対応したfaviconやiOS用のアイコン画像を作成してくれるジェネレーターサイトです。
元となる一枚の画像をアップロードすると、出力される画像一覧をプレビューできるので確認してからダウンロードできます。
様々なサイズのアイコンとbrowserconfig.xmlとmanifest.jsonも出力されますので自分でなにが必要なのか取捨選択する必要がありますのでご注意を。

「Optimizilla」

サイト名

Optimizilla

URL https://imagecompressor.com/ja/
解説

画像を圧縮、最適化してくれるジェネレーターサイトです。
画像をドラッグ&ドロップでアップロードすると圧縮が始まります。PNGとJPGの両方に対応していて、最大20枚の画像を一括で圧縮してダウンロードできるのがとても便利です。また、圧縮前と圧縮後をプレビューで比較できるうえに圧縮率も自由にコントロールできます。

「Placehold.jp」

URLhttps://placehold.jp/

サイト名

Placehold.jp

解説

画像を暫定的に配置しなければならない時に便利なダミー画像を表示させるURLを生成してくれるジェネレーターサイトです。
幅と高さを入力するとURLが発行されるのでそれをaタグのsrc内にいれるだけでダミー画像が表示されます。
URL内の数字を変更するだけで好きな幅と高さに変更できます。その他にも背景色や文字の色なども変更できます。画像のファイル形式はjpgとpngの二つから選択できます。

この記事をシェアする