[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラム:phpspot開発日誌
Draggable Image Boxes Grid | Codrops ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラムのダウンロードができます。 Flashを使わずにここまで出来るのは素晴らしい限り。画像をクリックした後のアニメーションも良い感じです。 デモページ ギャラリーサイトをやるなら、これでやってみたいと思ってしまうようなハイクオリティなギャラリープログラムでした。 チュートリアル形式でソースコードの解説も行われているので勉強にもなります 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
