CSS Nite LP9 連動 第2回コーディングコンテストの課題を無事に提出する事ができました。

「１日あれば終わるかな〜」と思っていましたが、２日がかりの大仕事となりました。。html5もCSS3もがっつり触った事がなかったので、知らない事もたくさん。。かなり勉強になりました。

と、いうことで、恥ずかしいコードですが、提出した課題を晒したいと思います。

その前に、どんな課題だったのかを簡単におさらい。

• HTML部分
  • HTML5（参照する仕様は編集者版を想定 http://dev.w3.org/html5/spec/）
  • WAI-ARIA、RDFaなどの拡張は審査対象外（使用するのはかまいません）
  • 画像、CSS、JavaScriptは相対パス指定、リンク先は絶対パスで指定してください。
• CSS部分
  • CSS3までを利用できる
• JavaScript
  • 利用自由
  • 商用サイトとしてライセンスに違反しない限りライブラリの利用自由
• 文字コード
  • 自由
• 対応ブラウザ
  • Firefox 3.6
  • Safari 4
  • そのほかのブラウザでは情報が正しく伝わること。デザインの再現は必要ありません

html5とCSS3を自由に使っていい、という実務ではまずあり得ない課題でした。

二日かけてコーディング。こんな感じになりました。

実際のソースはこちら。Safari（chrome）かFirefoxで表示してみてください。

ソースコード

もっと時間があればな〜〜といったところもたくさんあって恥ずかしいです。。あ、ちなみにwindowsで一度も表示確認してません。笑 おうちにwindowsマシンがなくて・・・・・・

苦労したところなど。。

bodyの背景

グラデ＋ドットの画像＋上部のボーダーとその影、といういきなり鬼デザイン。背景のグラデは高さが決まっているようなので「background-size」でグラデの高さを決め打ちに。しかし固定したグラデがリピートしてしまう問題に直面。。試しに「no-repeat」を指定してみたらリピートしなくなりました。上部のボーダーの影はとりあえず諦めて先に進みました。（結局、影を表示するだけの空divをjsで生成して配置することで解決しました。）

マルチカラムレイアウト

display: box;を指定すると子要素が綺麗に並ぶらしいということだったので実際に使ってみました。floatを使うよりもシンプルで挙動も分かりやすくていいですね〜。ラクチンでした。幅の指定にやや癖があるので慣れかなーといったところ。気のせいかもしれないですが、display: boxを指定したところの上下のマージンが相殺されなくなってしまいました。気にせず進めましたが。笑

検索ボックス

検索ボックスの入力フォームに透けている「サイト内検索」のテキストがFirefoxでは未実装のまま提出してしまいました。。。Safariではinputにplaceholder="hogehoge"と指定する事で実装できました。Firefoxでも背景画像としてテキストを配置すれば同じように実装することが可能でしたが、あえてやりませんでした。たいした理由ではないですが、今後Firefoxがバージョンアップしてplaceholderに対応したら、二重に表示されてしまうかなーと思ったので。。。

とまあ、こんな感じで

いやはや、何年後かにこのソースを見ると赤面して死にたくなるんだろうけど、無事に提出できてよかったと思います。参加したことに意義がある！ということで。。。

このCSS3のアニメーションに衝撃を受けまして、ちょっと自分もCSS3で遊んでみました。

と、その前に、最初に覚える約束事「-webkit-perspective」

CSS3でZ軸（奥行き）の指定を反映させるためには、親要素（かな？）に「-webkit-perspective」の指定を行わなくてはいけないみたい。これは「奥行き感の強さ」ということで理解しましたが、そんな感じであってるでしょうか。

わかりやすくアニメーションにしてみました。

demo(safari)

要素の位置は動かさず、-webkit-perspectiveだけを200〜50で変化させています。こんなに違って見えるんですねー

ということで、CSSアニメーションで遊んでみました。（※MacのSafariでしか確認してないから、windowsで動いてなかったらごめんなさい）

