CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう

2023/09/27 221 users 全ブラウザ 新時代

TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 → CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する https://zenn.dev/moneyforward/arti... 続きを読む

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 | TechAcademyマガジン

2016/12/23 211 users TechAcademyマガジン デザイン事例 理由 紹介

本稿は、 Design School Canva の ブログ記事 を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。 グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。 ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にと... 続きを読む

ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ - GIGAZINE

2014/04/02 536 users GIGAZINE 格子状 結論 流行 UIデザイン

「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear F... 続きを読む

印象に残る！斜めの要素をうま〜く取り入れているサイトまとめ

2014/01/21 25 users 要素 印象 サイトまとめ ミニマル バンクーバー

日本のみなさん、こんにちはぁ！バンクーバーに住んでいます、のび太です。 最近いろんな種類のWebデザインが流行っていますよね〜。レスポンシブ、フラット、ミニマル、フル画面、パララックスデザインetc。 その中でも僕が今一番注目しているのが斜めグリッドデザイン（英語だとDiagonal Grid Design。たぶん…）。スタイリッシュで強く印象に残ります。そして何と言っても、めっちゃカッコいい！ ... 続きを読む

グリッドデザインのHTML/CSSを簡単に作れるサイト「3×4 Grid Builder」 : ライフハッカー［日本版］

2012/06/12 63 users CSS ライフハッカー HTML さい ドラッグ＆ドロップ

Webツール , デザイン , 趣味 グリッドデザインのHTML/CSSを簡単に作れるサイト「3×4 Grid Builder」 2012.06.12 23:00 「3×4 Grid Builder」はグリッドデザインを構成するHTML/CSSを簡単に作れるサイトです。ドラッグ＆ドロップでブロックを配置させるだけで簡単に作れます。最近このようなブロックを並べたようなデザインが流行ってますので、サイ... 続きを読む

iPhoneなどのスマートフォンに最適化されたWordPressテーマ「iPhonsta」などを配布するサイト「WPSHOWER」 - GIGAZINE

2010/08/16 246 users GIGAZINE iPhone jQuery ほか テスト済み

WordPress 3.0との互換性ありで、各種タッチスクリーンデバイスでもテスト済み、なおかつ無料で利用できるクールなテーマがこの「iPhonsta」で、ほかにもjQueryを駆使したオンラインマガジンやポートフォリオ向けの「Imbalance」やグリッドデザインを使ってできるだけ軽くした「Paragrams」が配布されています。 ダウンロードは以下から。 iPhonsta Wordpress ... 続きを読む

グリッドデザインに使えるツールいろいろ | DesignWalker

2010/05/11 520 users DesignWalker グリッド DESIGN レイアウト

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか？ ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ！ 今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。 Grid Style In Modern Web Design: Showcase and Resources 美しいグリッドデザインのサイトがたくさん集められ... 続きを読む

デザインの参考にもなるWordPressのテーマ30選 -2009年2月 | コリス

2009/02/03 327 users コリス Demo 細部 ナビゲーション WordPress

最近リリースされたものを中心とした、細部までしっかりとデザインされたWordPressのテーマ30選＋αです。 The Stars (demo) しっかりしたグリッドデザインを採用、打ち出しやパネルやナビゲーションがセ [...] 続きを読む

ページの幅960pxを基準にして、設計するグリッドデザイン | コリス

2008/03/25 461 users コリス 解像度 Grid System モニター 数字

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12,... 続きを読む