seteoceanoのブックマーク (675)

  • マウスオーバーでカードをシャッフルする感じのUIが作れる「Kort」:phpspot開発日誌

    Kort マウスオーバーでカードをシャッフルする感じのUIが作れる「Kort」。 次のような、カードを立体的にシャッフルするようなインタフェースが作れます。 Safari等のブラウザで見てみて下さい。CSS3とJavaScriptによって実現されているようですが、これまた新しいです。 将来的にはこうしたインタフェースは当たり前の物となっているんでしょうかね 関連エントリ CSS3ベースのオシャレな価格表作成チュートリアル CSS3でシャレオツなリストを作るチュートリアル iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」

    seteoceano
    seteoceano 2012/11/09
    マウスオーバーでカードをシャッフルする感じのUIが作れる「Kort」
  • [CSS]コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ

    HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

    seteoceano
    seteoceano 2012/11/09
    コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ
  • スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で!

    スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。

    seteoceano
    seteoceano 2012/11/09
    スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で!
  • iPad miniにインストールした個人的なオススメアプリ30個

    新しいiOSデバイスを買ったときはバックアップから復元せず、いつも新たに設定・登録を行っています。その方が新鮮な気持ちで新しいデバイスを楽しめる気がするんですよね。そんなわけでiPad miniも完全にいちから設定を行いました。どのアプリを入れようかとあれこれ考えながら(この過程も楽しいw)、とりあえず個人的に鉄板だと思うアプリを厳選して30個インストールしたので、ご紹介したいと思います。 ※ご注意 この記事で紹介しているアプリの価格は、執筆時点(2012/11/06 22:00)のものです。購入時点では値段が変更されている可能性があります。ご購入の際はAppStoreで最新の価格をご確認の上、「自己責任」でお願いします。 ユーティリティ系Digits Calculator

    iPad miniにインストールした個人的なオススメアプリ30個
    seteoceano
    seteoceano 2012/11/08
    iPad miniにインストールした個人的なオススメアプリ30個
  • 通り過ぎた時間II SIMフリーiPhoneの構成プロファイルを作成 - 伊藤浩一のITモバイルニュースリンク(W-ZERO3応援団)

    docomoが提供している公衆無線LANですが、その場所にいくと自動で接続するように構成プロファイルを作ってみました。

    通り過ぎた時間II SIMフリーiPhoneの構成プロファイルを作成 - 伊藤浩一のITモバイルニュースリンク(W-ZERO3応援団)
    seteoceano
    seteoceano 2012/11/08
    通り過ぎた時間II SIMフリーiPhoneの構成プロファイルを作成
  • コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid

    画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("

    コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
    seteoceano
    seteoceano 2012/11/08
    コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
  • [JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery

    単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ:スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま

    seteoceano
    seteoceano 2012/11/08
    単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
  • SIMロックフリーiPhone5でdocomo LTEを掴みました

    先日にわかに信じ難いニュース、iOS6.0.1からSIMロックフリーiPhone5がdocomo Xi(LTE)を掴むという件、実機で確認できたので報告します。 方法 設定アプリから、一般>モバイルデータ通信でデータローミングをオンにして、iOS6.0.1にアップデートするだけです。 すでに6.0.1アップデートしていたので、ちょっとコツが。iTunesから、復元ではなくアップデートを確認から行います。既にアップデートしていれば、ipswファイルは、Macの場合、ライブラリの下のiTunes/iPhone Software Updates/にあります。Optionキーを押しながらアップデートを確認をクリックして、6.0.1のipswファイルを指定します。 Option+復元ではダメでした。 以下のような環境でした。 iPhone5 GSM A1429(香港版) iOS6.0.1(iTune

    SIMロックフリーiPhone5でdocomo LTEを掴みました
    seteoceano
    seteoceano 2012/11/08
    SIMロックフリーiPhone5でdocomo LTEを掴みました
  • 任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize

    手軽で良かったのでご紹介。レスポ ンシブWebデザイン対応のサイト構築 のレイアウト確認用のjQueryプラグ インです。開発補助用になりますね。 同じツールも沢山ありますけど。。 最近ご紹介したResponsivatorを使うのでなくてもいいっちゃいいんですけど、これはこれで良かったので。 表示されているWebサイトはiframeで呼び出しているものです。上部のバーでその場でiframeをリサイズ→レスポンシブなWebサイトの表示を確認出来る、というものです。 サイズを変えた状態。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jresize.js"></script>コアとプラグインを読み込みます。 $.jResize({ v

    任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize
    seteoceano
    seteoceano 2012/11/08
    任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize
  • DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法

    INSPIRE TECH > その他 > DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法 WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。 詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。 しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。 かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。 投稿の編集

    DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法
    seteoceano
    seteoceano 2012/11/08
    DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法
  • Basic Process to Apply CSS to Your Website

    2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ!今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです! ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その7 目標:CSSでレイアウトが組める・基的な装飾ができる 必要なもの:Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル:CSSの基礎知識がある・基的なCSSが手打ちで書ける 目次

    seteoceano
    seteoceano 2012/11/08
    CSSでWebサイトのレイアウト組み+装飾の基本プロセス
  • NTTドコモ、Galaxy Note II SC-02Eの予約受付を11月9日に開始、発売予定日は11月16日(更新:発売日が決定) | juggly.cn

    seteoceano
    seteoceano 2012/11/06
    NTTドコモ、Galaxy Note II SC-02Eの予約受付を11月9日に開始、発売予定日は11月16日
  • iOS6で連絡先に追加されてしまったFacebook友達情報・カレンダーを整理する方法[Tips] - KAMPLOG

    iOS6ではFacebookが統合されたことによりデフォルト設定ではFacebookの友達情報がiOSデバイスの連絡先に勝手に取り込まれてしまう。言い換えれば「Facebookのお友達のメールアドレスや電話番号が自動的に同期されます」ということにはなるのだが。 アップル – iOS 6 – まったく新しいマップ、Siriの新機能、Facebookとの統合。 私も気がつけば400人以上の方々とお友達になっていたので、iOS6にアップデートした後、連絡先を何気なく開いて愕然としてしまった。 連絡先は必要最低限の情報にとどめたいし、Facebookの情報はFacebookの中やアプリで確認、利用すればいいと思っているので連絡先からは消そうと思ったのだが、400人以上の情報を手で一つずつ消すのなんて面倒くさくってしようがない。 しかし、それをうまく、しかも一発で整理できる方法を見つけたのでご紹介し

    iOS6で連絡先に追加されてしまったFacebook友達情報・カレンダーを整理する方法[Tips] - KAMPLOG
    seteoceano
    seteoceano 2012/11/06
    iOS6で連絡先に追加されてしまったFacebook友達情報・カレンダーを整理する方法[Tips]
  • ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」:phpspot開発日誌

    vintageJS - add some awesome retro and vintage style to your images with the HTML5 canvas element gitHub - vintageJS ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」。 ファイルをアップするとパラメータを調整して簡単にトイカメラ風の画像が作れるサイトとライブラリです。 HTML5のCanvasを使っているのでサーバにやさしい。 あとはこれがどのブラウザでも動いてくれればと思うところですが、こうしたCanvas関連のライブラリが沢山あると将来的に便利になりそう 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン12 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」

    seteoceano
    seteoceano 2012/11/06
    ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」
  • CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」:phpspot開発日誌

    Instant Sprite - Generate CSS Sprites Instantly CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 D&D対応ブラウザ(Chrome等で)ローカルから複数ファイルをドラッグ&ドロップしてみましょう。 ドロップした時点でCSSスプライトが完成してしまいます。 2枚の画像をアップした結果。 すぐにCSSスプライトとして利用可能 要らないファイルがあったら、その場でクリックですぐ消せたりと色々便利です 関連エントリ CSSスプライト実装が誰でも簡単にできるツール「Spritebox」 CSSスプライトでカッコイイボタンを作るチュートリアル CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル

    seteoceano
    seteoceano 2012/11/06
    CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」
  • まとめて書くことができるCSSプロパティの8つのパターン

    まとめて書くことができるCSSのプロパティを集めてみました。基的な内容が多くなっていますので復習に見ていただければ幸いです。 先日は基的なセレクタの使い方について書きましたので、今度はプロパティの基ということでまとめてみました。 1. border まずはボーダーです。よく使いますね。 border-width … 線の太さ border-style … 線の種類 border-color … 線の色 これらは一括で指定することができます。

    まとめて書くことができるCSSプロパティの8つのパターン
    seteoceano
    seteoceano 2012/11/06
    まとめて書くことができるCSSプロパティの8つのパターン
  • 一日を要領よくふり返るための6つの質問テンプレート(レビュー用) | シゴタノ!

    誰かに説明する必要がない場合でも、未来の自分という他人に説明するつもりで記録に残しておくと、今の自分にもご利益があります。 「あぁ、これはそういうことだったのか」と、実はあいまいにしか理解できていなかったことや、何となく勢いでうまくいってしまったことについての原理や道理が整理できるのです。 日々の記録をつける際も、「今回はうまくいった」とか「いつもより早く終わった」といった漠然とした実感だけで終わらせずに、どのようにうまくいったのか、いつもとどこがどのように違ったのか、を具体的に記録しておくことで、未来の自分に役立てることができます。 望ましい結果にせよ望ましくない結果にせよ、結果が変わったということは、何か行動を変えたはずですから、何をどう変えたのかの記録が残っていれば、望ましい結果を再現したり、望ましくない結果を抑制したり、といったコントロールができるようになります。 ちょうどプログラ

    一日を要領よくふり返るための6つの質問テンプレート(レビュー用) | シゴタノ!
    seteoceano
    seteoceano 2012/11/06
    一日を要領よくふり返るための6つの質問テンプレート(レビュー用)
  • SIMフリーiPhone5でドコモXi通信成功 | ものがり! - 伊藤浩一のITモバイルニュースリンク(W-ZERO3応援団)

    http://tenzingumo.orz.hm/butsuyoku/3032/

    SIMフリーiPhone5でドコモXi通信成功 | ものがり! - 伊藤浩一のITモバイルニュースリンク(W-ZERO3応援団)
    seteoceano
    seteoceano 2012/11/06
    SIMフリーiPhone5でドコモXi通信成功 | ものがり!
  • デザインどや!?|海外カジノ オンラインのWEB作成

    Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー&カルーセルプラグイン、チャート&グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。

    seteoceano
    seteoceano 2012/11/05
    美しい水のPhotoshopブラシセット 35
  • WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu - かちびと.net

    カスタムメニューで追加した アイテムを条件分岐で表示、 非表示にスイッチできる、と いうWordPressのプラグイン です。コードを参考にしたの でご紹介。 カスタムメニュー周りのプラグインは仕様でもよく求められることが多いので非常に助かります。このプラグインもCMSとしてWPを利用する際に役立ってくれそう。 カスタムメニュー内のアイテムを固定ページのみ、TOPページのみ、ユーザーログイン時のみ、などの条件をつけて表示/非表示できる、というもの。 プラグインを有効化すると、カスタムメニューで追加したアイテムの下部にEnable Conditional Logicというラベルの付いたチェックボックスが表示されますのでチェックを入れればセレクトボックスも表示されます。 現時点では、決められている条件が多くはなく、変更も出来ないので実際に利用する際は少しコードを弄らせてもらう事になりそうです。

    WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu - かちびと.net
    seteoceano
    seteoceano 2012/11/05
    WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu