トピックス

HOME
トピックス
WEBコーディング
コーディング初心者におすすめ！便利なジェネレーターサイト6選

ALL WEBサイト全般WEBデザインWEBコーディングWEBマーケティングWEBサーバーニュース

カテゴリーを選択

2018.12.06

WEBコーディング

コーディング初心者におすすめ！便利なジェネレーターサイト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の二つから選択できます。