【保存版】必ずおさえておきたいCSSジェネレーターサイト7選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

Webページのレイアウトの際に必須ともいえるCSS。簡単なページ構成でも小さなところで凝ったCSSのデザインがあるだけでぐっとデザインが引き締まります。

ですがイメージはあってもうまくコードにできない、あるいはできてももっと手軽にCSSを使いたいという人もいるのではないでしょうか。そんな人のためにあるのが、ジェネレーターサイトです。ビジュアルでわかりやすいGUIでデザインを選び、CSSコードを吐き出してくれる優れものです。

今回はその中でもまずはおさえておくと便利なCSSジェネレータサイトを7つご紹介します。

{CSS}Portal

Portal

ページ内の「CSS Generators」から、ボックスシャドウ・ボタンなど様々なジェネレーターの選択ができます。選択した後各ページでCSSコードの作成ができます。

3D Ribbon Generator

3D

様々な3Dリボンを作成できるジェネレーターサイトです。自ら幅や大きさなどを決定しGenerateボタンをクリックするとコードが表示されます。

CSS3 Button Generator

button

色や大きさ、テキストを設定することでボタンのCSSコードが作成できます。

CSS triangle generator

triangle

角度、大きさ、色を設定することで三角形のCSSコードが作成されます。

Ultimate CSS Gradient Generator

gradient

様々な種類のグラデーションが作成できるCSSサイトです。設定を決めた後、switch to cssを押すことでCSSコードが表示されます。

OneClickCSS

oneclick

このサイトはHTMLコードからCSSコードを自動で作成してくれます。ソースを入力するだけでワンクリックでCSS表示してくれる非常に便利なサイトです。

CSS3プロパティジェネレーター

propaida

日本語に対応した、まるでPhotoshopのような操作でグラデーションなどを作成できるジェネレーターです。

まとめ

小さいパーツやディテールなどまで一からコーディングしていると非効率な時もあります。そんなときにはこれらのジェネレーターを使ってみるといいかもしれません。


イベント

2017/12/05(火)
Design Thinking Square