これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat
Adobe製超軽量レスポンシブフレームワークTopcoat デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。 Topcoatとは TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。 jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。 ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。 シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。 流行りのフラットなデザイン ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプル
[JS]スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させるシンプル高性能超軽量スクリプト -Sticky-kit
ユーザーがスクロールした際、指定した要素をぴたっと貼り付けたように指定範囲に常に表示させるスティッキー用のjQueryのプラグインを紹介します。 実装は非常に工夫されており、シンプルかつ高性能、しかも1.8kの超軽量！ 一行の記述で、複数の要素を異なる範囲に表示させることもできます。 複数の要素を異なる範囲にも貼り付けたデモ Sticky-kitの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/jquery.sticky-kit.js"></script> <
[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty
2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。 ↓はただのキャプチャ画像なので動作しません。 TwentyTwenty TwentyTwenty -GitHub TwentyTwentyのデモ TwentyTwentyの使い方 TwentyTwentyのデモ デモはスクリプトのページに大きく掲載されています。 モダンブラウザをはじめ、スマフォ・タブレットでご覧ください。IEは8+で。 オプションでオーバーレイのパネルを設定しています。 TwentyTwentyの使い方 Step 1: 外部ファイル 「jquery.js」とプラグイン「event.move.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript"
ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」:phpspot開発日誌
Box Lid Menu by jimjh ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」。 次のようにページが傾いてメニューが現れるというシンプルながらカッコいいエフェクトが作れます。 対応ブラウザ（Safari等）で見てみて下さい。 こういう地味な3Dエフェクトは今後、どんどんサイトで使われるようになってきそうですね。 関連エントリ 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 WebGLを使った3Dマップ描画エンジン「Cesium」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
色々なWebサービスの会員登録画面まとめ - no web service no life
多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて
商用利用無料、シンプルなデザインの天気のアイコン素材（ベクター） -Simon Lockyer
ソリッド版 素材のフォーマットはベクター2種です。 .ai .eps 利用にあたっては、詳細が書いてなかったのでメールで問い合わせしたところ、個人でも商用でも無料で、寄付をしてくれたら嬉しい、とのことです。 気に入った方はページ下にある寄付から！
費用対効果540%！ いかに安く新規顧客を獲得するか！？ - まつエクサロンって赤字に絶対ならなくないですか？
今回のテーマは、 「いかに広告費用を抑え、新規顧客を獲得するか？」 うちで経営しています、まつエクサロンの実例を出しながら、考察していきますね。 まー、毎度毎度の手前味噌な実例ですが、飽きずにお付き合い頂ければなと。 うちのまつエクサロンの広告費は33,000円。※2010年8月実績 出稿先も4箇所と少ないのですが、実はどれも費用対効果の高いものばかりなんです。 今回は、それらを全て紹介してしまいますので、ぜひ参考にされてみてください。 たぶん、自店舗で出している費用対効果の高い広告を教えているとこは、あまりないと思うので。 最近の広告の流れ 広告というと、新聞、雑誌、テレビ、ラジオなどのオフラインから、ＷＥＢのオンラインと、出稿対象は数多ありますが、今回はＷＥＢに絞っていきます。これは、最近の広告費の動きが圧倒的にＷＥＢ優勢になっている事と、費用対効果を高めようとすれば、ＷＥＢ広告を無視
【WordPress】WordPress 3.6 の変更点をまとめてみる | バシャログ。
こんにちは Latin です。 WordPress 3.6 日本語版が正式にリリースされましたね。 早速勉強がてら、少し触ってみました。 今回は実際にどこがどう変わったのか、簡単にまとめてみようかと思います。 デザイン 新しいデフォルトテーマ「twentythirteen」 モダンアートをイメージした新しい1カラムテーマ。 コンテンツによりフォーカスしたものになっていますね。 もちろんレスポンシブ対応。 フォントベースのアイコン「Genericons」 Webフォントベースのアイコンが用いられています。 Genericonsサイト http://genericons.com/ カスタマイズ 投稿フォーマットやセマンティックマークアップなど、最新のテーマ機能に対応。 WP 3.1以降に導入された投稿フォーマットは、カスタマイズに使う際のメタ情報（video や asideなど）の事を指します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使ってWin8のMetroライクなUIを実装・「Metro JS」
iOSスタイルのヘッダーが作れるjQueryプラグイン「Stacks」:phpspot開発日誌