インプレス ビジネスメディア

コーディングが捗る！CSSを自動生成できる便利なジェネレータまとめ

シトラスジャパン株式会社

2018年10月11日 11:29

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。 また、編集部はこの内容について正確性を保証できません。

コーディング中、「あれ、これってどうやって作るんだっけ？」と迷ったときに、お目当ての効果を簡単に作れるオンラインツールをよく利用しています。ツール上で色や数値などを設定すると、変更がプレビューされ、自動でHTMLやCSSのコードが生成されるので、複雑なCSSを書きたいときにとっても重宝します！また、すべて手で打つよりはるかに時短になります。

ということで、コーディング時の作業が短縮できる便利なジェネレータを集めてみました。
普段私がよく使っている便利ツールや、楽しくていくらでも作りたくなるツール、CSSの無限の可能性を感じさせるツールなどをご紹介します。

画像にCSSでフィルターをかける

CSSFilterGenerator.com　http://www.cssfiltergenerator.com/

画像にぼかしや色調補正のフィルターがかけられるCSSを生成できるのですが、これはすごい！
 

▼続きはこちら▼
https://citrusjapan.co.jp/column/cj-column/w006_201810.html

この記事のキーワード ：

この記事をシェアしてほしいパン！

前の記事

ページ表示速度改善のオススメ！～PageSpeed Insightsで簡単計測～

次の記事

自動車の「ぶつからない技術」の考えに学ぶ③

関連記事

【初心者向け】CSSフレームワークとは？メリットや使い方を解説

2018年11月29日 11:58

WordPressで勝手に作られる不要なコードやページを削除する方法

2018年1月29日 10:12

ルーチンワークを時短できる！コマンドの活用法【超初心者向け】

2020年8月4日 17:50

【Webデザイン】Web制作の参考になる、おしゃれな北欧のWebデザインまとめ

2018年4月26日 11:02

APIを使わずに埋め込みGoogle Mapの色やピンを変更してみよう

2020年8月21日 12:05

Figmaの新機能がスゴい！ バリアブル・開発モードなど Web制作“時短”の味方に！「Config 2023 現地レポ」

2023年7月14日 7:00

  • 25
  • 24

この記事の筆者

シトラスジャパン株式会社

多言語におけるWEB制作、グラフィックデザイン、多言語による海外向けグローバルクリエイティブをコアコンピタンスに多メディア・多言語対応のクリエイティブ事業を展開する設立40周年のクリエイティブ集団。アジアマーケティング情報、英文広告総合研究所のレポート、Web制作ノウハウなど発信します。

https://www.citrusjapan.co.jp/
https://www.citrusjapan.co.jp/en/

シトラスジャパン株式会社のプロフィールを見る

筆者の人気記事

参考にしたい！アーティストのサイトから学ぶWebデザインのトレンド

2017年10月24日 9:48

【必見】Webサイトのアクセスランキングを比較すると見えてきたこと

2017年8月17日 18:06

  • 21

交通標識の変化～ローマ字表記がなくなった？～

2020年3月10日 14:52

【コーディング】HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル

2018年3月12日 12:06

無料はどこまで？Googleマップの課金範囲

2019年1月31日 14:29

