波打ち際や川のせせらぎの映像や音響を流すだけのシンプルなリラクゼーションサイト・calm.comのご紹介です。PC作業で疲れた心や身体の緊張が解れるかも知れません。 以前ご紹介した30分間ひたすら雨の音を流し続けるWebサービス・RainyMood.comのようなサービスです。 映像は動画をループさせてるみたいです。右下の矢印ボタンで別の風景に変更、音響もその映像にあったものに変わります。 雨の音とか 波打ち際とか 夕焼けと湖と虫の声とか 音が出ない映像や、映像が乱れるものもありますが、いろいろ選べるのは素敵ですね。iPhoneのアプリもあるみたい。今はこのサイトを利用しながら仕事してます。宜しければぜひご覧下さい。 calm.com
ページ公開前のcoming soon表示などが揃ったテンプレートまとめ「Ultimate Collection Of Free Coming Soon And Under Construction Templates」 WEBサイト制作をしていると、諸事情により公開時に全ページが揃わない、また、新サイト公開前にそのお知らせをするということも多いと思います。そんな中今回紹介するのが、ページ公開前のcoming soon表示などが揃ったテンプレートをまとめた「Ultimate Collection Of Free Coming Soon And Under Construction Templates」です。 Free Coming Soon Template | Webdesigner Lab ポップで可愛らしいデザインから、公開までの日程を楽しんでもらえるデザインまで、さまざまなテンプレー
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
MacのCodeKitでCompassを使う Compassに関するエントリーを書いていたら、「scoutとcodekitでそのうちできるようにならんかな」というツイートをいただきまました。 CodeKitにはCompassが含まれてますのでCodeKitでは可能です。(CodeKitに関してはフロントエンドの開発を加速するCodeKit :: 5509を参照してください) CodeKitのサイドにあるプロジェクトの一覧から、Compassを利用したいプロジェクトを右クリックして、「Compass」→「Use Compass on this project」を選択。 初回は確認画面が表示されますので「New Config File」を選択。 Compassの設定画面が表示されるので画象フォルダやCSSフォルダなどの設定をし「Create Config File」を選択するとCompassが
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
Edge AnimateでCSSフィルタが扱えるようになった HTML/CSS/JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。 基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。 Adobe Edge Animateについて Adobe Edge Animate ドキュメント Adobe Edge Animateは現在無料で提供されています。 タイムラインやステージ、アクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。 jQueryとAdobe製のライブラリが使用
3D オブジェクトのアニメーション ( Android OpenGL フレームワーク “Rajawali” と戯れる #08 ) Android OpenGL フレームワーク "Rajawali" と戯れるシリーズ 第 08 回目は、3D オブジェクトのアニメーションについて解説します。 Rajawali がサポートするアニメーション可能な 3D フォーマット Rajawali では下記フォーマットをサポートしています。 MD2 (*.md2) MD5 (*.md5mesh, *.md5anim) (*.md5camera は非サポート ) MD2 は QuakeII という FPS(First Person shooter) ゲームで使用されている頂点アニメーション情報を持った 3D オブジェクトフォーマットで、MD5 は DOOM3 という同じく FPS ゲームで使用されているボーンや
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応! Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード(矢印キー)での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
Colour Code http://colourco.de/ 、いいドメインだ! 使い方は簡単です。 カラーの変更 マウスの左右で、色相を変更 マウスの上下で、光度を変更 スクロールで、彩度を変更 ※スクロールはMagic Mouseじゃないとできないかも 基本操作 クリックで、カラーをロック ロックされた鍵アイコンをクリックで、ロックの解除 カラーをクリックで、保存して新しいカラーを作成 ゴミ箱をクリックで、カラーの削除 まずは、流行のサーモン(#F38268)を右上のボックスにセットしてみます。
背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのやり方です。これから新しくサイトを作る場合なんかに役立つかと思います。Retinaディスプレイは解像度が縦横2倍(面積は4倍)なので、それ専用の画像を用意しておく必要があります。ということで、以下、やり方です。 [ads_center] -webkit-min-device-pixel-ratioを使う Retinaディスプレイかどうかを判別するには「-webkit-min-device-pixel-ratio: 2」を使っていきます。例えば、通常の背景画像のロゴを指定する場合には以下のようにするとします。 #logo { width: 200px; height: 100px; background: url(images/logo.png) no-repeat; display: block; text-indent:
タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装することができるjQueryプラグイン「Swipeshow」をご紹介します。jQuery 1.8が必要とのこと。モバイルからのアクセスが増えてくる中、こういったスワイプにも対応しているプラグインはこれからますます重要になってきそうですね。 [ads_center] 使い方 まずはHTMLマークアップから。以下のようにシンプルに記述します。 <div class="swipeshow"> <ul class="slides"> <li class="slide"> ... </il> <li class="slide"> ... </li> <li class="slide"> ... </li> </ul> </div> CSSでスライドショーのサイズを指定しておきます。 .swipeshow { width: 200px;
あぁ、これは便利。ひさびさにじんわり感動した! Githubのリポジトリを見ていて「お、これは気になるけどデモページがない・・・でもforkするの面倒・・・」というシーンはよくある。 そうしたときに使えるのが5 minute forkだ。 しかも使い方がすごく簡単で、「https://github.com」を、「http://5minfork.com」に書き換えるだけだ(誰かブックマークレットはよw)。 ちょっと使ってみたが驚くほど便利である。なお、名前のとおり、5分間なにもいじらないと自動的に消去されるのも素敵である。 Githubの公式機能でもいいんじゃないか、と思わないでもないぐらい便利なので是非試してみて貰いたい。
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
ドコモ版にはもちろん、おなじみのドコモロゴがあります。 ワンセグアンテナが付いていることも、Wi-Fi版との外観上の差異となります。電源ボタンの左にあるポッチがそれです。あ、そういえばドコモ版にはNOTTVなんてものもありました。 それからソフトウェアでは、ドコモ版は、履歴ボタンでアプリの一括終了が使用できます。もちろんドコモのプリインアプリも入ってますよ。(Zと同じく無効化とフォルダ隔離でいいでしょう) XPERIAスマートフォンでは画面が小さくて恩恵を感じづらいスモールアプリですが、タブレットで真価を発揮しそうです。特にソニタブッターは便利。スモールアプリは、通知バーのボタンから呼び出せますよ。 タブレットなので、通知領域は画面右端に出てくる感じです。 10.1インチディスプレイでWUXGA(1920×1200)と大画面・高精細。なので、それに合わせた使い方が色々とできそうです。本当に
新入社員時代、もともと伝えることが得意でなかったにもかかわらず、コピーライターとして配属され苦しむ。連日、書いても書いてもすべてボツ。紙のムダということで当時つけられたあだ名は「もっともエコでないコピーライター」。ストレスにより1日3個プリンを食べ続ける日々を過ごし、激太りする。それでもプリンをやめられなかったのは、世の中で唯一、自分に甘かったのはプリンだったから。あるとき、伝え方には技術があることを発見。そこから伝え方だけでなく、人生ががらりと変わる。本書はその体験と、発見した技術を赤裸々に綴ったもの。 本業の広告制作では、カンヌ国際広告祭でゴールド賞を含む3年連続受賞、など国内外55のアワードに入選入賞。企業講演、学校のボランティア講演、あわせて年間70回以上。郷ひろみ、Chemistryなど作詞家として、アルバム・オリコン1位を2度獲得。『世界一受けたい授業』等テレビ出演多数。株式会
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」=「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
Yellow, an asset financier for solar energy and digital devices in Africa has raised $14 million series B funding in a round led by Convergence Partners with participation from the Energy Entrepreneur Fisker, the electric carmaker founded by the Danish auto designer Henrik Fisker, is gearing up to enter the Chinese market where competition is increasingly cut-throat, following in the footsteps of
@JUNP_Nです。移動のログを自動でとることができるアプリは多くありますが、Evernoteに自動保存してくれるアプリはなかなかありません。Placemeは移動ログをEvernoteに自動保存してくれる現時点での唯一(おそらく)のアプリです。 移動したログをEvernoteへ自動的にノート作成が素晴らしい!アプリをインストールして、設定をしておけばバックグラウンドで位置情報を記録。そしてEvernoteへ自動保存という素晴らしいアプリ。 移動のログを作成することができるアプリは多くありましたが、ライフログの定番であるEvrenoteへの保存が手動というアプリばかりで何のためのログの自動化なのかと本末転倒な感じがしていましたがPlacemeでそれが全て解消されました。 以下の画像は自宅周辺で起動してみた様子。マップが表示され、今いる場所が水色のマーカーがある場所です。 ログの確認のスタイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く