螺旋デザイン

年末年始のお知らせ

2011-12-02T07:28:14Z

2011/12/28～2012/1/8まで休業いたします。メール・電話などの対応がこの期間は遅れます。よろしくお願いします。

Jawbone ERA レビュー第四回　Bluetooth感度実験などなど！

2011-08-03T10:43:05Z

Jawbone ERA（以下ERA）のモニターキャンペーン、当たりましたー！！ ERAはBluetoothのヘッドセットです。今回は4回レビューの最終回になります！（前回は装着方法と音質について書きました） Bluetooth感度実験とERAが欲しかった理由を最後に書きます。]]> Bluetooth感度実験一応Bluetoothの規格では10mは繋がっていることになっているのですが、実際はどうなのか実験してみました。他の電波の影響が少なそうな公園で音楽を流しつつ、Bluetoothの接続が切れたポイントを調べました。前提として共通で使用している接続している機器はiPhone4・iOS4.3.5です。

iPhone4にシリコンカバーのみの状態。

iPhone4をカバンの中に入れた状態。最も革が重なってるぽい所に入れておきます。

どちらも同じぐらいまで届いたので、まとめて書きます。ちょっと差が出た方が面白かったのに...。 記録は16m37cmで音が途切れだして、30mほどで音が切れました。 （30m付近は公園内の虫いっぱいゾーンだったので踏み込めなかったです。フワッとした値ですみません）結構Bluetooth届きましたね！！

ERAが欲しかった理由

もともと、iPhoneでゲームをするためにイヤフォンが欲しかったのですが、必死にプレイしているとiPhoneのスピーカーを手でふさいでしまって、ちょっとした手の動きでボリュームが変わってしまうのに耐えられなくなり、もとから付属している有線のイヤフォンを付けたところ、今度は接続部分が手の邪魔になって、完璧なゲームライフから遠い物になっていたのです。あとiPhoneのボリュームの最小が結構大きい音なので、夜中に遊ぶときも気を使うのです。そこでBluetoothのイヤフォンが欲しかったのです！ Bluetoothだとイヤフォンのみじゃなくてマイクもついているヘッドセットの商品が多いようですね。せっかくなのでERAでゴロ寝プレイでどこまで快適か研究結果を発表します！ ケイオスリングス LiteというRPGで遊びました。ゴロゴロしながら遊ぶ場合は格闘ゲームなどアクション性が高い物は難しいですね。 ※イヤーパッドの組み合わせは前回の記事を見てください→装着方法（特にメガネの人むけ）と音質について

1. 椅子に座ってゲーム　　遊びやすさ：★★★★★

当たり前ですが、全く支障ないです！この★値を基準で以下のレビューを比べてください。

2. ベッドで腰掛け＋上半身寝つつ＋足下は健康器具　　遊びやすさ：★★★★☆

ベッドの上で掛け布団をいい感じに上半身にそえつつ、足下は振動式の健康グッズで癒された状態です。頭が掛け布団に沈んでいますが、ERAを付けていることは気にならず、快適に遊べました。

3. 仰向けに寝た状態　　遊びやすさ：★★★☆☆

仰向けに普通に寝た状態です。枕に頭を乗せていますが、ERAと耳の装着具合はズレたりしませんでした！ ★が減ってるのは腕の固定がしんどいからです。

4. 横向きに寝た状態（ERA側の耳が上）　　遊びやすさ：★★☆☆☆

ERAと逆側の下側の腕が自由に動かせないので、大分遊びにくいです。ボス戦などの時はやめておいた方がいいですね。 ERAと耳の装着具合はもちろん大丈夫でした！

5. 横向きに寝た状態（ERA側の耳が下）　　遊びやすさ：☆☆☆☆☆

4番と逆の方に寝返りをうった状態です。 ERAを付けている方を下にすると、さすがに顔にERAが押しつけられて痛かったです！これは無理でした！！

これまで使っていたBluetoothのヘッドセットはこの形↓でなかなか付けるの面倒でした！これもなかなかいい品だったのですが、2番の時点で耳から落ちそうになってくるのですよ...。 ERAは片耳だけなのですがゴロゴロするのには、なかなか良かったです。 ★の減点はほとんど「腕がしんどい」ばっかりだし...。ERAの問題じゃなくて姿勢がつらいだけですね（笑）特に4番の横向きに寝るなんて、片方しかないから出来る姿勢です！！外で使うときも片耳は周りの音を拾えるので、交通安全にもいいですね。ではでは、Jawbone ERAのレビューはこれで終了です！読んでいただいた皆さま、ありがとうございます！！

これまでの記事

第一回：パッケージ解説＆簡単な使い方第二回：アップデートと日本語化第三回：装着方法（特にメガネの人むけ）と音質について第四回：（今回の記事） Bluetooth感度実験（カバンの中・電波が続く距離）最後に何故これがほしかったのか、熱く語るよ！

Jawbone ERA スペック

通話時間：最大5.5時間待機時間：最大10日間充電時間：30分（80%） 60分（100%）使用範囲：10メートル接続：最大8台まで接続可能重量：10.2グラム

Jawbone ERA をアマゾンで見てみる！ JAWBONE ERA：特徴｜ワイヤレスライフ（日本での取扱代理店の特設ページ）

Jawbone ERA レビュー第三回　装着方法（特にメガネの人むけ）と音質について

2011-07-25T07:56:48Z

Jawbone ERA（以下ERA）のモニターキャンペーン、当たりましたー！！ ERAはBluetoothのヘッドセットです。今回は4回レビューの3回目になります！（前回はシステムのカスタマイズについて書きました）装着方法（特にメガネの人むけ）と音質についてレビューします。]]> 多彩な装着方法イヤーパッド（A）式とイヤーパッド（B）＋イヤーループ式の２種類、４サイズからジャストフィットな装着方法が選択出来ます。実際に組み合わせるとこのようになります↓ わたしはメガネを基本的に付けているので、イヤーループ付のだとツルとツルがケンカしてしまうのです。 （3Dの映画のメガネも辛いです）なのでイヤーパッド（A）のみにしています。上の写真だと真ん中の状態です。大きさは２番目に大きいパッドを付けています。耳の穴に引っかけている状態ですが、かなり耳に密着して、なぜか落ちないです。 イヤーパッド（A）はメガネの人に超オススメです。 「なぜか落ちない」ってなんだよ！みたいな方はイヤーループをつけるといいですね。イヤーパッド（A）はかなり耳にひっつく感じなので、それが気持ち悪い人はイヤーパッド（B）＋イヤーループが良さそうです。イヤーパッド（B）単独だと落ちそうなのでイヤーループを併用するのがオススメです。気が済むまで、フィットする組み合わせを模索できるのでいいですね！

音質について

これ、第一回ぐらいに書いた方が良かったかもですがなんと、ERAは骨伝導マイク使用なのです！骨伝導スピーカーではなくて、骨伝導マイクです。どんな感じなのかなと思っていたのですが、普通にiPhoneで通話するよりも音がいい！！です。こちらの声は骨伝導マイクがノイズを除去して、クリアな音声を相手に届けます。 ERAのサイズは小さくて、耳に掛けるとモミアゲ（小）みたいな大きさなので、口よりマイクの位置は大分遠いのですが、音を良く拾う上に、骨伝導センサー（VOICE ACTIVITY SENSOR）でノイズを除去して相手に音を送るみたいです。（なのでVOICE ACTIVITY SENSORを頬骨に当てるように装着します。普通に付けたら頬骨に当たるのであまり気にしなくてOKです。）こちらの受信する音声もERAの機能で周りの騒音を感知し、通話ボリュームを自動調節します。家の静かな環境と、アナウンスがガンガンの土曜日のホームセンター、どちらもERAのボリュームをいじらなくても丁度いい音量で聞こえました。少しのことなんですが、ストレス無く会話できて良かったです！

これまでの記事と次回予告（予定は変更される場合があります）

第一回：（済）パッケージ解説＆簡単な使い方第二回：（済）アップデートと日本語化第三回：（今回の記事）装着方法（特にメガネの人むけ）と音質について第四回：（予定） Bluetooth感度実験（カバンの中・電波が続く距離）最後に何故これがほしかったのか、熱く語るよ！

Jawbone ERA スペック

通話時間：最大5.5時間待機時間：最大10日間充電時間：30分（80%） 60分（100%）使用範囲：10メートル接続：最大8台まで接続可能重量：10.2グラム

Jawbone ERA をアマゾンで見てみる！ JAWBONE ERA：特徴｜ワイヤレスライフ（日本での取扱代理店の特設ページ）

Jawbone ERA レビュー第二回　アップデートと日本語化

2011-07-19T12:58:01Z

Jawbone ERA（以下ERA）のモニターキャンペーン、当たりましたー！！ 4回レビューの2回目です。（前回はパッケージの構成と、取りあえず使うまで書きました）今回はアップデートと日本語化のレビューをします。 ERAはWebブラウザ経由でアップデートできます。わたしも届いたらすぐにアップデートしてみました。その時はWタップの向上が主な内容のアップデートがありましたので、取りあえず購入後はやってみるのがオススメです。]]> アップデートのやり方流れは次のようになります。会員登録→アップデータのダウンロード＆インストール→ERAの接続→アップデータの適用

会員登録

まず http://mytalk.jawbone.com/ にアクセスします。 ※サイトが日本語表記じゃない場合は右上の国旗から日本語のページに出来ます。『登録』をクリックして情報を入力、確認メールが来ますのでそのメールに記載されたURLをクリックして登録完了です。これでサインインからログインできます。

アップデータのダウンロード

ログインするとアップデータを促すコメントが出ています。「Jawbone Updaterのダウンロード」をクリックしてください。 ※たまたま調子が悪かっただけかもですが、Mac + Chromeで「Jawbone Updaterのダウンロード」をクリックしてもダウンロードが始まらなかったのでFirefoxでデータを落としました。ダウンロードが始まらない人はブラウザを変えてみてください。インストール後はChromeからでも操作できました！（この記事用にWindows + Chromeでデータをダウンロードしてみたらできました）

