面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ

This domain may be for sale!

個人的に好きなタイプのjQueryの使い方 だったのでメモ。イメージギャラリーは、こ ういったエフェクトも大事な要因ですし、 参考にしておきたい所です。なかなかイン パクトもあって素敵ですね。尚、グリッドは Masonryを使っています。 基本的にはユーザーの利便性を高める目的でjsを使いたいですけど、視覚的にインパクトを与えられるのも利点の一つかなとは思います。 Animating with Modernizr こんな感じでマウスオーバーした画像に十字ハイライトされます。 広げてもだいじょうぶ。hoverしている画像にナビがアニメーションで付いてきてくれます。アニメーションはcss3なのでIEではアニメーションしません。 デモを見たほうが早いですかね・・ デモ※別窓で開きます ちょっと重いかな。手抜きですみません。 コード<script src="js/jquery-1.6.1.min.

先ほど紹介した「Google AJAX Feed API - Dynamic Feed ControlでRSSを表示」では表示するRSSフィードは１つでしたが、今度は複数のRSSフィードを表示してみます。 基本的な構造は前回と同じで、変更点は赤で表示しています。表示するRSSフィードの数は自由に変更できます。 <script src="http://www.google.com/jsapi/?key=取得したAPI key" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <style type="text/css"> @import u

今日の内容 Pachubeを使ってみる 世界各地のpachubeの情報をモニターしてみる Processingで、Pachubeの情報をリアルタイムに取得して、視覚化する Arduinoで取得したセンサーの情報を、Pachubeに書き出し センサーの情報をシェアしてみる Pachubeとは? http://www.pachube.com/ インターネットを介してリアルタイムにセンサーやからの情報を共有するプロジェクト 世界中の環境、センサーからのリアルタイムの情報をモニター 自作のデバイスを接続、世界に向けて情報を発信 ユーザ登録することで、APIを利用して様々なアプリケーションからPachubeの情報を送受信可能となる Processing, openFrameworks, Java, Ruby, PHP, iPhone ..etc.a ユーザ登録 PachubeのAPIを利用するために

繰り返しはあまり役に立たない ものを覚えるのに、今でも頻繁に使われる方法に《繰り返す》というのがある。 これは思ったほど（一般に思われているほど）効果がない。 記憶システムを短期記憶と長期記憶から構成されるものとするレトロな二重貯蔵モデルにおいては，繰り返し唱えたり書きなぐったりして、記憶したい情報を反復することで，短期記憶から情報が失われないようにすると同時にその情報を長期記憶へと転送させるのだと考えられていた。 ところが，情報を単に反復することに時間を費やしても，必ずしもそれが記憶として定着するわけではないことがその後分かってきた。 現在では，こうした《繰り返し》は維持リハーサル maintenance rehearsal(または1次リハーサル primary rehearsal)と呼ばれ，情報を短期記憶に一時的に保持させるに過ぎないと考えられている。 記憶技法はめんどい 情報を長期記

前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル