吹き出し、シャドウ、グラデーショなど、おすすめhtml/cssジェネレーター

Webデザイナー・htmlコーダー向けの便利なCSSジェネレーターのご紹介です。
2020年5月、ツールを追加しました。

吹き出しジェネレーター cssarrowplease

CSS3の吹き出しを作成できます。矢印の位置やボーダーの色、大きさなどのデザインもツール上で編集できます。

レスポンシブ用に可変するフォントサイズを生成する Fluid-responsive font-size calculator

レスポンシブサイトをコーディングする時、ブレイクポイントに合わせて都度フォントサイズを指定するのが面倒だったりしますよね。
このジェネレーターでは、calc関数を利用した、画面幅に合わせてフォントサイズが変わる以下のようなコードを生成してくれるのでとても便利です。

@media (min-width: 768px) {
  :root {
    font-size: calc(1rem + ((1vw - 7.68px) * 1.0417));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {
  :root {
    font-size: 28px;
  }
}

CSSアニメーションのジェネレーター Animista

よく使う拡大縮小や回転のアニメーションのCSSジェネレーターです。

SVGのアニメーションジェネレーター SVG ARTISTA

SVGにstrokeやfillアニメーションをかけられます。

CSS filter ジェネレーター BestAgencies

filter プロパティを利用した表現を、実行結果を見ながら調整し、CSSを作成できます。
blur(ぼかし)やgrayscale(モノクロ)など、元画像を加工しなくても演出を加えることが可能です。

CSSグラデーションジェネレーター CSS Gradient

CSS3のグラデーションを作成出来ます。カラーピッカー、カラーコードどちらからでも色を入力でき、アルファ値(透明度)も設定できます。
グラデーションの画像をアップデートしてCSSに変換することもできるのが便利です。

CSS三角形作成ツール

CSSの三角形を作成できます。矢印アイコン代わりに使ったりします。

CSS Triangle Generator

CSSで作る三角形ツールをもう一つ。できることはほぼ上記のツールと同じなので、お好みで使いください。

CSSテキストシャドウジェネレーター bad-company.jp

text-shadowプロパティを使ったテキストシャドウのジェネレーターです。
重ねて付与できるので、濃さや幅の自由度が高い影をつけられます。

SVGパターンのジェネレーター SVG PATTERN MAKER

ラインやドットなど、SVGのパターン画像が作れます。サイズなども調整可能です。

CSSで画像にマスクをかけるclip-pathを生成する clippy

画像にマスクをかけるためのCSSを生成するツールです。マスクの種類が選べます。
※clip-pathプロパティはIE11には対応していないのでご注意ください。

flexboxのCSSを生成する flexplorer

このツールを使えば、スタイルの切り替えを実際に見ながらレイアウトの確認が出来るので、flexboxの仕組みが直感的に理解できます。

指定できるプロパティ

• ボックスの横幅
• flex-direction
• flex-wrap
• justify-content
• flex-grow
• flex-shrink
• flex-basis

CSSのボーダーに画像を適用するジェネレーター Border Image

CSSのborder-imageを使って、画像を使ったボーダーが生成できます。