スマートフォンサイト作成の参考になるギャラリーサイトのまとめ
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありましたが、内容的には似ているので、更新頻度や使いやすさなどを基準に選びました。 iPhoneデザインボックス 画像が大きく見やすいです。個別ページでは画像も多くPCサイトとの比較もあってとても使いやすいです。カテゴリもしっかりしています。 iPhoneデザインアーカイブ 掲載サイト数が多く、更新頻度もかなり高いです。 スマートフォンサイト集めました。 すっきりしたデザインで見やすいです。カテゴリも業
[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
[JS]ごく普通の画像を立体的にスライスしてアニメーションで切り替える画像ギャラリー -Slicebox
デモページ：垂直スライスでウェーブ状 Sliceboxの実装 HTML 画像をdiv要素で内包します。 <div id="sb-slider" class="sb-slider"> <img src="images/1.jpg" title="Creative Lifesaver"/> <img src="images/2.jpg" title="Honest Entertainer"/> <img src="images/3.jpg" title="Brave Astronaut"/> <img src="images/4.jpg" title="Affectionate Decision Maker"/> <img src="images/5.jpg" title="Faithful Investor"/> <img src="images/6.jpg" title="Groundbr
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad - かちびと.net
iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言えませんが、こういうサイトは覚えておくと 後で困らないですよね。 iPadのアプリを制作しているデベロッパーさんはご覧になってみてはいかがですか。大きな画像なのでイメージもしやすそうです。 Tumblrで作ってるんですねー。１カラムでダイナミックに表示してくれています。どれもクオリティの高いものばかり。 ずらーっと並べてくれてます。 お盆休みだったり、まだ明けたばかりなのでかるーくインスピレーション向上させてみるのも良いのでは。 Landing Pad
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery - かちびと.net
ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要があり ましたが、ppGalleryは一回開けばあとはサムネイルで 好きな画像に飛べるのでLightboxスクリプトの中でも イメージギャラリーに向いてそうです。 さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。 現在、上記のようにGoogleストリートビューで原爆ドームの外と内を見ることが出来るようになっているようですのでチェックしてみてください。 では本題に戻ります。「Lightbox内にサムネイル
お手軽WordPress Tips：プラグインを使わず、少しのコードで「固定ページ」にページ送り可能なポートフォリオページを作る - かちびと.net
出来なくても困らないけど出来たら出来たで ちょっと嬉しいシリーズです。個人的には結構 地味な実装が好きなのでちょっと多用しそう。 明らかにWeb屋さんが多いともいますので、 ポートフォリオと題名には書きましたけど、 要は固定ページでギャラリーを手軽に作ろう、 という話。 普通にアーカイブファイルを条件分岐で、とかでも出来るんですが、固定ページを使うと実装がかなり楽だったのでこれはこれでアリかなと思いました。 とりあえずコードです。 <?php $num_cols = 4; // カラム数 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // ページネーション $args = array( 'posts_per_page' => 16, // 1ページに表示するポスト数 'cat' => 0, // 表示させたい
[JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White
カラー画像を白黒のグレースケール画像に自動変更して表示する画像ギャラリーのjQueryのプラグインを紹介します。 デモページ：マウスホバー（2番目）でカラー表示 Black and Whiteの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js"></script> <script src="js/jQuery.BlackAndWhite.js"></script> HTML 画像を内包するa要素に「class="bwWrapper"」を加えます。 <ul id="wrapper"> <li><a href="#" class="bwWrapper"><img src="files/Hydrangeas.jpg" width="300" height="225" /></a></li> <l
[JS]グリッドに沿ったアニメーションが面白い、HTML5ベースの画像ギャラリーのスクリプト -Mosaiqy
サムネイル画像がグリッドに沿って縦横にアニメーションでスライドする画像ギャラリーを実装するjQueryのプラグインを紹介します。 画像はFlickr, Instagramなどを利用することも可能です。 サムネイル表示を4x3にしたデモ Mosaiqyの利用可能なサービス 画像は共有サービスのものを利用することもできます。 Flickr Flickrのデモ Instagram Instagramのデモ Panoramio Panoramioのデモ Mosaiqyの実装 実装の準備 IEのHTML5用と必要な外部ファイルを準備します。 HTML5を使用するにあたっては、「HTML5 boilerplate」を参考にしてください。 <!doctype html> <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
全画面をダイナミックなイメージギャラリーとして使う事が出来るjQueryプラグイン・JQUERY.MB.BGNDGALLERY
全画面をダイナミックにイメージギャラリー として使えるようにするjQueryプラグイン JQUERY.MB.BGNDGALLERY。同じ ようなライブラリは沢山あるので選択肢 の一つとして覚えておこうかなと思いま す。Flikcrからも流せるみたいです。 インパクト合っていいですねー。個人的にはこういう写真の見せ方が一番好きです。良い写真をコンテンツとして持っているならそれをアピールしない手は無いですよね。ただ、このライブラリの作者さん、IEが嫌いみたいで・・・まぁそんな感じです。 ナビボタンによって画像が切り替わります。縦にアニメーションスライドするタイプとフェードするタイプの2つがサンプルとして用意されていますよ。 Flickrから読み込んだりも。 $.mbFlickr.flickr_api_key="f40779ab07dd09e5890f48e3618296b3"; $.mbFli
弾痕1万発のポルシェ
ポルシェ見るだけでムラムラッとくる人には一服の清涼剤かも！ 冷却システムもろともエンジンが死んだポルシェ911。修理代に2万ドル（160万円）もかけてらんないよと考えたオーナーが、非営利団体にこれを寄贈しました。その営利団体とは... 銃の権利を守る｢Commonwealth Second Amendment（Comm2A）｣！ 寄贈後の末路を映像でご覧ください。 蜂の巣になるなる。ポルシェにクイッと割り込まれて我慢○年、一度これをやってみたかった！ ...という気持ちがこもってますね、わかりますわかります。 因みにこの非営利団体。｢マサチューセッツの銃取締法に健全さを取り戻す｣ための活動を行っているんですね。こうしてわざわざフェイクの｢駐禁ゾーン｣にポルシェ911を停めて撃たせる辺りにシャーデンフロイデ（ひとの不幸を見て喜ぶ趣味）がなきにしもあらずですが。 コラ、なんてもったいないことす
iPhoneでも表示可能 HTML5のスライドショーをFlickrやPicasa、Facebookのアルバムから作れる「SlideMyPics」 - WEBマーケティング ブログ
自分が撮りためた画像を、画像共有サイトに投稿し、さらに自分のサイトでも共有するという機会が増えていますよね。 しかし、多くのスライドショーはFlashで作られていることから、iPhoneなどではスライドショーが表示されません。 そこで今回は、iPhoneでも表示可能なHTML5のスライドショーを、画像共有サイトの画像で作れるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! HTML5のスライドショーを画像共有サービスのアルバムから作れる「SlideMyPics」 「SlideMyPics」は、HTML5のスライドショーを、FlickrやPicasa、Facebookなどのアルバムから作成できるサービス。 FlashではなくHTML5なので、iPhoneなどの端末を気にするこ
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
まるで幽霊船 忘れ去られた軍艦の船内を冒険（ギャラリーあり）
冒険好きはいたるところにいるものでして。 米国、カリフォルニア州にあるサスーン湾には何十年もの間たくさんの軍艦がその存在を忘れ去られたかのようにとめっぱなしにされています。これらの軍艦達はいくつもの戦争をくぐりぬけてきたもの、第二次世界大戦、朝鮮戦争、ヴェトナム戦争、イラクを破ったデザートストーム、活躍した場は世界各所にいたります。ここの軍艦は少しづつですがレッカーされ廃棄処分にされます。今までにすでに15艇がレッカーされ、2017年までには完全にサスーン湾からその姿を消すと言われています。 写真家Scott Haefnerさんがサスーン湾にとめられっぱなしになっている軍艦内に友人数人と乗り込んで、内部の様子を写真に収めてきました。もちろん、リスクを犯して秘密で船内に侵入するわけですから、計画は数ヶ月かけて企てられました。時間でまわってくるパトロールの目を盗み侵入、1度侵入すると戦艦内に数
立体感がいい感じの３Dギャラリー作成JSチュートリアル:phpspot開発日誌
How to make a 3D gallery using javascript ? Script Tutorials 立体感がいい感じの３Dギャラリー作成JSチュートリアル。 奥行きのある空間内を画像がダイナミックに動くギャラリーを作るチュートリアルです。 パッケージのダウンロードとデモが体感できます。 覚えておくとこうした演出がほしい場合にすぐ実装できそうですね。 最新のブラウザでみれば動きもわりとなめらかでストレスになりません。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 HTML5を使ったサイトをまとめたギャラリーサイト色々 超カッコいいApple風スライドショーギャラリー作成チュートリアル
CSS3をフル活用した立体的な画像ギャラリー作成デモ:phpspot開発日誌
Create a CSS3 Image Gallery with a 3D Lightbox Animation - Inspect Element CSS3をフル活用した立体的な画像ギャラリー作成デモ。 一見、角丸に綺麗にデザインされたギャラリー。これだけでもいいのですが カーソルを合わせると立体的に浮上がります。 更にクリックするとLightBoxエフェクト。 単純に使うだけでなく、中身を解読すれば、CSS3についての知識が深まりそうです。 関連エントリ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 超カッコいいApple風スライドショーギャラリー作成チュートリアル スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル - かちびと.net
Engadget | Technology News & Reviews