【2019年度版】中国の動画サイト、Youku(优酷）へ動画をアップロードする方法

2019年7月8日 10:19

業界情報やナレッジが詰まったメルマガ配信やソーシャルもよろしくです！
姉妹サイトもぜひ： ネッ担・ネッ担お悩み相談室

新着記事

1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す8つの活用術【1週間まとめ】 8月3日 11:20 SEOと広報PRの相乗効果で実現する、AI時代に“選ばれる”ブランド設計 8月3日 7:05 無料BIツール入門『いちばんやさしいGoogleデータポータルの教本 人気講師が教える業務で使えるダッシュボード構築の基本』を3名様にプレゼント 7月31日 10:00 AI回答のフレーミング（見せ方・提示）は、デジタルの新たな「商品棚・売り場」――ChatGPT時代の新しい購買行動【SEOまとめ】 7月31日 7:05 【漫画】質の高いクチコミの増やし方を教えてください！@cosmeの作間さん、金野さんに聞いてきた 7月31日 7:05

人気記事トップ10

1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す8つの活用術【1週間まとめ】 1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す活用術8選 SEOで勝つタイトル付けの法則とは？ グーグルから評価され、流入数を増やす5つの条件 SEOと広報PRの相乗効果で実現する、AI時代に“選ばれる”ブランド設計 AI時代のSEOやデータ分析がわかる「生成AI×マーケティング フォーラム 2026」講師の必読記事7選【8/27開催】 意味あるの？ 職場の謎マナー、圧倒的1位は「○○の書き方」！【エムフロ調べ】 将来なりたい職業、男子中学生はITエンジニアが5位→1位に！ 高校生は男女とも公務員がトップ【ソニー生命調べ】 サステナビリティサイト100社、首位はカゴメ！ 2位・3位はあの大手BtoB企業【トライベック調べ】 楽天インサイトがアンケート回答画面をリニューアル、モニター6名中5名が「回答しやすい」と評価 広告の「閉じる」ボタン、9割以上が誤タップでイライラ【シナブル調べ】
1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す活用術8選 派遣で働く期間、同じ会社・同じ職場を継続希望「3年以上」が第1位【エン調べ】 10万ページを8,000に激減！ 富士通が挑んだグローバルサイト改革と「SitecoreAI」移行の舞台裏 【3秒クイズ】5433円は3人で割り切れる？ 電卓を使わずに「ひと目」で見抜く方法 AI Overviewsでクリック率が62.7％減！ Google検索1位でもCTRはわずか9％【Ahrefs調べ】 Googleが「Google Search Console」に新機能「プラットフォームプロパティ」を追加 電通が新マーケティング手法「DNAマーケティング」を開発、生成AIで「勝ち筋」とその根拠を発掘 東京の中古マンション価格に異変？ 都心5区で下落、需要は周辺3県へシフト【マンションリサーチ調べ】 AI回答のフレーミング（見せ方・提示）は、デジタルの新たな「商品棚・売り場」――ChatGPT時代の新しい購買行動【SEOまとめ】 「Google Search Console」に新機能「プラットフォームプロパティ」を追加【週間ランキング】
1週間かかった作業が1日に！ Gemini Notebookを無料で使い倒す活用術8選 日本マイクロソフト、サイバーエージェント、文藝春秋、電通などが登壇！ 「生成AI × マーケティング フォーラム 2026」【8/27オンライン開催】 Googleが「Google Search Console」に新機能「プラットフォームプロパティ」を追加 「AI SEO」「GEO」「AEO」「LLMO」で今やること・判断の尺度を専門家2者が教えてくれた【SEOまとめ】 派遣で働く期間、同じ会社・同じ職場を継続希望「3年以上」が第1位【エン調べ】 【28卒】業界別・就活人気ランキング！ 広告は博報堂、ITはサイバーエージェントが首位、他業界の1位は？【ワンキャリア調べ】 上司と部下の“板挟み”よりつらい？ 管理職のストレス1位は「言いにくいフィードバック」【IKUSA調べ】 【3秒クイズ】5433円は3人で割り切れる？ 電卓を使わずに「ひと目」で見抜く方法 SEOは「キーワード検索」から「意思決定エンジン」へ、AI検索がもたらす10の変化（前編） 10万ページを8,000に激減！ 富士通が挑んだグローバルサイト改革と「SitecoreAI」移行の舞台裏
人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ！ Sponsored

10万ページを8,000に激減！ 富士通が挑んだグローバルサイト改革と「SitecoreAI」移行の舞台裏 7月29日 7:05 デザイン提案が「2週間→2日に」 設立22年を迎えるWeb制作会社のAI活用法 7月28日 7:05 AI検索で“自社がお勧め”されない！ お米ギフトの八代目儀兵衛が実践、GEO時代のECサイト改善 7月16日 7:05 AI検索時代、なぜSNSが重要？ フジドリームエアラインズが実践“フォロワー6倍・UGC200％増”の舞台裏 7月14日 7:05 AI分析で施策のPDCAを高速化！ 中川政七商店とSprocketが実践するAI活用術 7月10日 7:05 Webサイトのトップページはもはや不要？ 商品情報を「売れるコンテンツ」に変えるPIM/DAM連携 7月8日 7:05 ECビジネスに有効！ リピート促進や顧客満足度向上に直結する「LINE通知メッセージ」とは？ 6月30日 7:05 AI活用でWebサイトを優秀な営業担当者へ。BtoBサイト制作「5つの新基準」とは？ 6月24日 7:05 検索上位でもAI Overviewsに出ない!? 老舗米屋・八代目儀兵衛が取り組んだGEO施策 4月20日 8:00 明太子の「やまや」に聞く、マーケティングから店舗・採用まで広がるデータ活用術 4月14日 7:05
Webサイト改善講座～GA4・Clarity・サーチコンソール徹底活用

Webサイト改善講座～GA4・Clarity・サーチコンソール徹底活用

オンデマンド講座
アクセス解析実践講座

アクセス解析実践講座

オンデマンド講座
第1回 生成AI×マーケティング スキルアップ講座

第1回 生成AI×マーケティング スキルアップ講座

リアル講座

申込締切: 2026年8月20日

編集部からのおしらせ