以前｢:even｣｢:odd｣でテーブルの等のストライプ処理をするとメモしましたが、
｢:even｣｢:odd｣は全体の通し番号での奇数と偶数の場所に適応されるため、
複数の要素に対してかけたい場合に不向きであるということが判明。（いまさら）

以下メモ

$(function(){
$("クラスを当てたいセレクタ:nth-child(even)").addClass("付加するクラス");
$("クラスを当てたいセレクタ:nth-child(odd)").addClass("付加するクラス");
});

:nth-child(even)
→偶数番目の要素に対して付加する命令。
:nth-child(odd)
→奇数版目の要素に対して付加する命令。

1年齢は？
30歳前半

2パソコン歴は？
正確にいうと中学生だけど、
大人になって意識してちゃんと使ったのは10年ぐらい。

3コーダー歴はどれくらいですか？
6年目に突入

4初めてwebを作ったのはいつですか？
25歳のとき

5コーダーになろうと思ったきっかけは？
色んな事を経験して器用貧乏になりつつ、
デザインセンスが絶望的にないのでコーディング一本で行こうと決意した。

6コーディングは誰に／どこで習いましたか？
最初は職業訓練校で。
その後は独学。

7web業界以外の友達・家族とコーディングの話をしますか？
全くしない。

8ご両親はインターネットユーザーですか？
はい。

9視力はいくつくらい？メガネ・コンタクトどちらですか？
0.02ぐらい。コンタクト使用。

10本はAmazonで買いますか？
書籍は立ち読みしてから買うので書店で買う。

11ネットショッピングをしますか？主に買うものは何ですか？
はい。洋服や生活雑貨。

12携帯サイトで買い物をしたことがありますか？
過去にコンタクトを購入。

13お酒は強いですか？
そこそこ飲めます。

14休日の過ごし方を教えて下さい。
買い物にでかけたり、仕事をしたり、家事やゲーム。

15今、欲しいものは何ですか？
CS5、MBP、パソコンデスク。

16平均睡眠時間を教えて下さい。
5時間

17平日の起床時間は何時ですか？
8時半

18なにかスポーツをしていますか？
水泳

19パソコンと関係ない趣味がありますか？
ダーツ

20コーディングに役立つ資格、パソコン関係の資格を持ってますか？
一応マルチメディア検定…

21昼と夜、どちらの方が仕事がはかどりますか？
夜。

22ブラインドタッチは教本通り10本の指を使いますか？
教本通りではないけど、一応10本。

23眠い時の対処法はありますか？
冷たい飲み物を飲む。栄養ドリンクを飲む。

24息抜きについ見てしまうサイトはなんですか？
ニュース関連。

25他に息抜きにしていることがあったら教えて下さい。
音楽を聴く。

26仕事上で得意なことはありますか？それは何ですか？
得意なこととは少し違うけれど、スピードが速い…と思っている。

27仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？
常にＢＧＭを聴いている。ロック・エレクトロニカ

28作業パソコンはWin?Mac?
会社：Win
自宅：Mac

29作業パソコンはデスクトップ？ノート？
会社：デスクトップ
自宅：ノート

30作業パソコンのマウスは標準マウスですか？
標準。

31マウスパッドは使っていますか？
使わない。

32作業パソコンにAdobe製品は何が入っていますか？
Dreamweaver
Photoshop
Illustrator
Fireworks
Flash

33作業パソコンはモニタは何インチですか？
会社：19インチ
自宅：15インチ

34自宅にパソコン持ってますか？いくつありますか？
Ｗｉｎｄｏｗｓ、Macの二台

35自宅に作業環境はある？
ある。

36会社と自宅、作業はどちらがはかどりますか？
どちらも変わらない。

37自宅パソコンは家族と共用ですか？
自分用。

38自宅パソコンはWin?Mac?
作業はMac
確認用にWin

39自宅パソコンのメーカーは何ですか？
Win：sofmapオリジナル
Mac

40自宅パソコンはデスクトップ？ノート？
作業用がノート、レンダリングチェックにデスクトップ

41打ち合わせのメモは手描きとテキストどちらがいいですか？
テキスト

