2009年08月10日

[Webツール][CSS]簡単グリッドレイアウト The 1KB CSS Grid

The 1KB CSS Grid


いわゆる「グリッドレイアウト」用のCSSを作成してくれます。


※グリッドレイアウトとは?

グリッドレイアウトというのは、

ウェブページをいくつかのグリッド(格子)に分けて

おのおののグリッドに対して、コンテンツを配置していくことで

統一的なデザインのウェブページを作ろうというレイアウト技法です。

・・・横文字ばかりで分かりづらいですね。すいません(汗)

百聞は一見にしかず、ということで下の画像を見るのが分かりやすいでしょう。

グリッドレイアウトの例

まぁ、要はこんな感じの格子の中にコンテンツを詰めていくというわけですね。

ちなみに「3」とか「6」とかは、
「3格子分の幅」「6格子分の幅」というのを分かりやすくするためにつけてます。

幅を統一することで、統一感のあるデザインになるというわけです。


●ツールの簡単な使い方

・Number of Columns 横方向の格子数
・Column Width 一つの格子の幅(px単位)
・Gutter Width 格子の間隔(px単位)

をそれぞれ設定すると、右側に「=960px」とか幅が計算されて表示されます。

「Download」を押せば、スタイルシートと、サンプルHTMLをダウンロードできるので、あとは色々と試してみればよいでしょう。


HTMLの書き方とかは、CSSが分かる人ならサンプルのソースを見れば分かるはず。


posted by kanko at 21:17| Comment(0) | TrackBack(0) | HP作成 | このブログの読者になる | 更新情報をチェックする

[SEO][Webツール]検索順位の定点観測 Ranking Tracer

Ranking Tracer - 検索順位の定点観測

ちょっと荒削りというか、使い勝手があまり良くないのが残念。

この発想で、もう少し使えるサービスにできたら人気も出るのになあ。

そのうち時間ができたらやってみたいことの一つです。
posted by kanko at 20:58| Comment(0) | TrackBack(0) | ツール | このブログの読者になる | 更新情報をチェックする

[Webツール][モバイル]QRコード無料作成フォーム

QRコード無料作成フォーム

いまや広告や雑誌などでも普通に見かけられるようになったQRコード。

そのQRコードを自由に作れるツールです。

作り方は簡単で、リンク先のURLを入力するだけ。

また日本語やメールアドレスを入力することもできます。

ちなみにこのブログのQRコード↓

このブログのQRコード


色々と面白いので、お試しあれ。
posted by kanko at 09:13| Comment(0) | TrackBack(0) | Webツール | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。