Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: GridLayout

[WordPress] 30 Grid-Based WordPress Themes – グリッドレイアウトされたワードプレス用テーマ

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

グリッドレイアウトされたワードプレス用のテーマまとめ記事。960.gsのようなCSSフレームワークを元に制作されたものもあれば、ウィンドウサイズによってボックス要素が動いて自動でレイアウトの変わるタイプのものもあります。ワードプレスのテーマとして配布されているので、基本DLしたファイルをアップして適用するだけでオッケー。グリッドレイアウトやCSSフレームワークの導入にありがちな敷居の高さ(実際はそうでもないけど)も感じません。SHAKEN AND STIRRED THEMESとかを見てると(ウィンドウサイズを変えるとレイアウトが動きます)、ウェブにおけるレイアウトってなんだろうとか色々考えちゃいます。機能性と情報のために、決して主張せず奉仕するデザイン。このへんが印刷とWebが決定的に性格を異にするポイントだよなーとか思います。

[CSS FRAMEWORK] Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks – リキッドレイアウトやエラスティックレイアウトに対応したCSSフレームワークやHTMLテンプレート

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

リキッドレイアウトやエラスティックレイアウトに対応した、CSSフレームワークやHTMLテンプレート、ジェネレーターをまとめた記事。くくりがかなり大きいので、その分様々なサイトが紹介されています。いわゆるグリッドレイアウトのためのフレームワーク類が記事の中心です。自分がこの中で好きなのは、960 GridSystemを元に制作されたVariable Grid System。960gsはテンプレートそのもの以外にも、同梱品のPSDがなかなか優れているので、デザインお越しの際に利用してます。こうしたフレームワークを基礎として制作すると、自然とIEでのレイアウト崩れなどが起きづらくなるのでオススメ。

[GRID LAYOUT] 10 Really Outstanding and Useful CSS Grid Systems – グリッドレイアウトのためのCSSフレームワークまとめ

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

グリッドレイアウトを簡単に行うための、CSSフレームワークが集められた記事。CSSライブラリで有名どこと言うと、俺的には960 GridSystemとかBlueprintあたりかなーという印象なのですが、当然どちらも紹介されてました。これ系のライブラリって作業工数を減らす事も大事だけど、レイアウトのコーディングを規格化するという点にも意味があるような気がします。あと960GSに同梱されてるPSDはなかなか使い勝手が良くエキサイティングです。

[GRID LAYOUT] A Brief Look at Grid-Based Layouts in Web Design – グリッドレイアウトの作例とツール

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

ウェブにおけるグリッドレイアウトのためのツールと、クールな作例の紹介記事。紹介されている作例がなかなか素晴らしく、「あーこのレイアウトもグリッドレイアウトされてるんだ」とか思いながら読んでました。ちなみに記事内で紹介されている960GridSystemですが、自分もよく使います。同梱のPSDファイルがなかなか秀逸です。

[GRID LAYOUT] Ultimate Guide To Grid-Based Web Design: Techniques and Tools – グリッドレイアウトに関するテクニックとツール

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

グリッドレイアウトに関するテクニックとツールが紹介されています。グリッドレイアウトを導入したサイトの好例なども交え、概要からリソース、ツールとして機能するサイトの紹介までされてます。この記事で知った1KB CSS Gridというサイト、なかなかホットです。カラムの数と1カラムのWidth、マージン部のWidthを指定するだけで、それに応じたCSSを生成してくれます。あと個人的に好きなグリッドシステムである960gsなんかもナイス。こうしたグリッドレイアウトのツール類って、汎用フレームワークよりも自家製のフレームワークの方がイイ場合もあるので、使いどころが難しいと言えば難しいんですが。

[WEB DESIGN] 15 Extremely Useful CSS Grid Layout Generator For Web Designers – グリッドレイアウトを行う上での便利なジェネレーター

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

グリッドレイアウトを行う上での便利なジェネレーターサイトが15個紹介されてます。世の中には整理整然としたものを好む人とそうでない人がいますが、グリッドレイアウトは結局のところ骨格の部分における制作手法なので、カオティックなレイアウトにも対応できると思います。個人的にはVariable Grid Systemあたりがオススメ。