42スケジュール管理は何でしてますか？（手帳・アプリケーション・webツール・モバイルなど）
googleカレンダー

43メーラーは何を使ってますか？
Mail

44RSSリーダーは何を使ってますか？
RSSリーダーを使っていない。

45好きなポータルサイトはどこですか？
特になし

46ブックマークは何で管理していますか？
Delicious

47不得意だけど使わねばならない技術はありますか？
JavaScript　致命的ですね。

48web系の雑誌を購読していますか？
最近は購読していない。

49webの参考書は何冊くらい持っていますか？
大体Webで勉強するので本はとくになし。

50お薦めの参考書があったら教えて下さい。
特になし。

51参考にしているおすすめサイトがあったら教えて下さい。
特になし。

52コーディングに使ってる、便利なツールを教えてください。
Dreamweaver サクラエディタ

53コードにコメントはつけてますか？
つける。

54制作過程で、どの作業が一番好きですか？(コーディング、画像作成、検証、打ち合わせ)？
コーディング

55画像切り出しに使うソフトはなんですか？
Photoshop

56webデザインに使うソフトはなんですか？
Photoshop

57検証対象ブラウザは何個ありますか？
Win:IE6 IE7 IE8 FireFox3
Mac:Safari3 Safari4 FireFox3

58一から新規制作とリニューアル、どちらが好きですか？
とくにこだわらない。

59定期運用と新規制作、どちらが好きですか？
新規制作

60テーブルコーディング業務はありますか？
ある

61新規制作の割合はどれくらいですか？
ほぼリニューアルなので、1割ぐらい。

62iPhoneサイトのコーディングをしたことはありますか？
ある

63よく使うJavaScriptがあったら教えて下さい。
アコーディオン・スムーススクロール・ロールオーバー

64携帯サイトのコーディング業務をしていますか？
していない

65FLASHはどのくらいできますか？
バナーアニメーション程度

66いま興味がある技術はありますか？
HTML5

67自分の書いたコードは美しい？
美しいと信じたい

68ソーステンプレートを作っていますか？
作っている

69単語登録にタグを登録していますか？
DWのスニペットを使用しているので、していない

70HTML5、早く実務で使いたい？
してみたい

71CSS3、早く実務で使いたい？
したい

72コーディングで伸ばしたい技術は？
運用しやすいソースを書くこと

73コーディング以外で伸ばしたい技術はありますか？
デザイン　サーバまわり　PHP

74職場にコーダー専門職は何人いますか？兼務は何人ですか？
専門は自分を含め4人　兼務1人

75職場のコーダー男女比はどのくらい？
半々

76勤務時間は何時から何時までですか？
10時020時ぐらい

77通勤時間はどのくらいですか？
30 分

78月の残業時間は最高何時間でしたか？
50時間ぐらい

79現在の仕事環境で良いところはどんなところですか？
マシンがいい

80デザイナなど他の仕事とコーディングを兼務してますか？
なし

81職場は服装自由ですか？何か規則はありますか？
良識の範囲内での服装自由

82休日出社や徹夜作業はありますか？
時期によってあり

83プライベートでサイト／ブログを持ってますか？
もっている

84プライベートでドメインを持っている。
もっている

85プライベートでサーバーを持っている。借りている。
もっている

86CSS Niteには何回行きましたか？
10回ぐらい

87地方のCSS Nite行ったことありますか？
ない

88尊敬するwebクリエイターがいたら教えて下さい。
自分より凄い人。沢山います。

89旅行に行く時パソコンを持っていきますか？持っていきたいですか？
あると便利。

90好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？
仕事ではないけれど、Twitter関連で少々。現在も継続中。

91ディレクターなどキャリアチェンジを考えてますか？一生コーダーを貫きますか？
キャリアチェンジ考え中。でもコーダーも貫きたい。

92特定のパートナー（彼女・彼氏・夫・妻）がいますか？相手は同業者ですか？
パートナーなし。

93パートナーは同業者がいい？別の職種がいい？
以前は別がよかったけれど、今はどちらでもいいと思うように。

94コーダーをやっててよかったなあと思うときは？
デザインよりも正解があること。

