【総まとめ】2018年特に印象的だった世界のベストWebデザイン厳選51個 - PhotoshopVIP

2018/12/26 85 users PhotoshopVIP マウスカーソル ホバーエフェクト

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たくさん登場しました。 サイトに動きを加えるマイクロインタラクションやホバーエフェクト、一般的なグリッドレイアウトを無視したり、マウスカーソル... 続きを読む

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つのグリッドアイテムが表示されています... 続きを読む

[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout | コリス

2015/08/21 92 users コリス マルチカラム スティッキー CSS ブッダ

最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人に... 続きを読む

軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート

2015/07/27 62 users Skeleton グリッドシステム イレギュラー 横幅 羽根

「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじ... 続きを読む

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

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

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

Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用 － Publickey

2013/08/20 90 users Publickey Bootstrap CSS リリース 採用

複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザ... 続きを読む

レスポンシブなグリッドだけを提供する軽量スタイルシート「fitgrid」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/05/26 61 users グリッド タブレットサイズ ソフトウェア エンジニア ジレンマ

fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。 デスクトップサイズでの表示。 1〜4列で細かく制御できます。 タブレットサイズ。幅が狭く... 続きを読む

UIトレンドの研究に！海外のユニークなUIのWebデザインまとめ11個 - W3Q

2013/02/18 52 users UIトレンド パララックス W3Q 研究 海外

【海外のユニークなWebデザイン】 　Webデザイン界隈では毎年、実験的なユニークなUIのWebサイトが次々と現れ、その中のいくつかが「トレンド」として爆発的に広まっていく傾向にあります。グリッドレイアウトやパララックス、レスポンシブWebデザインなどなど。それらはすべて海外で生まれ日本にやってくるのです。 　次のトレンドを見極めるためには、海外のユニークなWebサイトを研究することが一番の近道で... 続きを読む

グラフィカルな写真コンテンツを効果的に見せる!ランダムな配置のグリッドレイアウトのサイトデザインをまとめました | Webデザインクリップ

2012/12/05 73 users パネル 従来 配置 ランダム Webデザインクリップ

最近海外のサイトデザインで、ランダムなブロックレイアウトのデザインをよく見かけます。 シンプルでいながら絶妙なバランスで並べられたパネルの中にコンテンツが入れられており、従来のグリッドレイアウトとは少し違っており、サイトの新しいデザインの様な印象を受けます。 一見シンプルなコンテンツを印象的に見せたいサイトや、ファッション系サイトなどグラフィカルな写真を見せたいサイトではJSなどでダイナミックな動... 続きを読む

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

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

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

レスポンシブなグリッドレイアウトを実装できるjQueryプラグインまとめ6つ - コメンター

2012/10/24 75 users コメンター Facebookページ クリエイター シェア

コメンターとは コメンターは、クリエイターの気になるサイトやページをシェアして、匿名ならではの自由なコメントをみんなで楽しむコミュニティです。 このページをシェア 上記リンクをブックマークツールバーに登録することで、閲覧中のサイトをその場でシェアできます。 Facebookページ 2012年8月にオープンしたコメンターのFacebookページでは、クリエイター向けの最新Web/IT情報をどこよりも... 続きを読む

[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist | コリス

2012/09/03 51 users Twitter Facebook YouTube コリス

ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スク... 続きを読む

Photoshop VIP どんなWebサイト制作にも対応、Photoshopでグリッド、カラムガイドラインを作成する方法

2012/08/10 59 users グリッド Photoshop Photoshop Vip

Home　>　 チュートリアル　>　Webレイアウトチュートリアル　>　どんなWebサイト制作にも対応、Photoshopでグリッド、カラムガイドラインを作成する方法 Photoshopを使ってWebデザインを制作するときに、まず必要となるのがピクセル単位で引かれたグリッドガイドラインです。 グリッドレイアウトを利用することで、コンテンツをすっきり見やすく並べるだけでなく、デザイン作業を直感的に行... 続きを読む

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

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

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

グリッドレイアウトなレスポンシブWebデザイン対応のテンプレートを手軽に生成出来るジェネレーター・Responsify - かちびと.net

2012/06/01 59 users スターターキット テンプレ テンプレート net 操作

オンラインで手軽にレシポンシブWeb デザイン対応のテンプレを生成できる というジェネレーター・responsify.it のご紹介。グリッドレイアウトにも 対応可能です。 この手のはいくつか同じツールがありますけど、これはかなり使いやすい印象でした。操作もシンプルですし、スターターキットを生成するのに使えそうです。 Responsify レスポンシブWebデザイン対応のテンプレートを手軽に生成出... 続きを読む

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

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

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

スライドショーやグリッドレイアウトなど、日本製の国産jQueryプラグインまとめ7つ - W3Q

2012/01/17 68 users スライドショー JavaScript W3Q 日本製

[JavaScript] スライドショーやグリッドレイアウトなど、日本製の国産jQueryプラグイン 続きを読む

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

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

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

全体をドラッグで動かせるグリッドレイアウトのイメージギャラリーをjQueryで構築するチュートリアル - かちびと.net

2011/10/09 96 users iPhone jQuery Codrops チュートリアル

画面いっぱいに広がったグリッドレイアウト のイメージギャラリーをドラッグで動かす 事ができるコンテンツをjQueryで実装する 為のチュートリアルです。かなり良く出来 てます。iPhoneでも一応可能でしたので 工夫すればスマートフォンにも使えるかも。 Codropsのチュートリアルが相変わらず素敵なのでメモがてら。画面全体に広がったグリッドレイアウトのイメージギャラリーを丸ごとドラッグで動かせる... 続きを読む

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

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

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

グリッドレイアウトのクールなギャラリーサイトを構築出来るWordPressテーマ・Grid Locker - かちびと.net

2011/04/20 98 users ダーク 沢山 クール net メモ

見かけたことのないWPギャラリー テーマがあったのでメモ。美しい グリッドレイアウトとダークでクール なデザインが印象的です。いろいろ 多機能で完成度の高いので、この まま使用しても全然問題なさそう。 ギャラリー用のテーマは沢山ありますけど、Grid Lockerも他のテーマに負けず劣らず完成度が高いです。 Grid Locker ブラックカラーをベースとしたクールで重厚感あるデザインです。可変す... 続きを読む

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 ... 続きを読む