CSSで複雑なグリッドデザインも簡単に作成できるWebサービス 『CSS Grid Generator』

CSSで複雑なグリッドデザインも簡単に

作成できる「CSS Grid Generator」

マウス操作で簡単にColumnやRowを

設定して画面上で自由に作成が可能です。

cssgrid3

CSS Grid Generator リンク先

cssgrid5

Column数、Row数を設定したら

自由にドラッグしてグリッドをデザインして

いきます。

こんな複雑なグリッドデザインも簡単に

CSSコードで出力が可能です。

cssgrid2

出力されるコードはこんな感じで

1から自分で書くと大変ですが、

画面上で簡単にグリッドをレイアウトできます。

cssgrid1

DIV要素の番号で区切ってくれるので

分かりやすくなっています。

グリッドデザインに挑戦しようかなと思っている方は

一度使ってみては如何でしょうか。

レイアウトの勉強などにも良いかも知れません。

  • コメント: 0

Web制作現場に便利なbox-shadowのCSSを紹介しているWebサービス 『CSS Scan』前のページ

画像挿入で大きくなったExcelファイルをサクッと圧縮するWebサービス 『Excelをオンラインで圧縮』次のページ

関連記事

  1. Web制作ツール

    美しいグラデーションをたくさん紹介しているWeb制作に便利なWebサービス 『Gradient Ba…

    美しいグラデーションをたくさん紹介しているWeb制作に便利なWeb…

  2. Web制作ツール

    Web制作に便利!!ボタンやタイトルロゴが作れるネットサービス 日本語にも対応しています CoolT…

    Web制作に便利なタイトルロゴを作ったり、ボタンを作ったり出来るネット…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP