横並びのカラム計算に便利!ビジュアルで確認できるグリッドシステム計算ツールGridpx

Gridpx:グリッドシステム計算ツール Webデザイン便利ツール

横並びのカラム計算に便利

コンテンツの横幅とカラム数でカラム間でどのくらいの余白を開ければいいのかって瞬時に計算出来ないですよね?
それに見た感じどれくらいの余白になるのかっていうイメージも確認したいものです。

そんな時に使う便利サイトがあるので紹介します。
それがグリッドシステム計算ツールのGridpxです。

ビジュアルイメージで確認可能

コンテンツの横幅とカラム数を入力して右側にあるCalculateをクリックするだけで横並びにしたイメージが表示されます。
もうちょっと縮めたいなって時にはマージンのフォームで矢印の上と下で調整すればリアルタイムにビジュアルも変化するので便利です。

カラム内にテキストや画像も当てはめ可能

Gridpx

さらに赤枠部分ではテキストを当てはめた場合のイメージも確認することができますし、青枠のように画像URLを入力することによって同じように移動させて確認することができます。

floatでの横並びで崩れさせないためにも正確な計算は必要になってきます。
ぜひこういったサイトを活用して効率良くサイトを作成していければいいですね。

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
Webデザインに関連するテクニックやツール人気の役立つネタだけを厳選して紹介している「デザインフィードデータベース」
Webデザインの参考になるイケてるサイトを集めたギャラリーサイト「イケサイ」
PDFが劇的に圧縮される!無料・オンラインでPDFの容量を減らすSmallpdf.com
初心者必見!PHPを勉強したい方へおすすめしたい学習サイト6選
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
.htaccessや.htpasswdなどの生成してくれる「lufttools」がすこぶる使える!
好きな色や大きさにカスタマイズしたアイコンを無料でダウンロードできる「PNGify Me」が便利!
関西のWebデザイナー・クリエイター等のIT関係のセミナーをまとめてみました。
顔バレを防げてSNSのアイコンにも使えるBrickapic。簡単にレゴ風自画像が作れて便利!
ソースのストックするならこの中から!ソースコード管理・整理に便利なオンラインのスニペットツール7選
デザインのためのインスピレーションの助けになるSNS風コミュニティサイト「Dribbble」
WEB制作で無料写真素材を探すならPixabay!高品質で素敵な画像が役立ち過ぎる!
CSSのみで作られたシンプルなアイコンセットを公開している「icono」
プログラミング等を3分動画で初心者向けに動画で解説してくれる「ドットインストール」

Menu

HOME

 TOP