jQuery Masonry › Basic Examples
These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
デザインの開始 | CSSを基礎から学習 | CSS電光石火
08/10/15 ｢デザイン-ヘッダ｣追加 08/09/29 ｢フッタの作成｣追加 08/09/29 ｢メイン-右カラム｣追加 08/09/29 ｢メイン-サイドバー｣追加 08/09/29 ｢ヘッダの作成｣追加 08/09/28 ｢要素の中央寄せ｣追加 08/09/26 ｢スタイルの読み込み｣追加 08/09/26 ｢float｣追加 08/09/26 ｢ブロックとインライン｣追加 08/09/23 ｢widthとheight｣追加 08/09/23 ｢marginとpadding｣追加 08/09/23 ブラウザ対応アイコン追加 08/09/23 ｢スタイルの読み込み｣追加 08/09/19 ｢DOCTYPE｣追加 08/09/19 ｢開始前に｣追加 08/09/18 ｢始めに｣修正 08/09/18 ｢始めに｣追加 08/09/18 サイトオープン 全体図 今回よりCSSを使ったデザ
グーグルのJavaScriptツール集大成「Google Closure Tools」
2009年11月5日，Googleは自社サービス製品であるGmail，Google Maps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
夜の間だけハロウィン仕様に変化させる [ホームページ作成] All About
10月31日はハロウィンですね。 ハロウィンは夜のお祭りですし、夜の間だけウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみるのはいかがでしょうか。 以下の枠内には、ハロウィンの説明文が書かれています。 この記事を、夜8時～深夜4時の間に見ると、（以下の枠内だけ）ハロウィン仕様のデザインで表示されます。 それ以外の時間帯だと普通のデザインで表示されます。 夜の間だけハロウィン仕様に変化させる ハロウィンとは 諸聖人の祝日（万聖節）の前夜に行われる祭り。 スコットランド・アイルランドに起源を持つアメリカの祝い。 10月31日の夜に行われる。 悪魔などの扮装をした子どもたちがが「Trick or treat!」と言って近所を回る。 近所の人々は、子どもたちにお菓子などを与える。 時刻に関係なく強制的にデザインを変更させてみたい場合は以下のボタンをクリックして下さい。 ※
![夜の間だけハロウィン仕様に変化させる [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
時刻によって挨拶文を変化させる [ホームページ作成] All About
時刻によって挨拶文を変化させる朝は「おはよう」、昼は「こんにちは」、夜は「こんばんは」…のように、ホームページ上の挨拶文を、時刻に合わせて変化させてみましょう。JavaScriptを数行書くだけで簡単に実現できます。 時刻に応じて表示メッセージを変化させたい 夜にアクセスすると「夜遅くに来てくれてありがとう」、朝にアクセスすると「朝早いですね」などと、時刻に応じた挨拶文が表示されるホームページを見たことはありませんか？ このような、アクセス時刻によって変化するメッセージは、JavaScriptを使えば簡単に作ることができます。 そこで今回は、時刻に応じて挨拶文が変化するページの作り方をご紹介致しましょう。 まずは、以下のサンプルを見て下さい。 上記には、アクセス時刻によって以下のメッセージが表示されます。 00時～01時台： 夜はこれから！ 02時～03時台： そろそろ寝た方がいいんじゃ…
スクロールしても決めた位置にメニューを固定して表示します。
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 サンプルソース <HTML> <HEAD> <TITLE>スクロールしても決めた位置にメニューを固定して表示します。</TITLE> <style type="text/css"> <!-- #Layer1{ left : 50px; top : 100px; position : absolute; line-height : 25px; font-size : 17px; border-width : 1px;border-style : solid;border-color : maroon; padding-top : 5px; padding-left : 5px; padding-right : 5px; padding-botto
逆引きAdobe Spryリファレンス
このページはAdobeシステムズのAjaxフレームワークであるSpryに関するサンプルを用意しています。Spryはバージョンアップにより機能が追加されることが多くあり、また場合によっては仕様変更が行われることもあります。このページではSpryのバージョンに合わせたサンプルを用意していますが、今後、バージョンがあがった場合には、このページに掲載しているサンプルが動作しなくなる可能性があります。あらかじめ、ご了承ください。また、取り扱っている文字コードは特別な記述がない限りUTF-8となっています。掲載しているサンプルではUTF-8のBOM (Byte Order Mark) を付加してあります。BOMが付加できない場合にはSafari 2で文字化けすることがありますが、その場合にはKawa.netのサイトにある文字コード変換スクリプトを使用してSafari 2で文字化けしないようにしてくださ
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
スクロールアコーディオンメニュー - Sawa's Factory
JSライブラリを使用したメニューや、Lightboxを導入したCGI、自作 JSライブラリなどを配布しています。 スクロール（スライド）するアコーディオンメニューです。 アコーディオンメニューは色々なライブラリが開発されてますが、今回はjQueryプラグインのAccordion Content/Menu Script(ddaccordion)を利用しアコーディオンメニューを作成しました。 特徴 jQueryプラグインのAccordion Content/Menu Script（以下からddaccordionと呼ぶ）は、設定が分かりやすく簡単な上、機能は豊富。HTML&CSSでメニューを幾らでも加工できます。またCookieに開いたカテゴリを保存できる為、別のページに移動してもそのカテゴリのメニューが表示される機能があります。 ブラウザをスクロールするとアコーディオンメニューが移動する為、何
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TOKI WOKI. Scroll Clock
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About
http://hfm-kenchan.com/Lesson/log_qa/D0605211.htm
jQuery でドロップシャドウ [Javascript] All About