[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
