スポンサーリンク

コピーするだけ!CSSジェネレーター7選!

スポンサーリンク

コピーするだけ!CSSジェネレーター7選!

CSSをなかなか使いこなせない。サンプルを見ても特にレイアウト関係がいまいち理解できないし、たとえ理解したとしてもすぐに忘れてしまう。また、レイアウトがブラウザや画面の大きさなどに依存するため、積極的に理解しようという気になれない。

こんな時、とても役立つのが無料のオンライン CSS ジェネレーターだ。Googleで「CSS Generator」などと入れて検索すれば無料で使えるものがザクザク出てくる。本当にありがたいことだ。

この記事では、海外のサイトを参考に、使いやすい、面白い、かっこいいジェネレーターを紹介してみる。

スポンサーリンク

CSS Code Generators

プリセットされているサンプルは、あまりクールな感じではないのだが(すみません)、このサイト一つで Gradient、Box Shadow、Text Shadow、Color、Font、Table、Column、Border、Border Radius、Transform、Background などの CSS を生成できるため、ついつい使ってしまう。。。

CSS Button Generator

ボタンに特化したジェネレーター。とても使い勝手の良さそうなプリセットが 並んでいる。

CSS Button Creator

こちらもボタンに特化したジェネレーター。上のサイトとは異なりプリセットはとても少ない。一つのボタンに対して細かい設定を行える印象。CSSの勉強などに役立ちそうだ。

CSSmatic

CSSmaticは、 box shadows、border radius、noise textures、CSS gradients の4つのセクションを備えたマルチジェネレーターWebサイト。

Enjoy CSS

Enjoy CSS web app は、Webビジュアル開発環境のよう!ビックリ!しかし、私のような素人がこれを使いこなすのは、逆に難しいかもしれない。

Flexy Boxes

Flexbox に特化したジェネレーター。私のように、Flexbox の基本を理解するのに苦労しているなら、Flexy Boxes が役立ちそうだ。

LayerStyles.org

こちらもWeb上のビジュアル開発環境といったところ。これもすごい!触るだけで楽しくなっちゃう。PhotoshopユーザーはLayerStylesが大好きだとか。アドビ製品を使用している人なら馴染みのあるレイヤースタイルダイアログが使用されているのだ。

コードは、画面の左下にある動的に更新される「CSSコード」ビューアーからコピーできる。

参考URL

https://www.hongkiat.com/blog/css-code-generator-web-apps/

https://www.sitepoint.com/10-best-css3-code-generators/

最後に

CSSは難しいですね。私が主婦業&育児に明け暮れている間、CSS3が登場し Flexbox も現れました。少しは使いやすくなたのかと思いきや、レスポンシブ対応が入ってくると、なかなか一筋縄ではいかない印象です。

Webアプリの進化はすごいです。しかも無料。ありがたくツールを使いつつ、私自身のCSSへの理解も深めて・・・行くのか?(笑)

もし他にも素晴らしいツールがあったら、共有してもらえると嬉しいです!

モチベーションアップ 
ブログランキング・にほんブログ村へ
PVアクセスランキング にほんブログ村

スポンサーリンク