CSSテクニック本を無料でダウンロード
「The Art & Science of CSS」というCSSのテクニックが掲載された本が2週間限定で無料ダウンロード出来るようです。
買うと4,500円ほどするものなので、CSSに興味がある方はこの機会に是非！
とりあえずざっと目を通してみました。
ベースとなるHTML、それをコントロールするCSSといった順番で説明されており、図が段階ごとに掲載されているので英語が読めなくても安心です。
また、随所にCSSのプロパティに関する説明も書かれているので、初心者の方も理解できる内容になっているのではないでしょうか。
奇声を上げながら空を駆け回るハリウッド版アトム
ハリウッド版鉄腕アトムこと「AstroBoy」の予告編が公開されました。
この作品はタートルズのCG版で知られ、香港に拠点を置くCGアニメーション会社「Imagi」が手がけています。
上の画像を見るだけだと「服を着ているところ以外はなかなか…」と思ってしまいそうですが、予告編でアトムが現れた瞬間そんな考えはどこかへ吹っ飛んでしまいます。
そんな気になる予告編は以下から。
NintendoDSで一足先に裁判員を体験！
来年5月より施行され、同年7月に初の法廷が開かれるとされる裁判員制度 。
この制度を一足先に体験出来るNintendoDS用ソフトがタカラトミーから11月27日に発売されます。
裁判員として行うことの一連の流れをシミュレーション出来るほか、制度に関する辞典、裁判に関する用語集も収録しているそうです。
以下のような記事で世間を騒がす裁判員制度。
施行まではまだ時間がありますが、今のうちに予習はしておいた方がいいかもしれません。
裁判員制度は、世界に類を見ないモンスターになる：NBonline(日経ビジネス オンライン) （別窓 ）
asahi.com（朝日新聞社）：「裁判員です」話していいのは…家族○、匿名ブログは△ - 社会 （別窓 ）
そういえば逆転裁判で有名なカプコンさんは何か出さないのかな！
逆転裁判員とか出しちゃえばいいとおもう！
サンドイッチで彼女を殴りつけた男が逮捕
こうですかわかりません＞＜；
笑っちゃいけないんだけど笑ってしまうつっこみどころの多いニュースです。
サンドイッチて…。
フランスパンとかならまだ分からないでもないけどサンドイッチて…。
いやフランスパンもわからないけど。
巧妙なテキストリンク売買サービス
これはひどい（褒め言葉
TextLinkAdsやAuctionAdsなどの買収で知っている人は知っている「MediaWhiz」が「InLinks 」というサービスをリリースしました。
上記の記事にも書いてあるように仕組みは非常に簡単。
広告主がキーワードを購入すると、InLinksのプラグインが導入されたコンテンツにおいてそのキーワードが出現する度にリンクが貼られるというものです。
はてなダイアリーを見たことがある方はどんな感じか想像しやすいかもしれません。
WORDPRESS、MOVABLE TYPE、DrupalといったCMSに対応してるようです。
プラグインを導入したブロガーは報酬を得ることが出来ます。
基本的にブロガーはプラグインを導入するだけでいいみたい。
広告の承認、拒否は出来るっぽいです。
英語は読めない人なので正しいかどうかはちょっと不安ですが！
Gmailのテーマが変更可能に！
Official Gmail Blog: Spice up your inbox with colors and themes （別窓 ）
30個のテーマから選択ができるようです。
色々なタイプのテーマがあるようなので、ユーザースクリプトなどを使ってテーマの変更をしている方々も試してみてはいかがでしょうか。
変更は以下から。
http://mail.google.com/mail/?shva=1#settings/themes
まだ非対応のアカウントもあるらしく、順次追加されていくようです。
俺のアカウントはまだ対応していませんでした。泣いてきます。
20代の3人に1人がニコニコ動画ユーザー
20代、3人に1人はニコニコ動画--メディアパワーと若者に支持される理由:ニュース - CNET Japan （別窓 ）
予想以上のユーザーの多さに驚いた。
しかしドワンゴは依然赤字。
課金制のプレミアム会員は全980万人中21万人程度しかいないようです。
プレミアム未加入でも大した影響はないので、俺は未加入です。
もうちょっと加入と未加入の間に差別化が図られていればとも思うものの、あまりやりすぎると未加入ユーザーの顰蹙を買ってしまう可能性があるので難しいですね。
いかに黒字にするか、という話は以前から各所で議論されています。
ネットでドワンゴの赤字が話題！ - ニコニコ動画 開発者ブログ（新着情報） （別窓 ）
このあたりとか。
WEBサービスに興味がある方はちょっと考えてみるとおもしろいかもしれません。
一番確実なのは回線周りの費用の削減だろうけど、これもユーザーから顰蹙を買うようなサービス品質の低下に繋がりそうなもんです。
エコノミーの画質落とすのももう限界なんでしょうか。
2ちゃんねるはなぜ潰れないのか?
でも言われてるように、動画はあくまで話のネタであって中心にあるのはコメントなんですよね。つまり動画はネタにさえなればなんでもいいわけです。
上のCNETの記事でも夏野さんが「動画を共有しているのではなく、動画を見ているというその場を共有するもの」と仰ってます。
現状のエコノミー画質をさらに落としつつユーザーを引き止めるのは難しいのかもしれませんが、そのような策をとってでもなんとかこのサービスを存命して頂きたいところです。
がんばれニワンゴ。
ユーザーの行動が分かる「UserInsight」
ユーザーインサイト : どんな読者が、どうサイトを見たかが分かる Web マーケティングツール （別窓 ）
「なかのひと」でお馴染みのユーザーローカルから新しい法人向けアクセス解析ツールがリリースされました。
ざっと内容を見た感じ、擬似アイトラッキングといったところでしょうか。
・熟読エリア
・読了ライン
・クリックエリア
・マウス開始位置
・途中クリック
以上の5項目をヒートマップを用いて表示することが出来るそうです。
すごいなー。
百式の管理者の方がご自身のブログのデータを用いた解析結果を掲載しているあたり、「なかのひと」の時点でこのあたりの情報を収集していたということでしょうか。
（「なかのひと」企業版、ぐっと高度な機能を備えたアクセス解析ツール『User Insight』がリリース！ | IDEA*IDEA （別窓 ））
自分の技術的な知識が不足していてよくわからないんですが、熟読エリアはどうやって判断してるんだろう。
マウスの位置じゃ正確な情報は測れないだろうし。うーん。
これ以外に性別、年齢、地域、業界などの属性情報も表示が出来るようです。
性別や年齢は「なかのひと」では予め企業の男女比や年齢層の属性情報を入力してそこから予測している、みたいなことを読んだ気がするんですが、今回も同じなのかな。
法人で使う場合、性別や年齢の情報精度はそれほど重要視するものでもないのでしょうか。
企画段階からターゲットを定めるわけだからいいと言えばいいのか…。
でも広告掲載の場合なんかは話が別な気もする。うーん。
情報を見れば見るほどに個人で使えればなーと切に思う魅力的なツールです。
機能を限定した個人向けのものがリリースされるのを期待します
アメブロでパララックス効果！
Parallax Background with Javascript and CSS （別窓 ）
上記エントリ（以下サンプル）を参考にアメブロでパララックス効果を実現する方法を紹介してみます。
パララックス効果につきましてはこのブログの前回のエントリ をご覧下さい。
1.まずはアメブロのHTMLの構造を確認
全てのデザインで共通かは分かりませんので、今回はスタンダードデザインを前提に説明します。
スタンダードデザインでのHTMLの構造は大きく以下のような感じになっています。
body#mainIndex
├div#frame
│ └div#subFrame
｜ ├div#overHeader
｜ └div#wrap
└div#footerArea
今回重要なのはbody#mainIndexとdiv#frameです。
これがサンプルで言うところのbody#groundとdiv#cloudsにあたります。
2.画像を用意する
cssの編集に入る前にその前にまずは背景と前景の画像を用意しちゃいましょう。
サンプルでは背景のチェック模様（bg-green.gif）と透過処理が施された雲（clouds.png）が使われています。
また、透過PNGに対応していないIE6のためにgif版の雲も用意されています。
とりあえず試してみたい、という方はまずはこの画像を拝借して試してみるといいのではないでしょうか。
画像の用意が出来たらアメブロの画像フォルダにアップロードし、それぞれのURLをメモっておいて下さい。
3.CSSの編集
デザインの変更→スキンCSSの編集からCSSの編集に入ります。
まずはbodyの後あたりに以下のコードを追加します。
#mainIndex{
background-image: url(背景画像のURL);
background-repeat: repeat;
background-attachment: fixed;
}
次にその下にある#frameの内容を以下のものに変更し、ついでにIE6の対策もしておきます。
#frame{
background-image: url(前景画像のURL);
background-repeat: repeat;
background-attachment: fixed;
}
* html #frame {
background-image: url(前景画像gif版のURL);
}
もともとdiv#frameでは横幅やマージンの指定をしていたので、このままだとデザインが崩れてしまいます。
なのでその下にあるdiv#subFrameでこれを補ってやります。
#frameの下あたりに以下のコードを追加しましょう。
widthの値はご自身のブログに合わせて変更してください。
#subFrame{
width: 800px;
margin:0 auto;
}
これでcssの編集は完了です。
4.JavaScriptの編集
最後にお待ちかねのJSです。
こちらはフリープラグインを利用します。
サイドバーの設定からフリープラグインの編集画面へ行き、以下のコードを追加します。
<script type="text/javascript">
<!--
function calcParallax(tileheight, speedratio, scrollposition) {
// by Brett Taylor http://inner.geek.nz/
// originally published at http://inner.geek.nz/javascript/parallax/
// usable under terms of CC-BY 3.0 licence
// http://creativecommons.org/licenses/by/3.0/
return (tileheight - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById('mainIndex');
var groundparallax = calcParallax(53, 8, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px";
var clouds = document.getElementById('frame');
var cloudsparallax = calcParallax(400, .5, posY);
clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
}
document.getElementById('javascriptcode').onscroll = function() {
var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
var j = calcParallax(53, 16, posX);
console.log('scroll js: '+ j);
document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
}
}
-->
</script>
これまでフリープラグインを利用していなかった方はサイドバーの配置からフリープラグインを有効にするのを忘れないようにしてください。
5.完成
ﾔﾀｰﾊﾟﾗﾗｯｸｽ効果ﾃﾞｷﾀﾖｰ。
アメブロでは自分でHTMLの構造を編集することは出来ないので自由度は下がりますが、前回エントリのサンプルサイトを参考に画像を変更して遊んでみると面白いかもしれませんね！
視差効果による奥行きのあるWebデザイン
パララックス効果を使ったウェブデザイン - DesignWalker （別窓 ）
以前コリス さんでも紹介があったものですが、その頃はこのブログをやってなかったので先日DesignWalker さんで書かれた記事を紹介してみます。
このデザインは前景と背景の運動速度の違いによって奥行きを表現したものです。
ただし、HTML+cssによる単純なマルチレイヤではウィンドウのサイズを変更しない限り、この奥行きに気付くことができません
しかしJavaScriptを利用することによって、ウィンドウサイズの変更という条件に縛られること無くパララックス効果を体感することが出来ます。
以下のページが分かりやすいと思います。
Parallax Background with Javascript and CSS
（別窓
）
JSが有効になっていれば奥行きを感じることが出来ると思います。
わかんねーよ！という方はスクロールバーをドラッグしてみるか、マウスホイールを押し込んでマウスを上下に動かしてみてください。