X軸回転の組み合わせ

パネルが立体的に回転。キモい動き。

demo(safari)

以下がアニメーション部分のCSSです。詳しいCSSはソースを覗いてみてください。

@-webkit-keyframes wrapperAnimation {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(180deg); }
	100%  { -webkit-transform: rotateX(360deg); }
}
@-webkit-keyframes innerAnimation {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(-180deg); }
	100%  { -webkit-transform: rotateX(-360deg); }
}

MATRIX（もしくは地球の本棚）のような動き

奥から要素が高速でやってくる、そこまでキモくない動き。

demo(safari)

@-webkit-keyframes move {
	0%    { -webkit-transform: rotateX(85deg) translateZ(-600px); }
	100%  { -webkit-transform: rotateX(85deg) translateZ(800px); }
}

jQuery1.4でdelayができるようになったので、なめらかに広がるプルダウンメニューを作ってみました

子要素が現れるアニメーションに少しずつ時差をつけています。

.delay( duration, [ queueName ] )

.delay() – jQuery API

demo

サンプルページ（場所がなかったからdropboxだけど）

js

function delaymenu(){
	$(".navGlobalLayer2 li a").fadeTo(0,0);
	$(".navGlobalItem").hover(
		function() {
			var itemarea = $(this).find('.itemarea');
			itemarea.each(
				function(i){
					$(this).stop().css('display','block').delay(i*45).fadeTo('normal',1);
				}
			);
		} ,
		function() {
			var itemarea = $(this).find('.itemarea');
			itemarea.stop().fadeTo(
				'fast',
				0,
				function(){
					itemarea.css('display','none');
				}
			);
		}
	);
}

1年齢は？

22

2パソコン歴は？

7、8年

3コーダー歴はどれくらいですか？

お給料をもらえるようになって3年。趣味で+1年。

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

大学生のとき

5コーダーになろうと思ったきっかけは？

なりゆき。最初に覚えたことだったからｗ

6コーディングは誰に／どこで習いましたか？

まこっちゃんと一緒に覚えた気がする。ほぼ独学。

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

あんまりしないかも。

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

ヤフオク中毒

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

ほぼ0。だいたいメガネ。

10本はAmazonで買いますか？

半々ぐらいです。amazonで衝動買いが止まらない

11ネットショッピングをしますか？主に買うものは何ですか？

楽天でお取り寄せスイーツとかたまにやる

12携帯サイトで買い物をしたことがありますか？

服の福袋とか買いまくりです。

13お酒は強いですか？

最弱ですが好きです。

14休日の過ごし方を教えて下さい。

基本ヒキコモリ。skypeしながらモンハン。あと展示を観に行ったり飲みに行ったり。

15今、欲しいものは何ですか？

お金

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

5時間

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

7:00

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

無理です

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

無趣味だけどカラオケとか好き

20コーディングに役立つ資格、パソコン関係の資格を持ってますか？

車の免許以外の資格を持ってない…なにも…

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

昼

22ブラインドタッチは教本通り10本の指を使いますか？

教本通りじゃないけどブラインドタッチできるよ！！！！

23眠い時の対処法はありますか？

ちょっとだけ寝る

24息抜きについ見てしまうサイトはなんですか？

mixi、twitter、amazon

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

コンビニまでお散歩

26仕事上で得意なことはありますか？それは何ですか？

早く帰る

27仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？

ニコニコでてきとうに作業用BGMを探して聞いてます

28作業パソコンはWin?Mac?

windowsです

29作業パソコンはデスクトップ？ノート？

デスクトップです

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

最近無線のマウスにしました。（自腹）

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

つかってません。

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

無駄にCS3のマスターコレクションが入ってます。

33作業パソコンはモニタは何インチですか？

何インチかわからないけど大きいです。

34自宅にパソコン持ってますか？いくつありますか？