95何年後／何歳までコーダーをやるつもりですか？
自分が技術においつけないと挫折するまで。

96次の締め切りはいつですか？
次の金曜日。

97コーダー以外だったらどんな職に就きたいですか？
服飾

98よいコーダーの条件を３つあげてください。
手際がよい。
妥協できる。
とりあえず当たって砕ける。

9910年後、あなたは何をしてると思いますか？
ディレクターか隠居

100コーダーとしての自分を100点満点で評価してください。
60点

わたしが見学した被験者は私と同年代。
丁度ネットに慣れていてタッチタイピングも普通にできるお年頃です。

今回はとある登録フォームの使いやすさを検証です。

被験者の行動で気になったのは、注意書きを全く読まないこと。
フォームを利用していてエラーメッセージを出す事がありました。

私もよくやるのですが、
入力欄の近くにはよく「数字は半角で」「数字は全角で」と注意書きがあります。
それをロクの読みもせず、決定ボタンを押したあとにエラーが出て、
「ここは半角だったのか」と改めて確認する事が多々あります。

原因としては、文字が小さくて薄いということ。
入力欄の側にある注意書きや入力例って大体薄くて小さいものが多いです。
注意書きはあくまで注意書きなので文字を大きくする必要はないと感じますが、
赤のようなはっきりした色をつけると気がつきやすくなると思いました。

特に参考になった意見は以下のもの。

・エラーメッセージを頼りにして入力している
→説明を読むよりも一回入力してみてエラーだったらなおす。
これは私も同じスタンスです。
ユーザ登録はとても面倒なので早く済ませたい。
そう考える人結構多いと思います。

・数値入力はプルダウンの方がやりやすい。
→入力するのが面倒。
数値といえばやっぱり半角と全角の問題。
日本語でずーっと入力していたところにいきなり半角だとちょっと面倒ですよね。
その時にただ選ぶだけのプルダウンだと手間が省けます。
ただ、数値が膨大で探すのが面倒だという意見もありますが、
マウスのスクロール機能を使えばそんなに面倒じゃない気がします。

また、説明をロクに読まない人は直感に頼って情報を入力するので、
その項目が必須なのかどうかぱっと見て分かるようにする必要があります。

あと、ある方の意見でしたが、
入力するときにプルダウンを採用するのはいいことであるのですが、
マウスとキーボードの持ち替えが頻繁だと入力するリズムが狂うということです。
たしかに持ち替えが頻繁だと面倒に感じます。
入力項目の順番もユーザビリティの重要項目なんだと初めて気付きました。

また機会があったら見てみたいです。
今度は40代あたりがいいですね。

いやー、楽しいです。

って、一人っきりですがっ！

アメーバ内のコミュニティ的なものに全く参加していないため、
このような結果に。

さらに、テレビをあまり観ないという事もあるせいか、
芸能人にまったく興味がない！

しかも辻フォローがあまり許されないらしいいじゃないですか。
そんなの無理です…
だってアメーバで友達いないんだもの。

現在私はTwitterをやっているのですが、
結構ユルい感じで関わりたい時だけ関わるという
スタンスがとても好きなのです。

ネットで少しAmebaなうについて読んだのですが、
Amebaなうは女性が多いとのこと。
これは私の偏った考えですが、
女性的な女性が多いと、
ウチワな盛り上がりが好まれるのかなと感じます。

私はAmebaなう内で友達を作る事は全く考えていないので、
これからもAmebaなうを本気でやることはないのでしょう。
しかし、Twitterがブレイクした後に生まれた、
Twitterに似たサービスということで、
ネットでの評判は暫くみていきたいと思います。

※ああああああああ
　ああああああああ

↑を表現するCSS
padding-left:1em;
text-indent:-1em;

　あああああああああ
ああああああああああ

↑を表現するCSS
text-indent:1em;

※8/14なんか適当に書いてました。正しいものに更新しました。

前回の記事はこちら→http://www.tamago-tama.com/archives/2009/06/3-2.php