アップデータのインストール

ダウンロードしたデータをインストールしてください。画面はWindowsですがMacでも同じようなノリでした。 ※英語のインストーラ慣れしている人はこの項目とばしてOKです。 Jawbone_Updater_(バージョン番号).exe をクリック。インストールが始まります。『Next >』を押してください。

『I Agree』を押してください。いつもの、このプログラムのせいで何かあっても責任取れないから的な文章です。 I Agreeは「いいですとも！」みたいな意味です。 I Agreeを押すとあっという間にインストールされます。早すぎてキャプチャが撮れませんでした（笑）

次は『Finish』を押してください。

すると、このようなポップアップがでます。フィニッシュじゃなかったのかよー！ってな気分になります。 OKを押すと自動でブラウザが終了後、再起動しますので問題ないか念のためブラウザを見てみてください。大丈夫だったらOKを押してください。ブラウザが再起動するとMYTALKのTOPページに移動しています。先ほど登録したメールドレスとパスワードでサインインしてください。

ERA本体との接続

MYTALKのTOPページにでかでかと「接続してください」と書いてあるので、ERAを充電用のUSBでパソコンと接続してください。接続が完了すると「接続しました」とでます。わかりやすいです。

アップデータの適用

アップデートが必要な場合は、ここで表示されます。（届いた後さっそくアップデートしたので今回は表示されていません）アップデータの適用はこれで終わりました！

次は日本語化です！

ボタンを押すと謎の英語のアナウンスが聞こえて「おいおい、ここはジャパンだぜ！？」って言ってやりたくなりますよね。 このアナウンスを日本語に変えることが出来ます（感涙） MYTALKのサイトでERAを接続したままで、MYTALK APPS > AUDIO APPS > 日本語の『選択』をクリックしてください。

そうすると、左カラムの１番上の表示が変わっています。ここの『SYNC』をクリックしてください。

Ajax風のナビでインストール状況がでます。ちょっとハイテクすぎてびびりましたｗｗｗこれで日本語化されています。 ボタンを押すと「約5時間の通話が可能です」とか日本語で言ってくれます！！ ありがとう！そしてありがとう！！

前回のレビューに書いていたAndroid用のバッテリー表示アプリはMYTALKサイトの MOBILE APPS タブをクリックしてください。そこにある「Companion for Android™ Beta」です。OSのバージョンなどで制限があるようなので気を付けてください。

他にもおもしろいアプリ・設定があります。

MyFAVORITE
ERAのボタンを長押し→離すと設定した番号（1箇所だけ登録可能）に電話を掛けます。
お母さんの番号を登録しました（ﾃﾚ
送信者ID設定
送信者ID設定を設定すると着信があったとき、通常だと「着信です。番号は090＊＊＊＊＊＊＊＊」とアナウンスがあるところ、番号の部分を登録した名前で呼んでくれます。
英語はもちろん、ひらがな、カタカナ、漢字！まで読みました。すご！！
どうせだったらアドレス帳の名前読んでくれたら楽なのに（笑）

パソコンとUSBケーブルを外すタイミングですが、SYNCをしていないときでしたら好きなときに外してOKです。 ※Windowsでも「ハードウェアを安全に取り外してメディアを取り出す」とかしなくても大丈夫です。ではでは、趣味に合わせてどんどんカスタマイズしてくださいね！フランス語とかドイツ語に萌える人はそちらを入れてみるのもいいですね。

次回予告（予定は変更される場合があります）

第一回：パッケージ解説＆簡単な使い方第二回：（今回の記事）アップデートと日本語化第三回：（予定）装着方法がいい（特にメガネの人むけ）町中を想定した音の聞こえ具合テスト第四回：（予定） Bluetooth感度実験（カバンの中・電波が続く距離）最後に何故これがほしかったのか、熱く語るよ！

Jawbone ERA スペック

通話時間：最大5.5時間待機時間：最大10日間充電時間：30分（80%） 60分（100%）使用範囲：10メートル接続：最大8台まで接続可能重量：10.2グラム

Jawbone ERA をアマゾンで見てみる！ JAWBONE ERA：特徴｜ワイヤレスライフ（日本での取扱代理店の特設ページ） MyTALK

Jawbone ERA レビュー第一回

2011-07-10T16:11:46Z

Jawbone ERA（以下ERA）のモニターキャンペーン、当たりましたー！！これから4回モニターしますのでお楽しみに！（今回が1回目） ERAはBluetoothのヘッドセットです。なかなか凝ったパッケージです。 ]]> なんと開きました（驚）ヘッドセット本体をパッケージしているアクリルケースを取った後、開くことが出来ます。隠し底風の部分にはUSBカーチャージャーとキャリングケース、マニュアルが入っていました。キャリングケースはよくあるPCケース風の衝撃を吸収しそうな丈夫な素材で、出入り口も勝手に閉じるタイプ。なかなか使い勝手が良さそうですが......... 体に悪そうな匂いがしますので、カバンに入れる前に風通りのいい日陰で一日ぐらい放置しておいた方がいいかなと思います。このパッケージすごい凝っているので、買った人は無茶苦茶に破くのが主義な人も、今回ばかりは爆弾処理をするみたいに慎重に開封するのがオススメですよ！ iPhoneとの同期は、ERAの電源を入れて→iPhoneの設定＞Bluetooth：有効でOKです。簡単！同期すると電池持ちの表示もされて安心できます。 iPhoneのバッテリー（100%表示の緑のバー）の横の、赤いバーがERAのバッテリー表示です。パッケージを開けてから充電をしていないのでキワキワな残量です。 Androidの場合はデフォルトではバッテリー表示されないのですが、別途アプリを入れることによって表示できます。次回ぐらいに解説しますね！ではでは、お楽しみに〜〜〜！！！

次回予告（予定なので内容は変更される場合があります）

第二回：アップデートと日本語化装着方法がいい（特にメガネの人むけ）第三回： Bluetooth感度実験（カバンの中・電波が続く距離）町中を想定した音の聞こえ具合テスト第四回：最後に何故これがほしかったのか、熱く語るよ！

Jawbone ERA スペック

通話時間：最大5.5時間待機時間：最大10日間充電時間：30分（80%） 60分（100%）使用範囲：10メートル接続：最大8台まで接続可能重量：10.2グラム

Jawbone ERA をアマゾンで見てみる！ JAWBONE ERA：特徴｜ワイヤレスライフ（日本での取扱代理店の特設ページ）

制作実績ページに「山岡白竹堂」さまを追加しました

2011-06-07T05:20:24Z

山岡白竹堂さまでサイトのデザインをさせていただきました。

白竹堂さまは京都に店舗を構える、扇子の専門店です。 ]]> 画像をふんだんに使用して、老舗にふさわしいイメージを出しました。
また、あしらいは最小限にして主力商品の扇子と店舗の魅力が主役になるように気をつけ、和のイメージを出すためにお客様のご要望で縦書きの文字でデザインをしました。
画像の配置が多くなりますので、紙のパンフレットのようにしっかりとしたレイアウトにしました。

コーディングは今回担当していませんが、ときどき相談にのらせていただきました!

創業290余年の老舗のサイトのデザインができて、とても楽しかったです！！

わたくしごとですが商品写真を見ているうちに洗脳されてしまって（笑）高島屋で扇子を買ってしまいました。
バラとネコの魅力が満載で、しかもどことなく貴族っぽいところが気に入りましたよ♡

百貨店やハンズなどに卸されているので、気になった方は見てみてくださいね！
（オンラインショップもありますよ）

震災復興支援チャリティー「ミュージシャンによるデザイン扇子」

白竹堂さまが震災復興支援チャリティー扇子の販売をいたします！
ミュージシャンによるデザイン扇子を「東北地方太平洋沖地震」の義援金として、売上金全額を日本赤十字社へ寄付させていただきます。

参加ミュージシャン
泉谷しげる／忌野清志郎／奥田民生／GO!GO!7188／斉藤和義／Tommy february6、Tommy heavenly6／BONNIE PINK／UNICORN／吉田拓郎／LOVE PSYCHEDELICO

販売店舗
高島屋新宿店／阪急百貨店うめだ店／三越銀座店／ジェイアール名古屋タカシマヤ／渋谷ロフト・池袋ロフト／東急ハンズ渋谷店・博多店／白竹堂本店

販売期間　6月10日（金）から8月31日（水）※商品がなくなり次第終了

制作実績
http://www.rasen-d.net/works/

京都名扇白竹堂
http://www.hakuchikudo.co.jp/

震災復興支援チャリティー「ミュージシャンによるデザイン扇子」
http://www.hakuchikudo.co.jp/campaign/charity/

案件受注可能時期のお知らせ

2011-05-11T11:15:06Z

ありがたい事に、5月いっぱいまでご依頼が詰まっています。新規案件のご相談は6月の開始でいただけると助かります。（打ち合わせには5月中でもお伺いできます）よろしくお願いします。

制作実績ページに「Trendy Neo」さまを追加しました

2011-04-11T08:46:33Z

Trendy Neoさまでブログのリニューアルをさせていただきました。

ケータイとスマートフォンにも対応しています。]]> MT5でケータイ対応をしたのですが、いろんな条件が重なって文字コード的（UTF-8→Shift_JIS）に大変でした！
MT4iはMT5版がベータ版なんで使用を控えて、色々な文字コード変換プラグインを試してみたのですが、微妙に不都合がでて絶体絶命だーーーと思っていたら、phpを使っていたのでphpで文字コード変えたらOKでした。
phpを使えたのはWPで修行していたおかげですよ。
よかったーーー。
MTタグも普通に使えるので、結果的にいい方法を発見したなと思いました（幸）

こんなコードです



$page = <<


END;

