タグ

グリッドに関するbamboo_nのブックマーク (2)

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

    有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基的にフリーで使用できるもの中心でまとめていますが、商用利用

    グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
  • レイアウト作りを簡単にしてくれるCSSグリッドシステム

    CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

  • 1