Mac Bookとおんぼろwindowsノート。

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

ほぼないです

36会社と自宅、作業はどちらがはかどりますか？

自宅でほぼ作業できない…

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

自分用です。独身。

38自宅パソコンはWin?Mac?

両方あります。MacメインでWinはモンハン用

39自宅パソコンのメーカーは何ですか？

Apple

40自宅パソコンはデスクトップ？ノート？

ノート

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

テキスト

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

Googleカレンダー

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

Gmail

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

Google Reader

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

BIGLOBE。むだに懸賞が多い

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

はてブ？

47不得意だけど使わねばならない技術はありますか？

たまにjs

48web系の雑誌を購読していますか？

昔は読んでたけど最近は読んでないです。近くにないから。

49webの参考書は何冊くらい持っていますか？

ASの本が2冊。htmlの本が1冊。IAの本が1冊。

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

大重美幸さんのASの本はわかりやすかったです。

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

たくさんありすぎて・・・

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

ほぼDwまかせ・・

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

閉じタグの手前にだけつけるかも。

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

コーディングの最初の3時間くらい。

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

なにがきてもphotoshop一択。

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

photoshop一択。

57検証対象ブラウザは何個ありますか？

IE678、FF3、Safari4、Chrome

58一から新規制作とリニューアル、どちらが好きですか？

どっちも好き！

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

定期運用は途中で飽きそうだから新規の方が好き

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

ほとんどないです

61新規制作の割合はどれくらいですか？

50%ぐらいかなあ。。

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

無いです。

63よく使うJavaScriptがあったら教えて下さい。

meca.js

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

ちょいちょいあります

65FLASHはどのくらいできますか？

卒業制作でAS3をちょっと覚えた程度。

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

自分ひとりでmixiアプリとか作れるようになりたい。けど何を覚えてイイかわからないｗ

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

自分ひとりで書くやつは綺麗だと思うけど、周りにあわせて書くのは苦手。

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

テンプレあります。自分で作ったわけじゃないけど。

69単語登録にタグを登録していますか？

してない！したい！

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

placeholderとか便利ー早く使いたい

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

アニメーションとか超ｗｋｔｋ！こっそり使ってる！

72コーディングで伸ばしたい技術は？

丁寧さ

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

髪のセット

74職場にコーダー専門職は何人いますか？兼務は何人ですか？

ME課は4人です。兼務はデザイナー全員？

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

ME課は2:2です。

76勤務時間は何時から何時までですか？

10:00〜23:00

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

1時間

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

残業ってどこからどこまでなんだろう

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

なかよし

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

基本コーダー。でもいろいろやる

81職場は服装自由ですか？何か規則はありますか？

自由です

82休日出社や徹夜作業はありますか？

あります

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

あるけどほとんど放置です。twitterとmixiで満足しちゃうｗ

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

ないです

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

ないです

86CSS Niteには何回行きましたか？

1回

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

ありません

88尊敬するwebクリエイターがいたら教えて下さい。

前の職場の代表二人はマジパネェ

89旅行に行く時パソコンを持っていきますか？持っていきたいですか？

持って行きません。箸より重いものを持てないのです。

90好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？

学生時代に東京学生映画祭のサイト作った

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

キャリアチェンジしてみたいけど、技術がないですｗ

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

いません。募集中

93パートナーは同業者がいい？別の職種がいい？

同業者はちょっと・・・

94コーダーをやっててよかったなあと思うときは？

デザイナーさんともPGさんとも仲良くなれる

95何年後／何歳までコーダーをやるつもりですか？

んー考えたことないなあ

96次の締め切りはいつですか？

来週かな？

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

俳優。仮面ライダーの。

98よいコーダーの条件を３つあげてください。

愛されキャラ。しっかりもの。真面目。

9910年後、あなたは何をしてると思いますか？

死んでるかも。野菜食べれないから…。

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

10点くらい。