CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い | Rriver

2018/02/21 106 users Rriver Repeat minmax CSS Grid

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのが repeat() と minmax() です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけで メディアクエリなしでもレスポンシブなレイアウト が実現できます。 今回はその repeat() で使える auto-fill と auto-fit という値につい... 続きを読む

手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」 | Webクリエイターボックス

2017/04/16 112 users CSSグリッドレイアウト Webクリエイターボックス 複数

先日公開した記事「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「 Griddy 」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ Griddy のサイトを開くと4つのグリッドアイテムが表示されています... 続きを読む

グリッドレイアウト採用時に便利なjQueryプラグイン 20 | NxWorld

2013/11/11 139 users NxWorld Pinterest Behance 箇所 印象

有名どころだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。基本的な動きは同じよ... 続きを読む

レスポンシブWebデザイン対応のCSSをカラム数やマージンを指定してダウンロードできる・34Grid - かちびと.net

2012/11/03 113 users マージン CSS カラム数 スパマー net

昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 34Grid グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などを... 続きを読む

黄金比を取り入れたグリッドレイアウトのWebデザインを構築する為のテンプレートやアクションなどの補助キット・The Golden Grid - かちびと.net

2012/06/06 159 users psd Photoshop 960グリッドシステム 黄金比

黄金比を取り入れたグリッドレイアウト のWebデザインを作る際のPhotoshopや Fireworks用テンプレや、PSアクション などがセットになったデザインキット・ The Golden Gridのご紹介。アクション が便利そうでした。 黄金比を取り入れたグリッドレイアウト用のPSDやFw用テンプレとかアクションがセットになってるやつです。グリッドレイアウトは960グリッドシステムに準じてい... 続きを読む

Pinterestのようなグリッドレイアウトが組めるフリーのWordPressテーマまとめ4つ - W3Q

2012/04/18 113 users Pinterest WordPressテーマ W3Q

[WordPress・CMS] Pinterestのようなグリッドレイアウトが組めるフリーのWordPressテーマ 続きを読む

CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと. net

2012/01/09 329 users Masonry CSSジェネレーター CSS パズル レンガ風

3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと... 続きを読む

グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう - かちびと.net

2011/06/03 109 users CSS フレームワーク グリッドレイアウト用 メモ 構築

なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint　cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 Grid calculator and generator 幅を... 続きを読む

CSSやHTMLを知らなくてもレイアウトやタブや角丸が作成できる -Layout Generators | コリス

2009/06/09 314 users コリス CSS タブ カラム レイアウト

CSSやHTMLを知らなくても複数のカラムやグリッドレイアウト、タブ、角丸などがオンラインで簡単に作成できるLayout Generatorsを紹介します。 Layout Generators 各ジェネレーターはプレ [...] 続きを読む

Lucky bag::blog: グリッドレイアウトのための背景画像

2006/07/19 200 users Lucky Bag Blog 背景画像

この記事が属するカテゴリー CSS web&blog ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。 Subtraction: Grid Computing… and Design Airbag - Ruler. Using a Background Image Grid to Lay Out ... 続きを読む