WEBデザインの求職者支援訓練に通っている＆アラサー女子大生ねこ太郎です♪
WEBデザインを学んで3ヶ月…サイト制作に入ったけど、なんだかよくわからなくて「コードがごちゃごちゃ><」と困っていませんか？
正直、初心者がコードをきれいに書いて一つのサイトを作るにはかなりの労力がいります。
できるだけ短時間で、簡潔にコードを書くには、【ジェネレーター】を使うのがおすすめです！
複雑なデザインが可視化しながら調整でき、コードは自動で作られるのでかなりの時短になりますよ♪
今回はCSS初心者の私が、サイト制作のときに重宝する【ジェネレーター】をまとめました。
誰でもコピペするだけで使えますので、初心者でも簡単で作業が捗りますよ〜
是非参考にしてみてくださいね★
フレックスボックス
種類が多くて混乱するフレックスボックスを視覚的に試せます。
私は始めてのサイト制作のときに、フレックスボックスがうまく行かなくてかなり時間を割いてしまったので、必ずこのジェネレーターを使って時短＆簡潔化できるようにしています。
FLEX LAYOUT GENERATOR
フレックス レイアウト ジェネレーターはcss制作の効率化と基礎的な知識のみで簡単にflexboxを組むことのできるサービスです。
suiq.jp
ローディングアニメーション
読み込み中などでアニメーションを使いたいときにはこちら
Epic Spinners
epic-spinners.epicmax.co
グラスモーフィズム
すりガラス効果をアレンジできるジェネレーターです。
Glassmorphism CSS Generator | Hype4 Academy
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レイアウトの網羅的まとめ
A collection of popular layouts and patterns made with CSS - CSS Layout
A collection of popular layouts and patterns made with CSS
csslayout.io
おすすめの人気WEBデザイン参考書
エムディエヌコーポレーション
関連記事
【画像加工が便利】ブラウザ上でデザイン編集できるサービスまとめ！Photoshop・Illustrator
WEBデザイナーの基本とも言えるPhotoshopやIllustratorですが、PC動作が重くなってしまったり、いちいち開くのが面倒ではないですか？今回は画像の切り取りやリサイズなど簡単な加工をブラウザ上でできるサービスをご紹介します！
www.nekochans.site
2022.02.12
【遊んで覚える】WEBデザイン初心者におすすめのスキルUPゲーム
WEBデザイン初心者におすすめの学習ゲームをご紹介します！独学でも基礎から身につくprogateをはじめ、混乱しがちなflexboxを簡単に学べるゲーム、CSSでイラストを作れるゲームなどがありますので、ぜひ一度試してみてくださいね♪
www.nekochans.site
2022.01.25
まとめ
以上、私が「これは使える！」と思ったCSSを忘備録的にまとめました。これからも随時更新していきますので、WEBサイト制作をより効率化したい方はぜひ参考にしてみてください！
コメント