CSS Nite LP, Disk 3　Coder’s High　レポート２ 【ライブコーディング編】


このセミナーの目玉のセッションは、なんといっても「ライブコーディング」。
Web業界で第一線で仕事をされている方のコーディング作業を生で見ることができるということで、大変楽しみにしてました。
CSS HappyLifeさん主催のコーディングコンテスト（既にデザインの決まった一枚絵（トップと製品情報ページ：左上画像参考）のデータが提供され、それを元にコーディングするというものです。）と連動で、このコンテストに応募すると２千円割引という嬉しい特典もありましたので、GW中に作成。なんとか２次締め切りには間に合いました。審査対象は１次締め切りまでだったので、審査は受けられなくてちと残念でした。しかし予習にもなって、セッションの内容が理解を深められたのでよかったです。


恥ずかしながら、自分の作ったページです。
●ホーム｜HappyLifeCompany
●HappyLifeマシン｜製品情報｜HappyLifeCompany
●ホーム｜HappyLifeCompany（CSS切り）
●HappyLifeマシン｜製品情報｜HappyLifeCompany（CSS切り）
急いで作ったので、自分でも中途半端。最初のマークアップ付けがイマイチでした。
優秀作品が出揃ったとこで見直しをするのに使おうと思い、ライブコーディング気になったところメモ書きです。
◆[SESSION-4] LIVE コーディング (A)　神森勉　さん　(T-STUDIO.com)
・先にxhtmlに適切なマークアップをしてから、CSSのスタイルをあてはめていく流れ
・デフォルト消去は、コードで各々設定。ユニバーサルセレクタは使用しない。
・「display:none」は音声ブラウザで読み上げられないので使用しない。文字白色化か絶対配置でとばす。
・メインメニューはemで強調の意味づけ。hoverの下ラインは、border-bottomで。
・最新情報は、dd,dtのfloatで。
・最新情報角丸３つテーブルテキスト部は、３つ一緒くたの画像を作成。
・ロゴ右突き出し部、サイトマップ/プライバシーポリシー、RSSはposition:absoluteで設定。
/
・CSSでハックを入れるとき、右クリックで表示される←CS3の仕様？
・画像ロールオーバーは、javascriptにクラスを付ける。
・ドリのデザインビューでCSSを切りながら確認。
神森さんのブラウザチェックについて詳しく書かれていたブログがありました。
●神森さんのセッションのアレ｜gaspanik weblog
今はこんなやり方が出来たとですね！！
今回のパネリストは全体的にマック使いが多かったので気になりました・・・。
◆[SESSION-7] LIVE コーディング (B)　河内正紀　さん　(ロクナナ) ・あらかじめどこでも使えるような汎用的なシートを作っておく（IE6用のハックも入れておく）
・スライス活用：メインメニューは連番で増やしていく
・positionの属性をちゃんと付ける（absolute,relative）
・ロゴはabsoluteで指定
・河内さんでも作るのに１５時間・・・
・フォントサイズ指定：html body :12px をデフォとし、各々の部分は％で指定する。
例えば12px÷10pxは84％（端数くり上げ）
・計算機はグーグルw
・ブロックを区切るラインは、一番下のブロックだけラインを出さないclass付けをする（名称例：last child)
・神森さんと同じく最新情報角丸３つテーブルは、３つ一緒くた画像を使用。
・IEは、小さすぎるサイズを敷き詰めるとCPに負担がかかるので、適当な大きさにした方がよい。
・テーブルもうまく使う（意味が通ればOK）河内さんは製品詳細情報の角丸内はテーブルで作成したらしい。
・写真とテキストリンクが一緒にある場合は、一つのaの中にくくってしまう。
・注文するボタンはformでマークアップ（データベースと連携することを考える）
◆コーディングコンテスト表彰・講評
審査員賞と、最優秀賞の発表が順にありました。発表者一覧は、CSS HappyLifeさんで公開されています。
●コンテストの結果とLP3を終えて by CSS HappyLife様
優秀者の方達のページも発表されるのを大変楽しみにしております。
特に満場一致で最優秀賞を取られたにんさん（女性）のはすごく楽しみです。
前にいらっしゃったにんさんは女性で、同時に改めて考えると、
そういえばこういうWeb業界のセミナーのパネリストや主催者で女性ってあまり見たことないなと思いました（矢野りんさんとかはデザイン寄りなのでまた別～）最後にずらっと並んでる主催者とパネリストも皆男性ですしね。。参加者は結構女性比率が高いのに。これからはこういう女性がどんどん頭角をあらわしてくれるといいなと、同時に自分もがんばろうと思った帰り道でした。

Web

Posted by ponnao