WEBデザインの求職者支援訓練に通っている＆アラサー女子大生ねこ太郎です♪
WEBデザインを学んで3ヶ月…サイト制作に入ったけど、なんだかよくわからなくて「コードがごちゃごちゃ><」と困っていませんか？
正直、初心者がコードをきれいに書いて一つのサイトを作るにはかなりの労力がいります。
できるだけ短時間で、簡潔にコードを書くには、【ジェネレーター】を使うのがおすすめです！
複雑なデザインが可視化しながら調整でき、コードは自動で作られるのでかなりの時短になりますよ♪
今回はCSS初心者の私が、サイト制作のときに重宝する【ジェネレーター】をまとめました。
誰でもコピペするだけで使えますので、初心者でも簡単で作業が捗りますよ〜
是非参考にしてみてくださいね★
Contents
フレックスボックス
種類が多くて混乱するフレックスボックスを視覚的に試せます。
私は始めてのサイト制作のときに、フレックスボックスがうまく行かなくてかなり時間を割いてしまったので、必ずこのジェネレーターを使って時短＆簡潔化できるようにしています。
FLEX LAYOUT GENERATOR
フレックス レイアウト ジェネレーターはcss制作の効率化と基礎的な知識のみで簡単にflexboxを組むことのできるサービスです。
suiq.jp
ローディングアニメーション
読み込み中などでアニメーションを使いたいときにはこちら
Epic Spinners
epic-spinners.epicmax.co
グラスモーフィズム
すりガラス効果をアレンジできるジェネレーターです。
Glassmorphism CSS Generator | SquarePlanet | SquarePlanet
Glassmorphism is a unified name for the popular Frosted Glass aesthetic.
hype4.academy
ニューモーフィズム
凹凸感・立体感や質感を演出できます。
Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.
neumorphism.io
ストライプジェネレーター
CSSでストライプを作成できます。線の角度や太さなども調整可能。
ストライプCSSジェネレーター | WEB GENERATOR
CSSでストライプ柄の背景を作成するためのbackgroundの設定を確認するためのCSSジェネレーターです。ストライプ・斜め斜線の背景のコードを色やサイズなどを選ぶだけで短時間で簡単に生成。
web-generates.com
セクションセパレーター
セクションを区切る線をカーブ、ギザギザ、吹き出し風などから選ぶことができます。
CSS Section Separator Generator
A collection of customizable CSS section separators, with the possibility to easily copy the code.
wweb.dev
CSSレイアウトの網羅的まとめ
https://csslayout.io/
csslayout.io
おすすめの人気WEBデザイン参考書
エムディエヌコーポレーション
関連記事
404 NOT FOUND | nekochan's
WEBデザイン勉強中のねこ太郎の忘備録
www.nekochans.site
404 NOT FOUND | nekochan's
WEBデザイン勉強中のねこ太郎の忘備録
www.nekochans.site
まとめ
以上、私が「これは使える！」と思ったCSSを忘備録的にまとめました。これからも随時更新していきますので、WEBサイト制作をより効率化したい方はぜひ参考にしてみてください！
コメント