上記の記事で何がいけないかというと、中央のカラムをabsoluteにしたこと。
absoluteにすると絶対位置なので、下にボックスがあるともぐりこんでしまいます。
中央カラムがメインコンテンツや右端のコンテンツより縦が長い場合、
フッターが中央カラムに食い込んでしまいます。

そこで、今回また考え直してみました。

今回更新したサンプルはこちら。
http://www.tamago-tama.com/demo/3karam02/

構造も前回とかわらずです。

参考までにもう一度構造を載せておきます。

#NavLに対してabsoluteで位置を決定していましたが、
今回はネガティブマージンを利用しています。

ネガティブマージンでレイアウトを設定したところまではよかったのですが、
IE6とIE7で大幅なレイアウトくずれを起こしました。
両方のブラウザで#NavRと#NavLが画面外へ飛び出てしまうという現象です。

IE6はアンダースコアハックを使ってIE6用のネガティブマージン設定をして回避しました。
（画面外へ出ている分だけ、多めにマイナスマージンを設定しています）

IE7はmin-widthを設定することで回避しました。
そもそも、リキッドレイアウトの時は最小幅を設定した方がいいと思いましたので、
IE7への対処については通常通り最小幅を設定すれば回避されると思います。

悩みは、IE6ではmin-widthをサポートしていないので、
最小幅が無い状態になっています。

現在確認しているブラウザはこちらです
---------------------
WIｎ：IE6・IE7・FireFox2・FireFox3・Opera9・Chrome2
Mac：safari2・safari3・safari4・FireFox3・Opera9
iPhone safari
---------------------

但し、IE7とOpera9とFireFox2はブラウザ幅によっては、
各カラムの横が少し離れてしまいます。
コーディング時カラムが多少離れても気にならないように考える必要がありそうです。

あとChrome2では、ブラウザ幅をおもいっきり縮めると#NavRがカラム落ちします…

人生で可変+固定の3カラムリキッドレイアウトを組んだことがありませんでした。
時間のあるうちに試してみようと思い、調べてながら組んでみました。

珍しくサンプルを作りました。
サンプル→http://www.tamago-tama.com/demo/3karam/

今回参考にさせていただいた記事はこちらです。
3カラムで中央可変（リキッド）なレイアウト
http://blog.magical-remix.net/igalog/archives/171

全てのカラムが可変なら全ての幅をうまくパーセントで指定すればいいのですが、
今回は左端のコンテンツ部分のみ可変で、残りの右2つのカラムは固定にするという仕様。

そのようなレイアウトを使うときは、
「floatしたボックスのマージンを自身の横幅以上にマイナスするとHTMLの記述上で上に書かれているボックスに重なってしまう」という現象を利用します。

#breadはパンくずを入れることを想定してるので、多少長くなってもいいように#NavLをつきぬけています。

で、今回苦労したのは「中央可変」ではなく「左端可変」といういところ。
中央可変のサンプルは沢山あったのだけど、
左が可変というのがあまり見つけられませんでした。

よく考えたら中央可変の応用でいけるんじゃないか？と思い、
中央可変から自分なりに考えてみました。

まずは基本構造から。
通常の3カラムを作るときとほとんど変わりません。

#containerはナビ2つとコンテンツを囲むためにつけています。
#container {
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align:left;
}

#NavRは、マイナスマージンの現象を利用して#wrapperに重ねています。
#container #NavR {
float: right;
width: 190px;
margin-left: -200px;
padding: 5px;
}

#contentは、position: relative;のみを指定します。
#container #wrapper #content{
position: relative;
}

#mainには2つの右ナビゲーションの合計分だけ右マージンを設定します。
#container #wrapper #content #main{
margin: 0 400px 0 0;
padding: 5px;
}

#NavLは固定位置にしてトップからは0px・最右ナビの幅分だけ右からの位置づけをします。
#container #wrapper #content #NavL{
width: 190px;
padding: 5px;
position: absolute;
top: 0;
right: 200px;
}

現在確認しているブラウザは、
WIｎ：IE6・IE7・FireFox3・Chrome2
Mac：safari2・safari3・safari4・FireFox3・Opera9
iPhone safari

残念ながら、FireFox2でくずれていました・・・