cssジェネレーターについて

cssを作っていく上で便利そうなジェネレーターメモ。

図形

CSS三角形作成ツール

url : http://apps.eky.hk/css-triangle-generator/ja

使い方

1. 左側の「方向」や「サイズ」を変更
2. 右側の「CSS」の部分に書き出されるので、それをコピーして使う

吹き出し作成ツール

url : http://www.cssarrowplease.com/

使い方

1. 左側の「Position」や「Size」などを変更
2. 右側にcssが書き出されるので、それをコピーして使う

border-radius作成ツール

url : https://9elements.github.io/fancy-border-radius/

使い方

1. 上の方にある四角を触るとしたの「border-radius」が変わる
2. 下の方にある 「border-radius」の「COPY」でcssをコピーして使う

イージング

cubic-bezier

url : https://cubic-bezier.com/

使い方

1. 左側の曲線の赤い点・青い点を色々触る
2. cubic-bezier(.17,.67,.83,.67)の部分が変更し、「GO!」のボタンで動きを確認できる（赤い四角）
3. 「Library」の部分を触ると青い四角の方の動きを変更できる

Ceaser

url : https://matthewlein.com/tools/ceaser

使い方

1. 「Easing」のプルダウンか左側の曲線部分から変更できる 変更できる種類
2. 「Duration」の部分で動く秒数を指定可能
3. 作成したコードについては下の方にある「Code snippets, short and long-hand:」から取得することができる

影

box-shadowとborder-radiusジェネレーター

url : http://www.bad-company.jp/box-shadow/

使い方

1. 「borderの設定」などで各種設定可能
2. 「ソースコード」からコードを取得することができる

text-shadowジェネレーター

url : http://www.bad-company.jp/text-shadow/

使い方

1. 「shadowの設定」などで各種設定可能
2. 「ソースコード」からコードを取得することができる

アイコン

CSS ICON

url : https://cssicon.space/#/

使い方

1. 左側のアイコンを選択(CSS ICON のロゴも選択できる)
2. 右側にHTML, CSSがでるので、それをコピーして使う

色

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

url : https://www.colorzilla.com/gradient-editor/

使い方

1. 左側から色などを変更
2. 右側のcssから取得することができる

配置

flexbox

url : https://suiq.jp/flex-layout-generator/

使い方

1. 左側から並べたい要素を選択
2. 右下からcssを取得

Grid

url : https://cssgrid-generator.netlify.com/

使い方

1. 配置したい順番で左側のボックスをクリック
2. 右側の「Columns」や「Column Gap」で配置数や余白を調節できる
3. 右側の「Please may I have some code」の部分をクリックするとモーダルが出てくるので、そこからHTML, CSSをコピーして使う

ホバー

cssfx

url : https://cssfx.dev/

使い方

1. 「Bubble」などをホバー or フォーカスで動きを確認
2. 要素をクリックすることでHTML, CSSを取得可能

CSS WANT

url : https://www.csswand.dev

使い方

1. 「Grow」などをホバー or フォーカスで動きを確認
2. 要素をクリックすることでHTML, CSSを取得可能

Transform

CSS Transform Simulator

url : https://nagasawaaaa.github.io/css-transform-simulator/

使い方

1. 左側の「translate」の値などを変更
2. 右側の「CSS Preview」からcssを取得可能

CSS3 Transform

url : https://css-transform.moro.es/

使い方

1. 右側から色々な値を変更
2. 左下の「CSS Output」からcssを取得することができる

いろいろ

CSS3 Generator

使い方

text-shadow の場合

1. 「text-shadow」のボタンをクリックすると画像ページへいく
2. いろいろな値を触ると下の方にある「CSS」からcssを取得することができる

余白

line-heightの余白を調整できるジェネレーター

url : http://text-crop.eightshapes.com/

使い方

1. 「Configure the Crop」のオレンジと青色の部分を変更。ここでフォントやサイズについても変更可能
2. 「Confirm the Result」で余白について確認
3. 「Copy the Code」でcssをコピー

CSSジェネレーターリンク

• Web開発を効率化する！CSS系オンラインツール、ジェネレーター16選
• 【2017年版】CSSジェネレーターのまとめ