$henkan = mb_convert_encoding($page, 'SJIS', 'UTF-8');

echo $henkan;

?>

スマートフォン対応もしたのですが、「HTML5＋CSS3で作る魅せるiPhoneサイト」と「iPhone+Android スマートフォンサイト制作入門」で調べながら作りましたよ！

「HTML5＋CSS3で作る魅せるiPhoneサイト」のほうがコーディングの内容が詳細なのでベースはこれで勉強して、マカロン本でAndroidに特化した部分を調べました。

Android1.6でSVGが使えないとかHTML5の新要素をCSSでブロックにしないといけないとか、罠が散らばっていたのですが、そんなに昔の機種じゃなくて2010年10月発売のものでもあるので、無視できなかったんですよ。
iOSよりあとに出た＋天才だらけのGoogleさんなんだからiOSよりイケてる仕様にしてほしかったです。（イライラ）

Trendy Neoさまのお仕事自体は、デザインから最後の仕上げまですべて担当できましたので、非常に達成感があり楽しく作成できました！

制作実績
http://www.rasen-d.net/works/

Trendy Neo
http://www.trendyneo.com/

はじめてのCSS新作、セレクタの優先順位書きました！

2011-01-14T04:46:18Z

ひさびさに「はじめてのCSS」更新しました！
実験的にフルマンガ版にしてみました。
すごいしんどかったので、2度としないと思います（笑）

マンガは１年ぐらい前に出来てたのですが、マンガを入れるためにサイトの横幅を広げる改造をしたり、マンガにするにあたってHTMLソースをどうするか迷っていたら、こんなに時間が過ぎていたのです...。ふふ...。

マンガはサチコさんに描いてもらったのですが、見ていただいた通り、すごい筋肉を描くのが好きです。
こんなファンシーな世界観に筋肉を輸入してくるとわ...。

ではでは、またそのうち続き書きますね！

「jQueryデザイン入門」を読んだ感想＋jQuery自体の感想少し

2011-01-12T07:15:24Z

「jQuery逆引きマニュアル」の感想文を書いたついでに「jQueryデザイン入門」も持ってるので感想を書こうと思います。

もくじです。

第1章　jQueryをはじめる前の基礎知識
第2章　サンプルで学ぶjQueryのキホン
- 2-1　jQueryの基本とセレクターの使い方
- 2-2　HTML/CSSを操作しよう
- 2-3　「イベント」でタイミングを設定しよう
- 2-4　フォーム機能を使いこなそう
- 2-5　Ajaxを使ってみよう
- 2-6　アニメーション効果で動きを付けよう
第3章　現場で使えるデザインレシピ
第4章　jQueryプラグインでラクラクWeb制作

2章は特に大事な内容な気がしましたので、細かめに書いてみました。

]]> jQueryはすごいと噂を聞くけど、どうせJavaScriptの一種だし面倒なんでしょ！！でもCSSとかは使えるよ。
と言う人にぴったりな本です！

わたしは著者の西畑さんのセミナーでリアル解説を聞いたのですが「はぁ、なんか簡単そうに聞こえるけど、脳みその回転が特殊な人だけ簡単なんだろうな〜」とかわいそうな思考をして実践はしていなかったのです（へへ...。）
そんなある日、クライアントのご希望がjQueryチャレンジをしないと対応出来そうにない内容だったので、しょうがなくググって調べたら「jQueryデザイン入門」の宣伝用連載ページにたどりついたのです！
そこの内容＋グーグル先生のお陰で、案件は片付いたのですが実際にjQueryを使ってみた感想が「マジで簡単だーーー！！！」でした。
調子づいてきたので、さらに勉強するために本も買いました。
フルカラーですごい見やすいです。

あと、わたしのオススメの使い方を是非紹介したいので書いておきます。

最後のページのオマケのチートシートをスキャン & PDF化してデスクトップに置いてます。（画像は中ページそのままupしたら捕まるかもなので、適当にモザイクかけてみました）
何か使いたくなったら、そのチートシートを見て.........
ここまでは「本買わんでも、このチートシート使えばいいやん」って思われるかも知れませんが、オマケチートシートには項目に対応した解説ページが書いてあって、詳しく知りたい時は本で調べられて便利なんです！！ビックリするぐらいマジ便利！！
チートシートみても「キレイに並べているようだが、専門外だから意味不明だせ！Shit!!」ってことが多い人のトラウマも癒せます。

みなさんマネしていいですよっ！

この本を書かれた西畑さんもやってくるセミナーが2011/2/20に大阪であります。

興味のある人はセミナー概要ページにどうぞ→http://www.re-creators.jp/vol5/
昨日感想文を書いた「jQuery逆引きマニュアル」の著者の方が揃うのでお得な気がします。
わたしも申し込みました！

jQueryデザイン入門

アマゾンでみる

 楽天ブックスでみる

「jQuery逆引きマニュアル」を読んだ感想

2011-01-11T05:42:04Z

リクリさんの忘年会のじゃんけん大会で「jQuery逆引きマニュアル」を当てました！
読んでみたい本だったのでラッキーです！
感想書きました。

もくじです。

第1章　jQueryの基礎構文
第2章　jQueryとJavaScriptを組み合わせてみよう
第3章　jQueryのさまざまなテクニック
第4章　見た目をよりよく変えてみよう
第5章　さまさまなインターフェイスを作成しよう
第6章　フォームを入力しやすくしよう
第7章　多彩なアニメーション表示を利用しよう
第8章　Ajaxを利用しよう
第9章　Web APIを組み込もう
第10章　iPhone/iPadサイトを作成しよう
第11章　ツールを使ってより簡単に開発しよう
第12章　The Other Topics of jQuery 〜その他の重要テーマ〜

]]> 個人的には「第2章　jQueryとJavaScriptを組み合わせてみよう」が興味深かったです。
色々な機能の実装方法でプラグインの紹介もあるのですが、その中にまじって「この機能ってプラグイン鬼ほど出てるよね」みたいなのが、jQueryのソースが書いてあるのですよ。（プラグインの紹介じゃなくて！！）
これはアレですよね！「よくあるプラグインは非効率なソースなので自分で書いた方がいいよ！！」って言う魂の叫びととりましたよ...。フヒヒ...。（深読みかもですが）
「this」が使える時と使えない時も自分的にフワっとしてましたので、もやもやしてたらちょうど解説してるページがありましたし、キメが細かい本ですね。

「初級」「中級」「上級」とページの端に印が入ってるのですが、本当に幅が広いです。
この本を真面目に勉強すると「松本クリニックさん」レベルのサイト作れるようになるかも！と思いました。

最後の12章のタイトルは「欧米か？」って思いましたが、「もっと効率的に書けそうな気がするけどわかんね〜」みたいにjQuery界にハマって来たので、この本はかなりおもしろいです！！

読者モニターも募集中なので興味のある人は応募してみてはどうでしょうか。
（応募締め切りが、本日1/11までなのでお急ぎください）

著者のお一人の徳田さんのサイン
書くの超早かったです！

読み手のレベルには幅広く対応してますが、デザイナー畑の人は「jQueryデザイン入門」で基礎固めをしたあとに、この本にステップアップする方がより理解しやすいと思います。 10章のiPhone対応はjQueryに特化した内容なので、１からiPhone対応を勉強したい場合は「HTML5＋CSS3で作る魅せるiPhoneサイト」（iPad版アプリもあるよ）がオススメです。

jQuery逆引きマニュアル

アマゾンでみる（なか見！検索に対応してます）

楽天ブックスでみる

リクリ忘年会 with Re:Creator's Chat 3rdでしゃべってきました！

2010-12-20T04:50:17Z

リクリさんは普段、結構まじめなイベントが多いのですが「Re:Creator's Chat」はふわってしてるので気軽に発表出来る素敵なイベントです。
それにしても5分オーバーなスライドを作ってしまったので、後半から超巻きにしてしまい、その辺りが無念です...。
スライドを置いておきますので~~先日「早いぞコノヤロー」と思った皆さま~~ダウンロードしてゆっくり見てただけたらありがたいです。
・スライド（PDF・11MBです）

2次会まで参加したのですが、楽しい会でした！

]]> 一次会会場 RAKUSUI DINING＆BAR A DAY

料理がすごいおいしかったです。
普通に飲み食いするのには超オススメの店です。
スライドが見にくいので、思いっきり店内の照明を落とさないといけなかったのが残念ですね。
最近WiMAXのWM3500Rを買ったので電波つかめるか確認してみました。
店内の奥の方には届かなかったのですが、WM3500Rを出入り口に近いカウンターに置いて自分は奥に行ってみたら使えました！
買いたてなので実験したくてしょうがなかったのですｗ

住所の「大阪市北区曽根崎新地１－９－８　ゴアビル１Ｆ」をGoogleで検索すると違う場所にピンが立ってしまうので、時間通りにお店にたどり着ける人が少なかったです。
Googleさんは変なところで裏切ってきますね（憎）

本当の場所

大きな地図で見る

トラップで出てくるところ

大きな地図で見る

本、当てました！ラッキー☆

他にも本の宣伝を兼ねたプレゼントとかありまして、なんとちょっと狙ってた「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践」を当ててしまいました！！（またその内感想書きます→2011/01/11 書きました。）
筆者の一人の徳田さんからメモっぽいサインもらいました（嬉） 2月に西畑さんと中村享介さんもこられてjQuery勉強会をリクリさんで開催予定らしいのでサインゲットしてやろうと思ってます！

谷さん著の「HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応」もプレゼント大会にでたのですが、残念ながらはずしました...。
気になっていた本なので、プレゼント前にちょっと読ませていただいたのですが、思っていた以上に読みやすかったので、自力で買おうと思います！
かっこいいサインを開発されていたので、意味もなく谷さんにサインをねだってみるといいかもしれません！！

年末年始のお知らせ

2010-12-01T01:13:02Z

