CSSグリッドレイアウトのコードを生成できるツール「Griddy」

 
CSSグリッドレイアウトのコードを生成できるWebサービス「Griddy」の紹介です。プレビューを確認しつつエレメントの増減やカラムの調整を行えますので勉強する意味でも便利なツールです。もちろんコードも生成されるのでコピペで活用できます。

Griddy



  • 10年前の有名サイトを振り返ることができる「Ten Years Ago」
  • ワールドカップのユニフォームのパターンをまとめた「World Cup in Pattern」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
RELATED POSTS
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 導入しておきたいWordPressのおすすめプラグイン
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで作成する吹き出しとデザインのアイデア