HTML&CSS

2018年度版 作業を楽にするCSSジェネレータまとめ

作業時間を少しでも節約できるようにCSSサンプルやジェネレータをまとめました。
便利なサイトがあれば随時追加していきます。

Flexbox

Flexbox Generator

CSSによるレイアウトFlexboxは複雑です。DIVを横に並べたり縦にしたり調整できると助かりますよね。
このページでフレックスレイアウトのCSSを簡単にテストできます。

Flexbox Generator

CSS Grid Layout

CSS グリッドレイアウト リファレンス

CSSグリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、かつ簡単に実現できます。

CSS グリッドレイアウト リファレンス

Grid by Example

CSSグリッドレイアウトを学ぶためのサイト。
Exampleページには豊富なサンプルが掲載されています。

Grid by Example

Atomic Bulldog Grid

CSSグリッドレイアウトに基づいたCSS(SCSS)。

Atomic Bulldog Grid

SMART CSS GRID

汎用性の高いCSSグリッドシステム。

SMART CSS GRID

form

Bootsnipp  Bootstrap CSS Form Builder and Generator

Drag & Drop components
フォームデザイン要素をドラッグアンドドロップして、必要なフォームレイアウトを作成することができます。

Bootsnipp

Buttons

BootstrapのボタンCSSを楽にカスタマイズできます。

Buttons

CSS Button Creator

直感的な操作で簡単にCSSボタンを作成することができます。

CSS Button Creator

いろいろなパーツ

ENJOY CSS

高度なCSSジェネレータ
fontからformのデザインまで幅広くカスタマイズすることができます。

ENJOY CSS

COLOR

Color Hunt

カラーハントは、数千もの最新のカラーパレットを使用した、色のインスピレーションのための自由でオープンなプラットフォーム。

Color Hunt

Color Hex – ColorHexa.com

カラー百科事典。

Color Hex

w3schools.com

とにかく色のコードを探しやすい、使いやすい。

w3schools.com