2010/12/29～2011/01/3まで休業いたします。メール・電話などの対応がこの期間は遅れます。よろしくお願いします。

制作実績ページに「Web Designing 2010年 12月号」追加しました

2010-11-22T07:35:45Z

Web Designingさんで、記事を執筆させていただきました！！

『CSS Lab. 更新可能なグラフを作る』に寄稿しています。
CSSでグラフを表現すると基本的には棒グラフの一択なのですが、棒グラフの枠を超えた圧倒的にオシャレなグラフを紹介させていただきました（笑）

絶賛発売中ですので、是非ご覧になってくださいね！]]> 9月号から4ヶ月連続で『CSS Lab.』のコーナーを書かせていただいたのですが、はじめにお話をいただいたときは、チキンなので「連載って、きゃーーーー！！」と思いましたが、いつかピンでオレオレ企画の本を書くのが夢なのを把握していましたから、「いい修行になるよ！」チキンハートをなだめつつお仕事受けました。
おかげで前よりマニュアル系のドキュメントを書くのが早くなったような気がします（笑）

原稿作成はATOKを入れているMacの方でテキストエディタのmiを使って書いたのですが、miがまた原稿作りに向いているのですよ！
原稿用紙モード、カラム表示、これらがすごいよかったです。（↓クリックで拡大します）

コードに数字を打って、その説明を書くのにすごい便利です。
もともとmiが好きだったのですが、別の魅力に気づいてしまいましたよ...！

あと、編集さんがすごいです。
私はサイトのメインのイメージを作る為に写真をコラージュしたりしますが、それと同じことをテキストでするのですね。
しかもコーディングのことを「しっかり」解っていないと出来ないな、と思うところが多かったのでコーダーだったら「うむ！」となるのですが、本職は編集の人がしっかり私のテキストの内容を把握してさらにわかりやすさUPさせたりするので「どんだけー！（懐）」と言うのが感想です。

今年は春ぐらいから書き物の仕事多かったので勉強になって、よかったです！
来年もおもしろい仕事ができたらいいなー、とか今年の締めにはまだちょっと早いですね（笑）

制作実績
http://www.rasen-d.net/works/

Web Designing 2010年 12月号
アマゾンのページへ

お問い合せフォームが復活しました

2010-11-09T07:48:31Z

ソースのリニューアル以来、なぜかお問い合せフォームが不調だったので「コメントアウト＆メールアドレスのご案内」と言う悲しい処理をしていたのですが、復活しました！！わーー！！わーーー！！！ ]]> PHP 逆引きレシピ」に、まるっとお問い合せフォームの作り方が載っているのですねー。思いっきりパクリました（笑）始めは本を見ながら「写経と同じ！打ち込むことで私のものになるの！」と、打っていたのですが、しんどくなってきてサポートサイトからサンプルをダウンロードしてそれを改造しました。ふふっ...。 PHPをやったことない人にも、ローカルサーバーの作り方までやさしく解説されてる（しかもWindows、Mac両方）ので、この本オススメですよ！

お問い合わせページ

セレクタの優先順位

2011-01-14T04:40:46Z

トモ・リーン: きちんとセレクタを付けているのに、スタイルが適用されていないことってない？
ケンジ: おー、あるある！日常茶飯事だゼ～～
トモ・リーン: 凡ミスってことも良くあるけど...
トモ・リーン: 実はセレクタには「強さ」があります！！
ケンジ: ナニソレ〜？？？

トモ・リーン: まず「*」 これは超弱いです。最強は「#」ね！
ケンジ: そうなの？？？
トモ・リーン: セレクタの強さとは、スタイルの優先順位のことです。
ケンジ: 普通はセレクタが示す部分がかぶるときは最後のスタイルが優先されるよね？

トモ・リーン: これが順番だけじゃないのよね。強さの秘密はこうなの！！; 強＞ id（#）＞ class（.）＞要素（htmlタグなど）＞全称（*）＞弱
ケンジ: 数字が具体的な強さってわけか！
トモ・リーン: 後に書いているのにスタイルが優先されない場合はidとclassの付け方もチェックしましょうね！
ケンジ: やるぜ！

トモ・リーン: もっと詳細に点数を付けると以下のようになります。
（2011/01/16追記さらに011/01/19修正）
ちなみに、たくさんclassをつけてもidより強くなれたりはしません！！

種類	指定例	強さ	メモ
全称	*	★☆☆☆☆
要素	p	★★☆☆☆	HTMLタグのこと
class	.sample	★★★☆☆
属性セレクタ	a[href]	★★★☆☆	IE6では無効のセレクタなので注意
疑似クラス	a:link	★★★☆☆	IE6、IE7では「:focus」など効かないものが複数あるので注意
id	#sample	★★★★☆
要素への直接指定	style=""	★★★★★	HTMLなどに直書きしたときの指定方法

今回のポイント！: 最後に書いているのに適用されない場合は、別のところでidやclassをたくさん付けた指定があるかも知れません。
Dreamweaverを持っている人は「ウィンドウ＞CSSスタイル」で「現在」ボタンを使うと探しやすいですよ。

実技：セレクタの付け方

2009-05-12T08:27:36Z

トモ・リーン: セレクタはもうバッチリかしら？

ケンジ: おぅ、どこからでもかかって来い！だぜ☆

トモ・リーン: うふふ。
じゃー、さっそく抜き打ちテストよ！！

ケンジ: ええええええええ？？？

ケンジ: ・・・・・・。
なんだか、なつかしいノリだったね。

トモ・リーン: いつもと趣向が違っておもしろかったでしょ？

今回のポイント！: セレクタの書き方は人によって様々です。
どのようなパターンでも理解できるようにしておきましょう。

基礎知識：セレクタの付け方

2009-04-03T03:27:56Z

トモ・リーン: へーい！お久しぶり！！

ケンジ: 実はもう二度と、会うことも無いかと思ってたけどね〜！

トモ・リーン: 今回は、セレクタの付け方の基礎を解説します。

ケンジ: 確かにこれは、慣れるまで俺も適当にしてたよ〜。

トモ・リーン: ・・・・・・。

トモ・リーン: 基本のセレクタの付け方は、こんな感じです。

セレクタの付け方：基本

タグ指定: /* CSS */ body { border: 1px solid #F00; }
クラス指定: /* CSS */ .sample { border: 1px solid #F00; }
id指定: /* CSS */ #sample { border: 1px solid #F00; }
全要素指定: /* CSS */ * { border: 1px solid #F00; }; *(アスターリスク)にプロパティを付けると全ての要素に指定することが出来ます。

ケンジ: ふむふむ、基本はオッケーだぜ！！

セレクタの付け方：応用

親子（入れ子）関係でプロパティを指定することが出来ます。: ulの中にあるliタグに、指定。; /* CSS */ ul li { border: 1px solid #F00; }
特定のclassが付いている要素の中のpタグに指定。: /* CSS */ .sample p { border: 1px solid #F00; }
特定のidが付いている要素の中のpタグに指定。: /* CSS */ #sample p { border: 1px solid #F00; }
疑似クラスが付いている場合の親子（入れ子）関係でプロパティを指定する方法。: 疑似クラスについては「デザイン通りに組む！　～ボタン2：ロールオーバ～」が参考になります。; /* CSS */ .sample a:hover { background:#FFF; }
同じclassでも付いているタグによって挙動を替える。: /* CSS */ div.sample { border: 1px solid red } p.sample { border: 1px solid blue }; 同じような書き方がidでも出来ますが、1ページに付き同じidを2回以上使うとidの仕様的に間違った使い方なので、あまりやることがありません。
疑似クラスが付いている場合で、同じclassでも付いているタグによって挙動を替える書き方。: /* CSS */ h3.sample:first-letter { color:red; font-size:3em } p.sample:first-letter { color:blue; font-size:3em }; ところで、疑似クラスの例で出した、first-letterは結構オモシロ便利ですよ。

トモ・リーン: 実際には応用の組み合わせで、もっと色々な書き方が出来るわよ。

セレクタの付け方：継承

複数のセレクタがかかる状態の場合は、設定されたプロパティ全て反映されます。: /* CSS */ p { border: 1px solid #F00; } .sample { color: #F00; }; この場合、border: 1px solid #F00とcolor: #F00の効果が反映されます。

セレクタの付け方：読み込み順

同じプロパティの情報が重なっている場合は、後から書かれている方が優先されます。: /* CSS */ p { border: 1px solid red; } .sample { border: 1px solid blue; }; この場合、後から書かれているborder: 1px solid blue の効果が反映されます。

ケンジ: ふむふむ、なんか分かったような気がするぜ・・・。

今回のポイント！: きちんとCSSを書いているのに、反映されない場合は、セレクタの付け方を再確認してみましょう。

とりあえず、ネタ切れなので

2009-02-24T16:14:56Z

トモ・リーン: ふーーーーっ。
とりあえず、ネタ切れなので終わりよ〜〜。

ケンジ: ええっ！何っ！？
急だよ〜〜〜〜〜〜！！

トモ・リーン: 変化は急に訪れるモノなの。
ケンジもここまで私のレッスンに付き合ったんだから、ある程度は自分で解決出来るようになっているはずよ。

ケンジ: う〜〜〜ん、そうかも！
俺はたぶん天才だし☆

トモ・リーン: そんなわけで、とりあえずはオシマイだけど今考えると「あそこ、超説明はしょったな〜」って思うところがあるのよね。
そのあたり不定期に更新していくので気が向いたら見に来て！
RSSを登録しておくとかも、いいかもよ。

ケンジ: 皆さんがもっとやさしく＆細かく知りたいネタなどがありましたら、ここのコメントに書くか、螺旋デザインのお問い合わせから投稿してくれたら（トモ・リーンが）解説しちゃうかもしれませんYO！

今回のポイント！: さよならだけど、さよならじゃない！
不定期でがんばります〜！！

CSSハックとIEの条件分岐

2009-02-23T01:07:39Z

トモ・リーン: 今回は禁断のテク、CSSハックのご紹介です！

ケンジ: 禁断ってドキドキする響きだね！！

トモ・リーン: CSSハックとは特殊な記述法でCSSを書くことによって、そのCSSを読めるブラウザを制限するテクニックです。
これで特定のブラウザでしか出ないレイアウトの乱れを直すことが出来ます。

ケンジ: それのどこが禁断なの？

トモ・リーン: CSSハックはとっても便利だけど多用すると、ゴチャゴチャしたソースになるから、どうしても調整できない最終手段として使ってください。
あと、CSSの仕様的に間違った書き方もあるのよ。

ケンジ: うむ、了解したぜ☆

トモ・リーン: ではInternetExplorer６から！
この書き方をでCSSを書くとInternetExplorer6しか参照しません。

IE6だけに読ませる為のCSSハック

IE6にだけ読ませたいプロパティの前に_（アンダーバー）を入れる。: /* 記入例 */ div { _プロパティを記入; }; この書き方はCSSの仕様的には間違っているので、CSS Validation Serviceなどのサイトでは減点されてしまいます。
IE6にだけ読ませたいプロパティの前に*（アスタリスク）（半角スペース）htmlを入れる。: /* 記入例 */ * html セレクタ { プロパティを記入; }

ケンジ: 書式を気にしなくてもいい場合は、アンダーバーのハックの方が気軽に使えていいね！

トモ・リーン: 次はInternetExplorer７対応ね。
この書き方をでCSSを書くとInternetExplorer7しか参照しません。

IE7だけに読ませる為のCSSハック

IE7にだけ読ませたいプロパティの前に*（アスタリスク）+（プラス）htmlを入れる。: /* 記入例 */ *+html セレクタ { プロパティを記入; }

ケンジ: なんだか気持ち悪いけど、バリデート系サイトでも減点されないんだね！

トモ・リーン: CSSハックじゃないけど実はIEってHTMLのコメントアウトと専用の条件式で、CSS・JavaScriptなどの外部ファイルの読み込みを細かく制御できるのよ。

IEの条件分岐式

headタグ内に記入。CSS以外にもJavaScript外部ファイルにも使える！！

IE6だけに対応させたいとき: /* 記入例 */
IE7以下のバージョンに対応させたいとき: /* 記入例 */

トモ・リーン: 他にも書き方があるんだけど、続きはものすごく細かく書いてある、BLOG × WORLD ENDINGさんのページをみてね！

ケンジ: この人、ものすごい研究してるよ〜〜〜！
IE系専用の記述が多い場合は、CSSハックよりも条件分岐の方がいいね。

トモ・リーン: 残りの主なブラウザ用ハックはこんな感じね〜！

Firefox3だけに読ませる為のCSSハック


/* 記入例 */

html:not([lang*=""]) セレクタ {

プロパティを記入;

}

Safari3だけに読ませる為のCSSハック


/* 記入例 */

html:not(:only-child:only-child) セレクタ {

プロパティを記入;

}

ケンジ: う〜〜〜ん。
すごい、不思議な書き方だね！！
始めに気がついた人はすごいよ。

トモ・リーン: CSSハックはブラウザのバグや未実装な部分などを、いい感じに突いたテクなのよ。
本当に裏技ね。
IEの６・7辺りは、もうガチだと思うけど、FirefoxやSafariなどはもしかしたらバージョンアップなどで使えなくなる可能性があるから、最小限の使用にした方がいいわ。

今回のポイント！: CSSハックは便利だけど使い過ぎないように気をつけましょう！

印刷用CSS：その他もろもろテク紹介

2009-02-16T01:07:07Z

トモ・リーン: 残りの印刷テクについて語ります！

ケンジ: 印刷編、感動の最終回だね。

トモ・リーン: うふ！残りのテクは・・・。

ページ分割についてね。
これは全てのブラウザ（モダンブラウザ、IE6・IE7）で使えるのよ。

page-break-before

直前の改ページを制御するCSSプロパティ。


/* 記入例 */

div {

page-break-before:auto;

}

page-break-beforeの値

auto: 制御しない（初期値）
always: 直前で改ページさせる
avoid: 直前の改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

page-break-after

直後の改ページを制御するCSSプロパティ。


/* 記入例 */

div {

page-break-after:auto;

}

page-break-afterの値

auto: 制御しない（初期値）
always: 直後で改ページさせる
avoid: 直後の改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

page-break-inside

要素内での改ページを制御するCSSプロパティ。


/* 記入例 */

div {

page-break-inside:auto;

}

page-break-insideの値

auto: 制御しない（初期値）
avoid: 要素内で改ページを禁止する

実際のHTML。CSSもHTMLのhead内に書き込んでます。

上記のページを印刷プレビューで確認してみてください。

ケンジ: ふむふむ！いいねコレ！！

トモ・リーン: ところが・・・

ケンジ: え？？このパターン・・・。
もしかして使えないテクなの？？

トモ・リーン: ぶっちゃけると、そうね。
使えるシーンが限られるのよ。
使いやすい例としては「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」の時とかね。

ケンジ: んーーーー。
他の時が使いにくい理由って何？？

トモ・リーン: 下のサンプルの図を見て。
よくSEO対策などで有効と言われている組み方よ。

SEO対策のため、ページ内容（コンテンツ部分）がページ上部に出るための組み方

トモ・リーン: この場合、こんな風に改ページの設定がされたスタイルを入れていくわよね。

改ページのスタイルの入れ方、一例

ケンジ: ふむふむ！(SEOとか持ち出すなよ〜)

トモ・リーン: 問題は改ページの設定の部分より後に、ソース上ではメニューが来ているけど、スクリーン上の見栄えはメニューが前に来ていることとかが影響して、実際にはキチンと改ページが期待した通りにならないことが多いのよ。

ケンジ: ってゆーことは、1カラムのデザインの時にはうまいこと行くけど、カラムが増えた時は、ケースバイケースなんだね。

改ページのスタイルが使いやすいレイアウト

トモ・リーン: メニューカラムとコンテンツカラムの情報量のバランスで同じCSSを使っていたとしても、制御できないことがあるから、あるページではうまいこと改ページが出来ても、別のページではコンテンツの量によって調整する必要が出てくるわ。

ケンジ: ・・・・・・。
改ページのテクの存在は噂では聞いていたけど、使いどころが限られるね。

トモ・リーン: もっと言うと、印刷系のテクニックはあまりオススメ出来ない物ばかりね。
「file32. 印刷用CSS：ナビゲーション削除タイプ」「file33. 印刷用CSS：印刷用に全く違うレイアウトを作る」のような、スクリーンと印刷の見た目がガラッと変わってしまうのは、普通の人はビックリすると思うのよ。

ケンジ: う〜〜む、業界人には受けそうだけど、事情を知らない人はパソコンがおかしいとか思うかもね〜〜！

トモ・リーン: あと、最後に紹介したパターンの「file34. 印刷用CSS：スクリーンと全く同じように印刷する」も非常に手間がかかる割に、そのページを印刷する人ってどのぐらい居るかしらね、ってことね。
さらに改ページ問題から、完璧に印刷表示を制御するのはコンテンツの量も制御しないとダメだから本当に大変よ。
SEO対策をしたいなら、なおさらオススメ出来ないわね。

ケンジ: つまり、トモ・リーンは印刷やめちゃいな！って思ってるんだね。

トモ・リーン: そうなのよ・・・。
「印刷CSS対応ページはクーポン券ページだけ」とか印刷が必須のページのみに限定した方がいいわね。
どうしても完璧に印刷制御したい場合は、IllustratorでそのページをレイアウトしてPDF化がいいわ。

ケンジ: （Illustratorって極端な・・・。）
前の方では、更新時の情報ズレ問題とかでスクリーン用とプリント用ページを１つのHTMLにすることを言っていたのにね！

トモ・リーン: おほほほほ！
そのようなメリットよりも印刷対応は過酷だと、遠回しに伝えてみました。
ストレートに「印刷対応は過酷なので覚えなくていいです」言ってもポカーンってしちゃうだろうし、印刷希望のクライアントのかたへも、過酷な理由を知っている方が説明しやすいでしょ！

ケンジ: ・・・・・・。
モニターの前のみんなも、印刷はナメてかかると危険だから気をつけようね！！
そして過酷だと言う、真実を知りながらも立ち向かわなければならない、皆さん。
がんばってね！！

今回のポイント！: 印刷対応はメリットと時間のあるときにしましょう。

印刷用CSS：スクリーンと全く同じように印刷する

2009-02-09T01:27:42Z

トモ・リーン: 今回はスクリーンと印刷、全く同じようにする方法の紹介です！

ケンジ: う〜〜ん、前のヘッダの所みたいなことを全体でするんだよね？

トモ・リーン: ちょっと違います。
画像を縮小させたり、全てのサイズの再計算とかしていたら死んでしまいます。
そこでIE専用プロパティzoomの出番です！！

ケンジ: おお〜〜！

zoomプロパティ

zoom: 1; で実寸、zoom: 0.5; で1/2、zoom: 2; で２倍の大きさになる。
zoomで指定した数値をそのオブジェクトにかけてサイズを変えるプロパティです。

トモ・リーン: これをページ全ての要素にかけます。
具体的に言うと、800pxの幅のサイトをIE6でもキッチリ印刷出来るサイズ（649px）に変更する場合は
* { zoom: 0.8; }
と書きます。

ケンジ: ・・・・・・。
ってゆーか、「0.8」って数値はどっから来たの？

トモ・リーン: 649(印刷での表示幅) ÷ 800(スクリーンでの表示幅) =0.811125
つまり、800に0.811125をかけたら649になるのだけど、数値が細か過ぎるから「0.8」にしたのよ。

ケンジ: ふ〜〜〜ん。
納得だぜ！

トモ・リーン: 実際に組んでみるわよ。

実際のHTML 全メディア用CSS 印刷用CSS

トモ・リーン: こんなかんじになります。
印刷用CSSの「*」にzoom:0.8しただけだけど。

IE6でのスクリーン表示と印刷プレビューの比較　※クリックで拡大します。

IE7での印刷プレビューの比較　※クリックで拡大します。

ケンジ: ん？
真ん中のメニューとコンテンツの幅がヘッダ＆フッタのより狭いよね。
おかしくね？？

トモ・リーン: （バレたか）そこは気合いで微調整します。
あと、じつはIE7の用紙幅に合わせる設定のレンダリングも、まぁまぁ、いいかげんなのです。
印刷用CSSでzoom設定していない場合はこんな↓感じになってるわよ。

IE7での印刷プレビューの比較：印刷用CSS無し　※クリックで拡大します。

ケンジ: えええええ〜〜〜！！
印刷に関してはIE7のことは信じていたのに！！
ちっくしょおーーーーーー！！

トモ・リーン: こーいうのは根性で直します。

実際のHTML 全メディア用CSS 印刷用CSS

ケンジ: ってゆーか、トモ・リーン。
これメンドくさいよね？（数式とか出さないで根性とか言っちゃったし）

トモ・リーン: よく気づいたわね・・・・・・。
簡単そうだけど、実際に内容がある場合は面倒なのよ。
すべてのページで印刷時にズレがないか確認＋調整が必要なのよね。

デザイン上でもサイト全体を印刷するとしたら、どうしてもデザイン上、背景画像＋背景色を使うところが出てくると思うけど、白っぽいデザインにしておけば、それ程印刷時との違和感は出ないはずよ。

ケンジ: そっか〜。
やっぱり、背景処理無しでサイトを作るのも限界があるよね・・・。

トモ・リーン: 他にもページ区切り問題とかあるのだけど、このあたりはまたコミ入ってくるので、また次回にします。

今回のポイント！: IE6の印刷設定はプリント用CSSにzoom指定で縮小しましょう！
IE7の用紙サイズに合わせて印刷内容を調整する機能は癖がありますので、不都合が出た場合は、手を入れましょう。

印刷用CSS：印刷用に全く違うレイアウトを作る

2009-02-02T01:09:54Z

トモ・リーン: 今回は印刷用に全く違うレイアウトを作る方法の紹介です！
配置を変更して、印刷範囲が649pxが限界のIE6でも全ての情報が見えるようにします。

ケンジ: ・・・・・・。
劇的に見え方が変わるし、超キモイテクとか炸裂しそうだよね。

トモ・リーン: そんなにキモくは無いわよ。

ケンジ: え〜〜〜〜。
すごいハイテク感があるんだけどな〜！

トモ・リーン: 印刷用のCSSに配置を新しく指定すると大丈夫よ。

実際のHTML 全メディア用CSS 印刷用CSS

ケンジ: プリントプレビューすると、まじで配置変わってるよ・・・。

トモ・リーン: 今回のツボのご紹介です。

ページ全体共通

背景画像はデフォルト設定で印刷されないので、画像置換は使わない。
透過PNGの使用も画像置換の一種なので使えない。
参考：file22. デザイン通りに組む！　～透過PNG～

ヘッダ＆メニュー部分

サイズが変更されるので、変更時のデザインをどうするか考えておくこと。

コンテンツ部分

IE6での印刷幅の限界サイズである、「649px」以内にしておくこと。

作業の順番

上記のことに気をつけながら、組む。
通常のスタイルシートの次に印刷用CSSをリンクする。
※後に書いた方のCSSが優先されるため。
印刷用にレイアウトを再調整する。

ケンジ: ってゆーか、トモ・リーン。
これメンドくさいよね？

トモ・リーン: よく気づいたわね・・・・・・。
簡単そうだけど、ヘッダやメニュー部分に実際に内容がある場合は面倒なのよ。

ケンジ: う〜む。
これはメニューが縦から横にレイアウトが変わるから、デザインもよく考えてしないとダメだね。

トモ・リーン: そうね〜！！

今回のポイント！: ヘッダやメニュー部分はもう一度、組み直す気持ちで印刷用のCSSを作りましょう。
メニュー部分は特にHTMLを組むときもCSSによって縦にも横にも制御できるように、考えながら組みましょう。

印刷用CSS：ナビゲーション削除タイプ

2009-01-26T01:30:21Z

トモ・リーン: こんばんみ〜！
今回は印刷時にナビゲーションを削除してIE6でも印刷出来るものを作ってみたいと思います。

ケンジ: ・・・・・・。
劇的に見え方が変わるし、超キモイテクとか炸裂しそうだよね。

トモ・リーン: それが全然簡単なんです。

ケンジ: えええ〜〜〜。

トモ・リーン: ポイントは印刷時に消したい要素に、印刷用CSSに表示を消すように書くのよ。 /* media="print" メディア指定をした印刷用CSSに以下の記述をする */ 消したい要素 { display: none; } これだけです。

実際のHTML 全メディア用CSS 印刷用CSS

ケンジ: まじで消えてるよ。
あまりにも簡単すぎて拍子抜けたよ。

トモ・リーン: これは印刷対応でも簡単な方だけど、条件があるわ。
コンテンツの部分がIE6での印刷幅の限界サイズである、「649px」以内にしておくこと。

他にもツボがあるわよ。

ナビゲーション部分

ナビゲーション部分は表示を消すので、好きなように組める。（画像置換もOK）

コンテンツ部分

IE6での印刷幅の限界サイズである、「649px」以内にしておくこと。
背景画像はデフォルト設定で印刷されないので、画像置換は使わない。
透過PNGの使用も画像置換の一種なので使えない。
参考：ile22. デザイン通りに組む！　～透過PNG～

作業の順番

上記のことに気をつけながら、組む。
通常のスタイルシートの次に印刷用CSSをリンクする。
※後に書いた方のCSSが優先されるため。
不要な部分をdisplay: none;する。
見せたい部分の親要素で見せたい部分より大きいサイズを指定している部分は、サイズ調整をする。
例）width: auto;または649pxにするなど。

ケンジ: 作業自体は単純だけど、色々気を使わないといけないんだね！

トモ・リーン: 実はデザインにも気をつけるべき箇所があるのよ。

ケンジ: あっ！わかるよ！！
ネコサイトみたいに、透過PNG（巨大ネコ画像部分）＋ナビゲーションにコンテンツ部分がはみ出しているデザインは、ナビゲーション削除タイプにあわないね。

ナビゲーション削除タイプに合わないデザイン例

ナビゲーション削除タイプに合わない理由

トモ・リーン: 逆にナビゲーション部分のあしらいの一部がコンテンツにかかる場合、そこは印刷に出さなくても良かったら、透過PNGも使えるわよ。

ナビゲーション削除タイプでもOKなデザイン

ナビゲーション削除タイプでもOKな理由

ケンジ: う〜〜〜む、デザインの時から印刷対応を考えないとダメなんだね・・・。

トモ・リーン: そうなのよ。
いいこと言うわね！

トモ・リーン: あと、DWではver8からメディア別でデザインビューの表示を変えられるから、そこを利用してコーディングをするのもいいわよ。

上部のメニューの表示＞スタイルレンダリング＞プリントメディアタイプでアクセス！

ケンジ: 最終的にはブラウザで表示して、印刷プレビューでチェックだね！

トモ・リーン: うん！

今回のポイント！

ナビゲーション削除は比較的簡単にできますが、次の点に注意しましょう！

残したいコンテンツ部分の幅を649px以内にする
コンテンツ部分のみの表示にしても不自然じゃないようにデザインをする

印刷用CSS：色々な印刷CSSの手法について

2009-01-19T01:14:06Z

トモ・リーン: 印刷対応には色々なタイプがあるわ。
そのバリエーションをサクッと説明します。

ケンジ: おう〜！

トモ・リーン: リストにしてみました。
難易度は下に行くほどupします。

ナビゲーション削除タイプ

ナビゲーションを削除してIE6でも表示が乱れないようにする。

印刷用に全く違うレイアウトを作る

配置を変更してIE6でも全ての情報が見えるようにする。

スクリーンと全く同じように印刷する

zoomプロパティを使用し、全体を縮小する。

ケンジ: 上の２つ「ナビゲーション削除タイプ」「印刷用に全く違うレイアウトを作る」、劇的に見栄えが変わってるけどスクリーン用と印刷用に2ページ作る、って訳じゃないよね？

トモ・リーン: もちろん違うわ。
1つのHTMLで印刷用のCSSを指定することにより、見栄えを変更しているのよ。
別の印刷用のページが用意できたらそれはそれでいいけど、同じ内容で別のフォーマットというのは修正・更新を繰り返すたびに内容にズレが生じる危険性があるわね。

ケンジ: 最後のスクリーンと同じように見せるタイプの「zoomプロパティ」って今まで使ったこと無かったな。

トモ・リーン: IE専用のプロパティなのよ。

トモ・リーン: 次はタイプ別に実際に組んでみます。
お楽しみに〜！

今回のポイント！: いろんな方法でIE6でも印刷出来る方法がありますが、意外と「スクリーン」と同じように印刷するのは大変です。

印刷用CSS：webページの横幅について

2009-01-12T04:42:28Z

トモ・リーン: こんにちは〜！
今回は webページの横幅のサイズが、IE6で派手にズレまくる理由に関わる理由を解説するわよ。

ケンジ: うぃ〜っす！！

トモ・リーン: 前の回で出した表だけど、IE6以外はキレイに出ているわよね。

見え方の違いリスト：クリックで拡大します。

「A4印刷」とはA4サイズの紙に印刷する設定
「背景あり・なし」とは印刷設定で背景画像の表示の切り替えのこと

	モニター	A4：印刷　背景あり	A4：印刷　背景なし
IE6
IE7
Firefox3 win版
safari3 mac版

ケンジ: うん。

トモ・リーン: 実はIE6以外の他のブラウザ(Firefox,safari,IE7)は指定した紙のサイズに合わせてwebページのサイズを変更出来るのだけど、

ケンジ: IE6では出来ないんだね・・・
薄々そんな気はしてたんだ。

トモ・リーン: ・・・・・・。
ええ。

ケンジ: あっ、でもIE6の印刷プレビューのここ（下の図参照）！！
これで調整できるんじゃね？？

IE6の疑惑のプルダウン

トモ・リーン: 実はそれは紙に対してのサイズじゃなくてモニターでの表示サイズなのよ！！
他のブラウザは紙に対して調整なんだけど。

トモ・リーン: 横幅が800pxの画像で印刷プレビューでの挙動を実験してみたので見てみてね。

IE6：100%表示　画像は切れています。

IE6：50%表示　画像は切れています。表示も小さくなっています。

Firefox3：100%表示　画像は切れています。

Firefox3：50%表示　画像はページ内に収まっています。

Firefox3：用紙に合わせて縮小表示　画像はいい感じに収まっています。

ケンジ: なんじゃこりゃああああ！！！

トモ・リーン: また、悲しい現実を目の当たりにしてしまったわね。
でも出来る限りの抵抗はしたいわ！
それが人ってものよ！！

ケンジ: ってゆーか、トモ・リーンは妖精でしょ？

トモ・リーン: ・・・・・・。
まっ、対抗策はあるのよ。

ケンジ: とっとと説明してよ。

トモ・リーン: (くっ・・・)まずIE6でキレイに印刷できるギリギリのサイズがあるのよ。
それが横幅649pxね。

ケンジ: でも、今のサイトってそんなに狭いサイズのサイト無いよね？
印刷対応のサイトは狭い横幅にするしかないのかな？？？

トモ・リーン: はい、実は色々な手法で広い横幅でIE6でも印刷出来るように作ることが出来ます！！

ケンジ: やっぱりい〜〜！

トモ・リーン: その手法は次回説明するわよ。

ケンジ: やっと、実践ネタになりそうだね。
楽しみだよっ！！

今回のポイント！: IE6側では印刷したいページの縮小ができないので気をつけましょう。

印刷用CSS：ブラウザ別見え方の違いと特徴背景画像

2008-12-22T01:20:35Z

トモ・リーン: 今度は印刷時の見え方の特徴を解説するわよ！

ケンジ: ふむふむ。

トモ・リーン: 早速見え方の違いを、file23のネコサイトで表にしてみたわ

見え方の違いリスト：クリックで拡大します。

「A4印刷」とはA4サイズの紙に印刷する設定
「背景あり・なし」とは印刷設定で背景画像の表示の切り替えのこと

	モニター	A4：印刷　背景あり	A4：印刷　背景なし
IE6
IE7
Firefox3 win版
safari3 mac版

ケンジ: ・・・ん？
IE6はムチャクチャだけど、他のブラウザは結構「背景あり」にしたらキレイにみえるね！

トモ・リーン: ええ。でもそこに問題があるわ。
一般的なWebの閲覧者がその「背景画像」の表示がブラウザから制御できることに気づいているか、と言うことね。
ブラウザの設定の中でも奥の方にあるから、気づいていない人も多いはずよ。

IE6で背景を印刷する場合は ツール＞インターネットオプション で出るダイアログで設定します。

Safariはプリント... で出るダイアログで設定します。

ケンジ: ・・・。確かにこの設定は、インターネットをしている人がみんな知っているか、て言うと無理だね。

トモ・リーン: そうね。
だから背景画像あり印刷でキレイに見えるサイトは、そのサイトのターゲットがパソコンに詳しい層ならいいかもしれないけど、一般的な層がターゲットのサイトだと難しいわね。

ケンジ: 多くの人は背景画像を表示して印刷できる、と言う設定があると言うことに気づかないことが多いってことだね。
う〜〜〜む・・・。

トモ・リーン: だから、絶対に印刷したい画像の場合は飾り要素とかでも、背景画像ではなくimgタグで配置するといいわよ。

ケンジ: そっかぁ！

トモ・リーン: つぎはIE6で派手にズレまくる理由にも関わるネタを、冬休みはさんで2009年1月~~11日~~12日に更新します。

ケンジ: 良いお年を〜！

今回のポイント！: どうしても印刷で出したい画像は背景画像処理では無く、imgタグで置きましょう。

印刷用CSS：メディア指定

2008-12-15T01:18:18Z

トモ・リーン: ちらほら言ってきたけど、印刷用の設定のCSSを書かないと印刷時はキレイに出ないわよ！

ケンジ: ふむふむ。

トモ・リーン: たとえばfile.23で完成したネコサイトを印刷するとこんな風に見えるわ。

ネコサイトをWindows版Firefoxで印刷プレビューしてみました: クリックで拡大します。

ケンジ: な、なんじゃこりゃああああ！！

トモ・リーン: 特に印刷用の設定をしていなければ、こんなものね。悲しいけど、これが現実よ。
IE6ではさらに跡形も無いわよ（泣）

ケンジ: 覚悟はしていたが、これほどだったとは・・・！！

トモ・リーン: 印刷用のCSSの設定はmediaでプリント指定をするのよ！

印刷用のCSSの指定の仕方

印刷指定のCSSには分かりやすいように文字色を赤指定しています。
印刷プレビューをしてみると文字色が赤い状態を確認してみてください。
IE6では表示崩れが派手に発生していますので、文字が表示されない状態です。
表示のチェックにはIE6以外のブラウザを使用してください。

media="print": headタグ内でのCSSファイルのリンクに記述します。
モニター用とプリンタ用とファイルを分けて書きたい場合にオススメ！


media="print" />

media="print"で印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください) 上記のHTMLに添付されている印刷用CSSファイル

@media: CSSの記述の中で指定する場合に使います。
CSSファイルを一つにまとめる必要があるとき、局所的に対応する場合、HTMLファイルにスタイルを直書きする場合ににオススメ。

@media print {

* { color: red; }

}

@media printで印刷用CSSを指定したHTML
(※印刷プレビューしてみてください@media print の記述は10行目に書いています。)

@import: @importの使用時はこの方法でインポートCSSファイルごと指定できます。
ただし、IE系ではバグのため適用されません！！
IEでプリント専用CSSファイルを使いたい場合は、普通にインポートしてインポートしたCSSファイル内で@mediaを使用した書き方をしましょう。


@import "print.css" print;

@importで印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください) @importでメディア指定されているCSSファイル上記のCSSファイルにインポートされている印刷用CSSファイル

ケンジ: いままで、この指定してなかったけど、その場合はどうなるの？

トモ・リーン: 特にメディア指定をしていない場合は全てのメディアで指定したCSSが適用されるのよ。

CSSの表示の指定が設定できるメディア一覧

プロパティ	CSSの適用先
all	全て
screen	コンピュータのモニタ
print	プリンタ
projection	プロジェクタ
tv	テレビ
aural	音声合成機器
speech	音声合成機器
braille	点字ディスプレイ
embossed	点字プリンタ
handheld	携帯端末
tty	固定幅文字の機器

ケンジ: うへぇ〜〜！こんなにあったんだ！
ん？？まてよ。
指定しなかったときは全てのメディアに適用されるってことは今まで書いていたCSSもプリントでも見えるはずなんだけど・・・？

トモ・リーン: その通り！
始めに出したネコサイトの印刷プレビューでも、全てのCSSの情報が期待ハズれなレンダリングをされている訳じゃないわ。
レイアウトは残っているわよね？（IE6は壊滅的だけど）

ケンジ: そうだった！

トモ・リーン: 実は同じブラウザでも、スクリーンと印刷じゃ、全く違うレンダリングをするのよ。

ケンジ: なんだって！
それじゃあ、チェックブラウザが増えるようなものじゃないか！！

トモ・リーン: 印刷はスクリーンとは全く違うタイプのレイアウト崩れが発生するのでもっとタチが悪いのよ・・・。
お気を付けて！！

ケンジ: くっ・・・・・。
次は、具体的にどうスクリーンと見え方が違うのか教えてね・・・。

今回のポイント！: 印刷用のCSSを準備することによって、印刷対応が出来ます。

Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」

2008-12-08T01:07:31Z

トモ・リーン: さらに、Firefoxの機能拡張の紹介よ！
今の最新版はバージョン3だから、まだの人は一刻も早く、インストールしましょう。

ケンジ: 今度はどんな機能拡張なの？

トモ・リーン: 今度はページをまるっと取って保存できて、その上簡単に編集＋メモも貼れる「ScrapBook」。

ScrapBook

詳しい機能の説明はオフィシャルサイトで、機能拡張のダウンロードはFirefox Add-onsからどうぞ。

トモ・リーン: この機能拡張の説明はオフィシャルサイトでの説明が分かりやすいので、多くは語らないけど、閲覧しているWebページを取り込んで欲しい情報以外を消したり、メモで補足できたり出来るわよ。

ケンジ: ふむふむ。
技術的な調べ物をするときや、デザイン的に気に入ったサイトを貯めておくのに使えそうだね！

トモ・リーン: あと、これはWindowsの人だけなんだけど、Firefoxで開いているページをIEで開ける「IE Tab」。

IE Tab

機能拡張はFirefox Add-onsからダウンロード！
オフィシャルサイトはこちら。サイトは英語だけど作者の人は台湾の方みたいです。

インストールするとココが変わる！

ケンジ: IEのバージョンは選べるの？

トモ・リーン: OSにインストールされているIEを開くのよ。だからIEのバージョンは選べないわね。
あと、MacのFirefoxにいれてもダメなのよ。

ケンジ: そっか〜〜。残念！

トモ・リーン: でも、ブラウザを２つ立ち上げたり、URLをコピペしたりと言った労力は、小さいけど何回もしないといけないから、この辺りが省略できるのってとっても楽よ。

ケンジ: ブラウザチェックってCSSを直すたびに何回も見直すからね。
地味・メンドクサイ作業がちょっとでも楽になるといいね！

トモ・リーン: うんうん！
機能拡張自体は日本語化もされているので、とっても使いやすいわよ。

基本の操作法はアイコンにマウスを重ねると表示されるので覚えなくてもOK！
オプション設定画面の一部

ケンジ: 俺の趣味で見に行っているサイトがIEじゃないとダメなところがあって、ブラウザを使い分けていたんだけど、これだとFirefoxだけで良さそうだから普段使いにもいいね！

トモ・リーン: Firefoxには他にも色々な機能拡張があるので、楽しんでみてね。
でも入れすぎるとFirefoxが重くなったり、機能拡張の相性が問題で挙動がおかしくなることがあるのよ。

ケンジ: よ〜し！加減を考えながら、色々入れてみるよ！！
ところでトモ・リーンはどこでそんな機能拡張を見つけてくるの？？

トモ・リーン

こんなところで探しているわよ。

ケンジ: Firefoxを俺色に染めてやるぜ〜〜〜☆

今回のポイント！: Firefoxの調子を見ながらバンバン機能拡張をいれて、あなた仕様のFirefoxにしてやりましょう！

Firefoxの便利な機能拡張：Page Saver Basic

2008-12-01T00:58:42Z

トモ・リーン: またもや、Firefoxの機能拡張の紹介よ！
今の最新版はバージョン3だから、まだの人は一刻も早く、インストールしましょう。

ケンジ: 今度はどんな機能拡張なの？

トモ・リーン: Webページのキャプチャを取りたいときにオススメの品です！

Pearl Crescent Page Saver Basic

オフィシャルサイトからダウンロード！
Pro版（有料）とBasic版（無料）がありますがBasic版で十分大丈夫ですよ。

インストールするとこのようなボタンがツールバーに追加されます。

ケンジ: 何コレ！！英語のページじゃん！！！

トモ・リーン: 大丈夫！
機能拡張自体は日本語化されているので安心よ。
いろいろ設定できる、オプション画面を見てみて！
※オプション画面はツールバーのアイコンを右クリックすると出てきます。

オプション画面：動作の設定

オプション画面：キャプチャーされる画像の設定

ケンジ: おお〜〜！！なんだか小回りが利きそうだね。

トモ・リーン: 自分で作ったページを印刷してチェックしたいときにもオススメね！
CSSで作ったページはプリント用の設定をしないとスクリーンと同じようには見えないのよ。
だからキャプチャをとって、それを印刷するといいわよ。

ケンジ: ちょっとズレるけど印刷用のCSSを作ったとして、その見栄えをチェックしたいときはやっぱり、印刷するしかないのかな・・・。
俺、エコな人間だから印刷とかしたくないんだけど！

トモ・リーン: その場合はブラウザの「印刷プレビュー」でチェックできるわよ。

ケンジ: ふむ、ふむ！

トモ・リーン: ちょっと前のバージョンまでFlashの部分が抜けてキャプチャされていたのだけど、今のバージョンはFlashも撮れるので欠点無しよ！！

今回のポイント！: これを使えばページ全体のキャプチャが画像編集アプリで合成したりせずに撮れるので、とっても便利です！！

アクティブ

2008-08-07T06:14:11Z

走る男性のメインイメージを大きく、またバックの様々なフォトに遠近感を持たせて散らばらせることによりアクティブに動き働く様子を演出しています。メインの写真が栄えるように背景を単色の白に。キャッチコピー・リンク色には写真の邪魔にならないで強調出来る、白色とも相性のよいDarkRedを使用。メリハリのついたシンプルなデザイン。

ポップ＆キュート

2008-07-28T06:50:00Z

愛嬌あるフォトに弾ける泡とガーベラで縁取り、遊び心溢れる女性向けに。ドッグカフェなどのサイトにどうでしょうか。水玉ピンクの背景にパールピンクのTOPナビを置き、パープル＆ピンクのグラデーションで全体をピンクでまとめながらも注目ポイントにアクセントが効いたデザインに。メイン画像にも取り入れた人気のガーベラをインフォメーションにも縁取りし、女性に喜ばれるようなポップ＆キュートさを感じさせるようにしました。

和

2007-10-30T06:46:00Z

最近流行の和柄を取り入れ、女性の大きなＴＯＰ画像を加工しおしゃれなアパレル業をイメージしました。全体のイメージとしては和模様・和紙等を配置しメインとは対照的なブラックとゴールドを使用した左メニューは邪魔にならず柄を多く取り入れてごちゃつきそうな全体をバランスよく引き締めています。インフォメーションには目を引く大きな花柄、各ページ紹介、各ページタイトル部分には落ち着いた色彩の和柄を敷くことでシックなおしゃれ感を表現しています。

ヒューマンパワー

2007-10-20T03:22:57Z

人が中心のイメージと白バックにシンプルで分かりやすい、人材を大切にするといった企業イメージを表現しました。会議中や、握手、仕事のパートナーといったように人をモチーフとしたイメージ作りをしています。各ページ（会社概要・事業内容・お問い合わせ・リクルート）の右ナビにもＴＯＰと同様のイメージを配置しています。全体的にさっぱりとした見やすい作りになっています。

クリアブルー

2007-10-10T03:15:04Z

企業の優雅で品位の高い洗練されたイメージ、ＴＯＰ画像ではプロフェッショナルなビジネスマンを表現しました。全体的なイメージとして、ブルーグリーン系とブラックでクールな印象に。ＴＯＰのメイン画像で表現する握手は、落ち着いた中にも仕事への情熱・人と人との繋がりを強く印象付ける役目も持っています。各ページ（会社概要・事業内容・お問い合わせ・リクルート）にもイメージを配置しました。

螺旋デザイン

年末年始のお知らせ

Jawbone ERA レビュー 第四回 Bluetooth感度実験などなど！

iPhone4にシリコンカバーのみの状態。

iPhone4をカバンの中に入れた状態。最も革が重なってるぽい所に入れておきます。

ERAが欲しかった理由

1. 椅子に座ってゲーム 遊びやすさ：★★★★★

2. ベッドで腰掛け＋上半身寝つつ＋足下は健康器具 遊びやすさ：★★★★☆

3. 仰向けに寝た状態 遊びやすさ：★★★☆☆

4. 横向きに寝た状態（ERA側の耳が上） 遊びやすさ：★★☆☆☆

5. 横向きに寝た状態（ERA側の耳が下） 遊びやすさ：☆☆☆☆☆

これまでの記事

Jawbone ERA スペック

Jawbone ERA レビュー 第三回 装着方法（特にメガネの人むけ）と音質について

音質について

これまでの記事と次回予告（予定は変更される場合があります）

Jawbone ERA スペック

Jawbone ERA レビュー 第二回 アップデートと日本語化

会員登録

アップデータのダウンロード

アップデータのインストール

ERA本体との接続

アップデータの適用

次は日本語化です！

他にもおもしろいアプリ・設定があります。

次回予告（予定は変更される場合があります）

Jawbone ERA スペック

Jawbone ERA レビュー 第一回

次回予告（予定なので内容は変更される場合があります）

Jawbone ERA スペック

制作実績ページに「山岡白竹堂」さまを追加しました

震災復興支援チャリティー「ミュージシャンによるデザイン扇子」

案件受注可能時期のお知らせ

制作実績ページに「Trendy Neo」さまを追加しました

こんなコードです

はじめてのCSS新作、セレクタの優先順位書きました！

「jQueryデザイン入門」を読んだ感想＋jQuery自体の感想少し

もくじです。

この本を書かれた西畑さんもやってくるセミナーが2011/2/20に大阪であります。

jQueryデザイン入門

「jQuery逆引きマニュアル」を読んだ感想

もくじです。

jQuery逆引きマニュアル

リクリ忘年会 with Re:Creator's Chat 3rdでしゃべってきました！

本当の場所

トラップで出てくるところ

本、当てました！ラッキー☆

年末年始のお知らせ

制作実績ページに「Web Designing 2010年 12月号」追加しました

お問い合せフォームが復活しました

セレクタの優先順位

実技：セレクタの付け方

基礎知識：セレクタの付け方

セレクタの付け方：基本

セレクタの付け方：応用

セレクタの付け方：継承

セレクタの付け方：読み込み順

とりあえず、ネタ切れなので

CSSハックとIEの条件分岐

IE6だけに読ませる為のCSSハック

IE7だけに読ませる為のCSSハック

IEの条件分岐式

Firefox3だけに読ませる為のCSSハック

Safari3だけに読ませる為のCSSハック

印刷用CSS：その他もろもろテク紹介

page-break-before

page-break-beforeの値

page-break-after

page-break-afterの値

page-break-inside

page-break-insideの値

印刷用CSS：スクリーンと全く同じように印刷する

zoomプロパティ

印刷用CSS：印刷用に全く違うレイアウトを作る

ページ全体共通

ヘッダ＆メニュー部分

コンテンツ部分

作業の順番

印刷用CSS：ナビゲーション削除タイプ

ナビゲーション部分

Jawbone ERA レビュー第四回　Bluetooth感度実験などなど！

1. 椅子に座ってゲーム　　遊びやすさ：★★★★★

2. ベッドで腰掛け＋上半身寝つつ＋足下は健康器具　　遊びやすさ：★★★★☆

3. 仰向けに寝た状態　　遊びやすさ：★★★☆☆

4. 横向きに寝た状態（ERA側の耳が上）　　遊びやすさ：★★☆☆☆

5. 横向きに寝た状態（ERA側の耳が下）　　遊びやすさ：☆☆☆☆☆

Jawbone ERA レビュー第三回　装着方法（特にメガネの人むけ）と音質について

Jawbone ERA レビュー第二回　アップデートと日本語化

Jawbone ERA レビュー第一回

印刷用CSS：ブラウザ別見え方の違いと特徴背景画像