linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

CSS Nite LP, Disk 9「Coder's Higher」に行ってきたよ！

2010年04月20日 HTML/CSS/JavaScript 黒野明子黒野明子

火曜／金曜担当の@cremaです。

先週の土曜日（2010年4月17日）に開催された「CSS Nite LP, Disk 9『Coder's Higher』」に参加してきました。12:10から19:10まで7時間の超長丁場ですが、最初から最後までしっかり勉強です。

自称「デザイナー」の私ですが、HTMLコーディングはもちろん見逃したくない基本的知識なのです。しかもいま一番衆目を集めている「HTML5」「CSS3」「jQuery」の話題となれば、超期待。お知り合いの方も大勢参加されるということで、お祭り気分での参加となりました。

受講中は、フォロアーさんのご迷惑も顧みずTwitterで中継＋感想をポストしていましたので、そのまとめのカタチでブログ記事化しておきます。最初にお伝えしておきますが「超長文」です......。適当に必要そうなところだけお読みください。

開始直前

まずは、開始直前の意気込み。

  • 席確保。Tシャツ確保。周りの人と挨拶完了。飲み物と食べ物準備完了。今日は長丁場なので、あまりはしゃぎ過ぎないようにおとなしくしておかないと...。 #cssnitelp9 posted at 12:09:29

→こういった長時間の勉強会で必須なのは、「電源のある席」「スクリーンが見える位置」「お腹が空かないようにおやつ＋水分」「寒くないように余分の上着確保」ということで、しっかり準備をして臨みました。

マークアップエンジニアのキャリアパス（森田雄さん）

トップバッターは、前職ビジネス・アーキテクツ、ただいま読書家の@securecatこと森田雄さんの基調講演。ご本人のスライドとコメントは、ご自身のブログにまとめられています→CSS Nite LP, Disk 9 で基調講演(キーノート)を担当しました

  • . @securecatさんのセッションから開始です。 #cssnitelp9 posted at 12:15:36
  • とほほのWWW入門、大好きでしたよー。 #cssnitelp9 posted at 12:17:53
  • マークアップエンジニアの職能、長過ぎて書ききれないので、あとでの資料配布に期待。HTMLコーダーは、マークアップエンジニアに包含されている概念。 #cssnitelp9 posted at 12:27:29
  • 世間的には、「Webデザイナー」も「刺身にタンポポ」って思われている節もある気がするのですが、どーでしょね。 #cssnitelp9 posted at 12:28:40
  • マークアップエンジニアのキャリアパス。フロントエンドエンジニアとしてのスペシャリスト。ディレクター。マーケティング。プロデューサー。IA。UXD。 #cssnitelp9 posted at 12:30:30
  • 「元祖マークアップエンジニア」 @securecat 先生のセッション終了いたしましたー！お疲れさまでしたん;) #cssnitelp9 posted at 12:32:12
  • RT @waiz: RT @necoze: さっきのMEの職能のスライド。 http://twitpic.com/1g5qcg #cssnitelp9 posted at 12:41:03

→「マークアップエンジニア」の歴史や社会的地位、職能などについて、もう一度振り返るよい機会となりました。

XHTML&CSS超高速コーディング術（大藤幹さん＋大杉充さん）

私の周囲ではすでにバイブルと化している「XHTML&CSS超高速コーディング術」のリアルバージョンとしてのお話し。有名な自己啓発本「7つの習慣」と、効率的なコーディングについての共通点を紹介されながら、お話が進んでいきました。

  • 北海道組トップバッターの @ofujimiki さんと大杉さんの「XHTML&CSS超高速コーディング術LIVE!」始まりました。 #cssnitelp9 posted at 12:35:40
  • かの有名な牧野工房さんのお話しでございます。wktk #cssnitelp9 posted at 12:36:43
  • 「牧野工房」はサービス名。会社名は「スキルパートナーズ」さんです。会社のロゴはゴーヤではありません、とのこと（笑） #cssnitelp9 posted at 12:38:00
  • しかし今日は、北海道から沖縄まで、全国津々浦々のマークアップエンジニアさん＆moreが集まってますなー。お祭りだ！ #cssnitelp9 posted at 12:39:27
  • 「7つの習慣」との関連性。私も22歳の頃読んでました。 #cssnitelp9 posted at 12:40:24
  • 「XHTML&CSS超高速コーディング術」は、「7つの習慣」の自己啓発本フレイバーを取り込んでみたとのこと。きこりとノコギリのエピソードを紹介。うーん。こういうことありますよね...。 #cssnitelp9 posted at 12:43:49
  • 「コーディング作業が長引く原因と情報の管理」のお話し。 #cssnitelp9 posted at 12:44:44
  • より短い時間でコーディングするには？コーディング自体の速度を上げる。余計な作業が発生しないようにする（←これ大事、とのこと） #cssnitelp9 posted at 12:45:35
  • 長引く原因。仕様構成があとから変更される。原稿素材があとから変更される。情報の...（書き取れなかった）手戻りの発生を最小限に抑える。 #cssnitelp9 posted at 12:47:09
  • 牧野工房さんのサイト簡易 posted at 12:48:17
  • 牧野工房さんのサイト管理ファイル（Excel）のサンプル。 #cssnitelp9 posted at 12:49:41
  • 管理しなければならないことは、全部書き出しておく。とのこと。 #cssnitelp9 posted at 12:51:08
  • このExcelファイルの複数人での共有と書き込みは、どういう方法で行っているのかしら？ #cssnitelp9 posted at 12:52:03
  • コーディング作業の流れ。ページ・テンプレートの作成。基本テキスト要素のCSS設計。パーツ・テンプレートの作成。ページ・テンプレートからファイルを作成。パーツ・テンプレートの組み込み。テンプレート化されていない部分を作成。テキスト・画像の流し込み。 #cssnitelp9 posted at 12:55:38
  • よく聞きますねー。 RT @izuizu: 最近「モジュール」っていうところが増えてきましたよね。＞ テンプレート #cssnitelp9 posted at 12:56:00
  • シャドーコーディングのハナシで、なぜか小池スタイルの写真がwww #cssnitelp9 posted at 12:56:28
  • ですねぇ。あとで質問してみたいです。 RT @_kojika_: 同案多数でしょうけど、ベタにブックの共有かしら。でもあれ大きめファイルを多人数でやると怖いんですよねえ。 RT @crema: このExcelファイルの複数人での共有と書き込みは、どういう #cssnitelp9 posted at 12:57:24
  • ライブコーディング開始！ #cssnitelp9 posted at 12:58:12
  • RT @_kojika_: シャドーコーディング。まず脳内マクアプしてから着手する的な。ふつうな気もするけど、呼称のなかったその概念に呼称を付けるのは良い事。 #cssnitelp9 posted at 12:58:41
  • まずは共通部分から着手。ヘッダフッタサイドバーなど。内容の増減があった時でも対応できるように。サイト内で使い回せるものを割り出して作成。 #cssnitelp9 posted at 13:00:08
  • 作業手順。パーツの割り出し→シャドーコーディングとスライス→コーディング→チェック #cssnitelp9 posted at 13:00:58
  • 大杉さんは、Fireworks派。 #cssnitelp9 posted at 13:02:02
  • 割り出せそうな気がしますね。 RT @necoze: パーツの割り出しはデザイン出来上がった後なんかな？ ワイヤーの段階である程度割り出せたりはしない？ 制作会社の場合だと。 #cssnitelp9 posted at 13:04:01
  • 複数ページのデザイン画像の中で、共通のパーツとして割り出し終わったものは、消していくのですね。 なるほどー。 #cssnitelp9 posted at 13:06:09
  • RT @double_standard: デザインイメージから、パーツ化した部分を削除していく→未作成、共通化されないデザイン部分がはっきりしてくる。 #cssnitelp9 posted at 13:06:29
  • 私、ほとんどFireworks使わないので、こんどじっくり練習してみようっと。 #cssnitelp9 posted at 13:07:09
  • 同時に更新してしまった時のバッティングが、ちょっと怖いのですよねー。RT @kazumich: google Spreadsheets で表を作ると共有＆編集が楽かもしれませんよ。 RT @kedzu: 管理表作っても担当者と共有、更新するのが大変なんよ #cssnitelp9 posted at 13:09:13
  • RT @necoze: OOCSSの考え方についてはどう思われてるのか気になる。 http://d.hatena.ne.jp/in0in0/20100208/1265657205 #cssnitelp9 posted at 13:09:47
  • Fireworksのスライスの色って変えられるんだ！知らなかった。 #cssnitelp9 posted at 13:10:25
  • RT @kojitron: 全ページのデザインを、レイヤー情報を持たない一枚絵ファイルにし、そこからテンプレートパーツにできそうな部分をカットして、テンプレート用の別ファイルにコピペ。カット後の穴は開けたままにしておくとテンプレ化されてない部分がわかる #cssnitelp9 posted at 13:10:31
  • RT @aile_shoko: 私もそっちがいいな。 RT @izuizu: でも削除するとなにを削除したかわからなくなるから「切り取って別レイヤーにして非表示」がわたしにはいいかも。 #cssnitelp9 posted at 13:12:33
  • なるほどー。マシンスペックから見直してみますね。 RT @yuttie: PCのスペックにもよるとは思いたいんですが、CS4のFW重くて落ちるし最悪ですよ。RT @crema 私、ほとんどFireworks使わないので、こんどじっくり練習してみようっと。 #cssnitelp9 posted at 13:14:06
  • CSSは、パーツごと担当者ごと（？要確認）に細かく分けるスタイルみたい。 #cssnitelp9 posted at 13:15:43
  • なるほど！ RT @kotarok: Google Apps はバッティングしないよ RT @crema: 同時に更新してしまった時のバッティングが、ちょっと怖いのですよねー。RT @kazumich: google Spreadsheets で表 #cssnitelp9 posted at 13:17:27
  • RT @koba: CSS書いた人が違うとなると、詳細度でもめるとかもありそうですね。セレクタの書き方のルールとかはどうなってるんでしょうか？ #cssnitelp9 posted at 13:18:00
  • RT @kazumich: コーディングの仕事を外注で受ける専門の仕事をしてるのに最新版のDreamweaverとFireworksでないのが気になる。プレゼン用で使ってるのは普段の仕事とは違うからかな。 #cssnitelp9 posted at 13:18:13
  • メモ。お家に帰ったら、Google Appsをちゃんと調べる。 #cssnitelp9 posted at 13:18:58
  • RT @versionfive: RT @necoze: あくまでコーディングサービスの場合の手法ってことを踏まえて話を聞いた方が良いかも。うまくアレンジして実作業に活かせれば良いかなと。 #cssnitelp9 posted at 13:20:32
  • それは気になりました。 RT @gazirow: かなり細かくセレクタを指定せんと、パーツ別で違う人間がCSSを書くことはできないよなぁ。 #cssnitelp9 posted at 13:23:09
  • ありがとうございます;) RT @TanakaApple: ヒストリーを覚えておく回数を少なめにすると、やや軽く&安定しますよ。 RT @crema: なるほどー。マシンスペックから見直してみますね。 RT @yuttie: PCのスペックにもよるとは思 #cssnitelp9 posted at 13:23:56
  • RT @shokuto: 絵が完全に出来上がってからコードを書くというフローの場合の解説なので、そうじゃないフローの場合は、やり方というより考え方として吸収することを考えないとね。 #cssnitelp9 posted at 13:26:55
  • RT @hitoyam: 意図が読めない中途半端なガイドとかスライスとかを作るデザイナーさんがいるからコーダーさんが怒るのであって、デザイナーがそこちゃんとしてれば双方手間が省けると思うのよね。 #cssnitelp9 posted at 13:27:42
  • RT @kazumich: @shokuto CMSでサイトを構築する際には、モジュールの構成や、ある程度のレイアウトをデザインの前に準備して、後からデザインをする方がいいかもしれないと思ったりしています。 #cssnitelp9 posted at 13:30:52
  • RT @_kojika_: 詳細度アゲアゲのためにセレクタ記述がやたら長くなってくの、僕は好きだ！！ だが !important を予想外の場所で発動されて台無しの罠もまた人生 #cssnitelp9 posted at 13:33:44
  • ありがとうございます。使ってみようと思って、導入できていないダメ人間です＞＜ RT @tinybeans: spreadsheetはリアルタイムで他人が編集している場所が分かるので便利です。RT @crema: メモ。お家に帰ったら、Google App #cssnitelp9 posted at 13:34:29
  • 本をちゃんと買ったのに、積読しているダメ人間です。ごめんなさい＞＜ RT @webbingstudio: .@crema @gazirow 牧野工房の本によると、CSSセレクタは間違いが出ないよう、基本的に全階層を指定するそうです。　＞かなり細かくセレク #cssnitelp9 posted at 13:35:27
  • RT @magi1125: どれが親になって、どれのなかには何を許可する、みたいなのが、デザイン時点では割り出しきれない魔窟であり、非常に高度な設計を要求される部分だと思う #cssnitelp9 posted at 13:35:48
  • ですね。 RT @koba: とりあえず、今回のようなパーツ一覧をパパっと作ってしまってからページを展開していくのは必須ですよね #cssnitelp9 posted at 13:36:16
  • ライブコーディング終了。お疲れさまでーす。 #cssnitelp9 posted at 13:37:41
  • スキル大杉の「コーディング逆TIPS」コーナー。その1。classは2つつけるな。 #cssnitelp9 posted at 13:38:45
  • その2をとばして、その3。「div要素を無理に減らそうとするな！」 #cssnitelp9 posted at 13:42:22
  • RT @aile_shoko: RT @chaco: <div class="hoge hogehoge">みたいなやつね。CSSだと .hoge.hogehoge IE６で崩れるから #cssnitelp9 posted at 13:42:45
  • 自分用メモ。OOCSS を調べる。 RT @necoze: 「div要素を無理に減らそうとするな」これを突き詰めると最終的にOOCSSにたどり着くと思うのですよ。 #cssnitelp9 posted at 13:43:53
  • RT @double_standard: div増やすのは、よいのですが、「何用のDivなのか,」をコメントで残して置いてください。ガワ当てはめ係のプログラマからのお願いでした。 #cssnitelp9 posted at 13:45:36
  • . @necoze さんの質問。サイト管理用のExcelの運用法について。回答。ローカルネットワーク上のサーバにファイルを置いておき、みんなで書き込む。共有設定をしておくと、バッティングした時に教えてくれる。Google スプレッドシートを使うのも良い。 #cssnitelp9 posted at 13:49:13
  • RT @chaco: 過去のソースを使い回しはしない #cssnitelp9 posted at 13:49:59
  • ふむふむ。そのあたり勉強します！ RT @izuizu: そこやねんなー @koba モジュールベースでのコーディングをしなければ必要なかったりｗ　RT: @crema: 自分用メモ。OOCSS を調べる。 RT @necoze: 「div要素を無理に減ら #cssnitelp9 posted at 13:52:42
  • ありがとうございまーす！あとで拝読します。 RT @threepennie: こんなものらしいよ　http://d.hatena.ne.jp/in0in0/20100208/1265657205　RT @crema: OOCSS を調べ @necoze: #cssnitelp9 posted at 13:53:50
  • 情報ありがとうございます！ RT @akira_maru: @crema 同じセルに対しての競合さえ無ければ共有に支障はそんなにないかなと。数人でだろうし。 #cssnitelp9 posted at 14:11:11
  • RT @emim: jQueryで書換え後の形というかソースを考えるのこそシャドーコーディングって表現するのが私の中ではしっくり来たな、と思いました。 #cssnitelp9 posted at 14:39:10

→全体的に、「コーディングに特化した業務形態」ならではのテクニックが強調されているとは思いましたが、業務の効率化に関しては、本当に参考になることが多いと思いました。特に複数人でのサイト制作における情報管理をExcelまたはGoogle spreadseetで行うお話しも、linkerでも参考にしたいと考えています。タイムライン上で話題になっていた「OOCSS」については、後日学習予定ですね。

休憩時間

  • . @ofujimiki さんのiPhoneアプリの起動画面を見せると、沖縄のちんすこうをいただけるんですってw お腹空いたのでもらいに行こうっと。 #cssnitelp9 posted at 13:54:47
  • #cssnitelp9 ちんすこうゲット！ posted at 13:58:29

ということで、このあたりで糖分を確保です（笑）。

Coding with jQuery（徳田和規さん）

Web上で仲良くしていただいている@5509さんこと徳田和規さんのセッション。jQueryでの表現力をもっとサイトに取り入れたい私には必聴です。

→「ユーザーの利益を第一に」「JavaScriptオフ環境にも優しく」というポイントが、jQueryのみならずWebサイト制作全般の心構えとして印象に残ったセッションでした。

UI実装におけるコーディングあれこれ（長谷川広武さん）

ひとつ前の@5509さんと同じく、Web上でとてもお世話になっている@h2hamさんこと長谷川広武さんのセッション。

  • 今日の私は、ハムさんとお揃いのTシャツなんだぜ！ #cssnitelp9 posted at 14:54:31
  • ちびハムかわゆす！ #cssnitelp9 posted at 14:54:50
  • あ、セッションタイトルは「UI実装におけるコーディングあれこれ」です。 #cssnitelp9 posted at 14:55:18
  • 大阪の勉強会の名前は「ドットコーダー」。札幌の勉強会の名前は「サックス」。 #cssnitelp9 posted at 14:58:12
  • RT @chaco: 実装前に決めておくこと 動作、jsオフの時、対象ブラウザ、操作する部分をどこに記述するのか #cssnitelp9 posted at 14:58:29
  • 入力項目を修正する際にページ遷移無しで実装するサンプル。確認用モーダルウィンドウ。 #cssnitelp9 posted at 14:59:15
  • RT @necoze: 実装前に決めておくこと・動作（アニメーション・実行のタイミング）・JS OFF時への対応・対象ブラウザ・操作する部分のCSSを直接CSSに書くか、JSで書き出すか #cssnitelp9 posted at 15:00:14
  • RT @daim: 心に染みる。　RT @magi1125: 特に動作は仕様書として残しておかないと検証で死亡するよね #cssnitelp9 posted at 15:01:00
  • RT @withoutsugar: 福島は「遊部」。よろしくね！勝手に宣伝。 RT @crema: 大阪の勉強会の名前は「ドットコーダー」。札幌の勉強会の名前は「サックス」。 #cssnitelp9 posted at 15:01:13
  • RT @double_standard: 戻るボタンは、システム的にもバグが発生しやすい箇所なので、モーダルウィンドウ等で確認画面を作成しない仕様は嬉しい。 #cssnitelp9 posted at 15:01:32
  • RT @_kojika_: 複数の操作概念が同一箇所に適用されていないか、いるならどう協調動作すべきか、を仕様段階での最優先検討項目としたい #cssnitelp9 posted at 15:01:40
  • タブナビゲーションにした時のコンテンツが多くなったとき、複数のタブを見ていきたいとき、また上にもどって移動するのは面倒。 #cssnitelp9 posted at 15:02:42
  • コンテンツを読み終わったあとの下部に、いま見ているタブ以外のボタンを設置しておき、それをクリックするとするするスクロールとともに、クリックされたボタンの内容に切り替わる。 #cssnitelp9 posted at 15:04:59
  • 札幌の勉強会SACSS のロゴが、かわいい。 #cssnitelp9 posted at 15:06:10
  • イケメンですよw RT @milk54: やっぱりイケメンなんですね！ RT @chaco: @5509 を！イケメンw #cssnitelp9 posted at 15:06:33
  • 失敗談から学ぶheightLine.jsのハナシ。テスト環境と本番環境での違い。本番では一度に適用されてしまう数が、テスとの10倍ぐらいだった。解決策は、一度に適用する量を減らし、実行するタイミングをずらす。仕組みを変更。全要素ではなく、必要箇所のみに。 #cssnitelp9 posted at 15:10:31
  • RT @Zazie: ぜひしりたいところですね。RT @securecat: 便利になったかどうかについて、アクセス解析等で、効果検証してるんでしょうか？ してなかったら根拠まったくないんですけども。数値の変化を示して欲しいです。 #cssnitelp9 posted at 15:10:50
  • Watching: 透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた #cssnitelp9 http://h2ham.seesaa.net/article/124030086.html posted at 15:11:53
  • 西畑さんの jQueryデザイン入門、すごいプレミア価格になってる！ #cssnitelp9 http://bit.ly/cuUoSA posted at 15:13:57
  • 良くありますね。 RT @meihong: 位置を固定したモーダルでボタンを押せないなMTのファイルアップでもあったなー #cssnitelp9 posted at 15:15:42
  • そこら辺を後で直接話し合ってみて欲しいと思ったりw RT @securecat: 成功か失敗かが、タスクレベルのミッションだったり、プロジェクトのマネジメントレイヤーに起因するものであったり、クライアントの満足度(感想)の話だったりが混在してるのが気になり #cssnitelp9 posted at 15:17:03
  • むしろそこがメインっすよw RT @neotag: 懇親会での<del>場外乱闘</del><ins>議論</ins>が楽しみです。 RT @crema そこら辺を後で直接話し合ってみて欲しいと思ったりw RT @securecat: 成功か #cssnitelp9 posted at 15:23:57
  • RT @chaco: RT @magi1125: JSオフ用警告をページ先頭に書くと検索エンジンにdescriptionとして扱われて残念な思いをするので注意！ #cssnitelp9 posted at 15:25:55
  • ちゃんと最後にmukiロゴが出たw ハムさんお疲れさまでした！ #cssnitelp9 posted at 15:27:18

→WebページでJavaScriptを使ったり、Webサービス系のUI設計のお仕事に絡んだりすると、「画面遷移」や「ユーサーのオペレーションミス防止」のことをきちんとケアし、よりいっそう快適な体験をしてもらうことに心を砕く必要があります。その手順と心構えについて、非常に参考になったセッションでした。

なお、冒頭からそこかしこに「Tシャツ」という言葉が散見されますが、@5509さんと@h2hamさんが参加されている、Web上の某勉強会チャット（クローズド）の参加メンバーでお揃いのTシャツを作成し、このLP9というお祭りに臨んだのでした。しかし、参加メンバーでもTシャツを着用しなかった「裏切り者（笑）」が多かったため、私と@h2hamさんだけがやたらと目立ってしまっていたというオチでした......。

Webパフォーマンス最適化のためのコーディング手法（石本光司さん）

石川県からご参加の@t32kこと石本光司さんのセッション。最近注目を集めている「Webサイト表示の高速化」のお話しです。

  • 「Webパフォーマンス最適化のためのコーディング手法」 石本光司さん始まりました。サイトの表示パフォーマンスがGoogleの検索や広告などに与える影響について。 #cssnitelp9 posted at 15:55:47
  • 高速サイトがもたらす利益。再訪問数の増加。セッションあたりのPV数増加。コンバージョン数改善。 #cssnitelp9 posted at 15:56:26
  • コーダー／デザイナーは忙しい。 HTML5、CSS3、jQuiary、アクセシビリティ、ユーザビリティ、アクセス解析etc... #cssnitelp9 posted at 15:58:48
  • パンダの写真がウケたので、セッションを乗り切れる気分になられたとのことw #cssnitelp9 posted at 15:59:19
  • RT @ricochin: あとよく思うのは、開発環境って割とよいことが多いので、一般ユーザーの環境で見ると気づくことに気づけないんだなぁってこと。 #cssnitelp9 posted at 15:59:34
  • 最小限の対策で最大限の効果。 #cssnitelp9 posted at 15:59:50
  • ボトルネックはどこか？http://bit.ly/9g14Q でチェック。ウォーターフォールチャート。 #cssnitelp9 posted at 16:01:03
  • もし今度出るチャンスがあるとしたら、参考にしますw RT @hjfuji: CSSNiteのセッションでは動物の写真の使い方が鍵（笑） #cssnitelp9 posted at 16:01:42
  • サーバーのWait Timeは、必ずかかる税金のようなもの。 #cssnitelp9 posted at 16:04:59
  • HTTPリクエストを、ハンバーガー屋さんに例える。チーズバーガーを2個欲しい場合、「1個注文して1個お会計」を2回繰り返すか、「2個注文して1個お会計」ですませるのか。 #cssnitelp9 posted at 16:09:34
  • @t32k さんは、たとえ話のセンスがとてもいいな。分かりやすい。 #cssnitelp9 posted at 16:10:27
  • 写真のセレクトのセンスもすばらしす。で、CSSスプライトでHTTPリクエストを減らすお話し。 #cssnitelp9 posted at 16:11:27
  • 株式会社ドーガさんのサイト http://bit.ly/b739rK でのCSSスプライトの例。 #cssnitelp9 posted at 16:12:35
  • RT @necoze: CSSスプライトはFireworksの拡張使うとかなり便利ですよー。最近お世話に http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html #cssnitelp9 posted at 16:12:50
  • スプライトのジレンマは、ページ数。保守性。最適化。 #cssnitelp9 posted at 16:13:51
  • データURIスキームを使い、外部の画像ファイルを参照すること無く、画像をWebページのマークアップの中に、直接埋め込むことができる。 #cssnitelp9 posted at 16:15:25
  • データURIスキーム問題点。IE5-7非対応。ファイルサイズ制限。 #cssnitelp9 posted at 16:16:17
  • CSS,JSファイルを結合する。（その場合、多人数でのサイト制作／運営との折り合いが難しいな） #cssnitelp9 posted at 16:17:17
  • その場合は、一枚にまとめたCSSの中でPHPなどでインクルードするのも手。（MTテンプレートでもできるかも＞自分用メモ） #cssnitelp9 posted at 16:18:57
  • CSS3を最大限活用して、画像数を減らすとか。 #cssnitelp9 posted at 16:19:38
  • 奥の手＝デザインを変えればいいのでは？だったww #cssnitelp9 posted at 16:20:08
  • あれ、よーじっくさんきてたんだー＞ RT @Yozik: URIスキームはiPhoneサイトなら使えるかな #cssnitelp9 posted at 16:20:58
  • RT @necoze: 制作時は@importで分割して管理して、最終的に1つのCSSにまとめると良い #cssnitelp9 posted at 16:21:06
  • 今日はイケメンだらけ。 RT @necoze: イケメンだなぁ... #cssnitelp9 posted at 16:21:44
  • デザインを考え直してみる。SmoothScroll機能って必要？検索ボタンって必要？今後は、HTTPリクエストのコストについて学んだので、デザイナーと話し合ってみよう。 #cssnitelp9 posted at 16:23:11
  • RT @hitoyam: どこへ行っても「デザイナー＝コスト意識ない人」みたいなイメージが付いてくるのね。 #cssnitelp9 posted at 16:24:31
  • RT @securecat: そうそう、smoothscrollはそもそも誰も叩かないんですよね。慣れの妄信が生み出した産物。先頭に戻すのではなく次に進んで欲しいリンクを置くべき。 #cssnitelp9 posted at 16:24:40
  • RT @daim: ハイパフォーマンスWebサイトの続編に書いてあった！昨日読んだ。　RT @crema: スプライトのジレンマは、ページ数。保守性。最適化。 #cssnitelp9 posted at 16:25:12
  • おぉ、拝見します！ありがとうございますー。 RT @wokamoto: @crema WordPressだと、僕の作ってるプラグイン Head Cleaner が、複数のcss,jsを自動的に結合してくれるよ。 #cssnitelp9 posted at 16:25:48
  • RT @tomihisa: パフォーマンスの話はいろいろな切り口があって面白い:-) #cssnitelp9 posted at 16:26:16
  • RT @yhassy: Webデザインにある３つのコストについて書いた記事 #cssnitelp9 http://dlvr.it/XJ2v posted at 16:27:25

→HTTPリクエストをいかに減らすかの「コスト」のお話し、それを実現するためのCSSスプライトやCSS / JSの結合など、明日からの案件ですぐにでも取り入れたいテクニックが満載のセッションでした。

CSS3 for tomorrow [ver.LP9]（高津戸壮さん＋福田泰雄さん）

「CSS Nite in Ginza, Vol.45」でも大好評だったお二人（@takazudo,@sigwyg）による
、スライドもCSS3満載でできあがっている素敵セッションです。

  • 次は、 @takazudo + @sigwyg のお話し！前回の銀座のお話しも非常によかったので、超期待です！ #cssnitelp9 posted at 16:31:09
  • .@takazudo さんによるCSSアニメーションのお話し。それにしても、やっぱり @takazudo さんのお話しのユーモアセンスは、相当高いっす！ #cssnitelp9 posted at 16:34:51
  • この「あ！」とか「わ！」とかいうリアクションが、とても可愛らしいww #cssnitelp9 posted at 16:35:25
  • アニメーションをゆっくり再生すると、仕組みが分かりやすいなぁ。 #cssnitelp9 posted at 16:37:31
  • このにゃんこの可愛くなさすぎるかわいさは、すごくいい！ #cssnitelp9 posted at 16:38:45
  • ほんとですね！ RT @edo_m18: #cssnitelp9 @Takazudoさんの写真のチョイスがスバラシイ。 posted at 16:39:47
  • RT @chaco: ありがとうございまます！でも重い。RT @neotag: http://goo.gl/O9ua もう一個はわかりません＞＜ RT @chaco もういっかいURLほしい。 #cssnitelp9 posted at 16:41:55
  • RT @necoze: ここのDVDがコロコロでてくるのもtransformですよね（確か） http://forabeautifulweb.com/ #cssnitelp9 posted at 16:42:13
  • 「あ！ほら！」とかって、もうツボすぎるんですけどw #cssnitelp9 posted at 16:43:24
  • RT @chaco: O9がTakazudoさんのだね。RT @_kojika_: http://goo.gl/TRbO RT @neotag: http://goo.gl/O9ua もう一個はわかりません＞＜ RT @chaco もういっかいURLほしい #cssnitelp9 posted at 16:45:02
  • RT @cipher: CSS3のアニメーションとかな。　50 Awesome CSS3 Animations | Graphic and Web Design Blog http://bit.ly/9JqPHd #cssnitelp9 posted at 16:47:07
  • そう、JavaScriptとかCSSアニメーションとかを色々やり出すと、「時間軸」「動きの気持ちよさのセンス」という領域にも踏み込む訳ですな。善かれ悪しかれ。 #cssnitelp9 posted at 16:48:35
  • RT @hjfuji: CSS3が一般化すると、90年代以上にゴテゴテしたページが増えるかも（笑） #cssnitelp9 posted at 16:49:44
  • RT @tomix: . @crema それ、W3Cにも提案されてますね。CSS Variablesとか、こないだは、@masuidriveさんと、こんなの議論してました。http://bit.ly/649Bg3 *YF* posted at 16:49:58
  • 予想以上に @takazudo の女性ファンが多い件。懇親会が楽しみですね（違） #cssnitelp9 posted at 16:50:56
  • ですね、そんな予感。 RT @kazumich: @crema マークアップエンジニアがFlashでやってたようなアニメーションをつけて欲しいという要求を聞いて実装する時代が、そのうちやってくるという事かな。 #cssnitelp9 posted at 16:52:33
  • unobtrysive animation 出しゃばらないアニメーション。という考え方が大切。 #cssnitelp9 posted at 16:55:21
  • RT @chaco: jsのライブラリを使えばアニメーションできるけど、裏で大変、CSSとJSの両方かかなきゃ、キーフレームはjsでかくと大変、長いスクリプトの中にアニメーションがあると複雑さ増大、CSSアニメーションなら一時停止や再生も簡単 #cssnitelp9 posted at 16:56:13
  • うってかわってクールな喋り口の @sigwygさんのセッションスタート。 #cssnitelp9 posted at 16:58:25
  • RT @taka0205: webの要素は出現タイミングが今後重要になってくる（ってかすでになってる）ので、CSS3でもJQueryでもなんでも、実装は大事よね。時間軸までも考えるようになるのかー。 posted at 16:59:04
  • text-shadowについて。カンマで区切って、複数の影をつけることも可能。 #cssnitelp9 posted at 17:02:22
  • うお。typeすみません（汗） RT @securecat: unobtrusive ですよ。それにしても発音に嫉妬したw RT @crema: unobtrysive animation 出しゃばらないアニメーション。という考え方が大切。 #cssnitelp9 posted at 17:02:44
  • typoすらtypeとtypoした。。。もういいや。。。 #cssnitelp9 posted at 17:04:31
  • . @sigwigさんオススメの装飾的テキストサイトは、 http://bit.ly/6m2Vzg #cssnitelp9 posted at 17:07:33
  • RT @necoze: 「bodyにtext-shadowをものすごく小さな値で指定→XPなどアンチエイリアスオフ時にシャギーが目立ちにくくなる」ほほー。 #cssnitelp9 posted at 17:07:50
  • オススメサイトその2。30枚の影を重ねて、飛び出てくるかのような印象に。 http://bit.ly/aGB1Gd #cssnitelp9 posted at 17:09:30
  • オススメサイト３つ目のURLを見逃したなう。 #cssnitelp9 posted at 17:11:49
  • RT @chaco: Faruk Ateşhttp://farukat.es/ Progressive Enhancementの良い例 #cssnitelp9 posted at 17:12:06
  • Progressive Enhancementの定義、私が思ってたのとちょっと違ってたかな。 #cssnitelp9 posted at 17:13:57
  • ううん、これ。 Faruk Ateşhttp://bit.ly/NnXQs おかげで拾えた！ありがとー！ RT @chaco: これ？ SXSW Design Workshophttp://bit.ly/csPaH9 #cssnitelp9 posted at 17:16:01
  • iPhone以外でも、5年はかからないような気がします。単なる個人的な感触ですが。 RT @kazumich: iPhone用のサイトであれば今。RT @oppo240: いっても5年は先の話になりそうですね。RT @crema: ですね、そ... #cssnitelp9 posted at 17:17:21
  • 私も思ってたw RT @izuizu: 富士フイルムみたい「きれいな人（firefoxとか）はよりきれいに、そうでない人（IE）はそれなりに」 #cssnitelp9 posted at 17:17:38
  • RT @masawo69: Flasherとか... RT @tsuj マークアップエンジニアとデザイナーが完全分業してる場合、ここまで表現力が増したcss3はどちらがやるのかなぁ？ #cssnitelp9 posted at 17:31:24

→特筆したいポイントは二点。

ひとつめは、タイムラインでも話題になっていた「ここまで表現力を増したCSS3（や、JavaScript等）を、いったい誰が実装していくのかということです。「時間軸を考慮に入れた表現」「アニメーションの動きのセンス」の概念を併せ持った新しいマークアップエンジニア像が、頭の中に思い浮かびました。

ふたつめは、「@takazudoメソッド」とでも言うべき、独特のプレゼンの面白さです。スライドの中で特に動きが面白い場面になると「あ！ほら！」「わぁ！」と歓声をあげつつ笑いを誘う可愛らしいお話しぶりは、天性のセンスかと。ものすごくファンになりました（笑）。

ノリとツッコミで進める HTML5 ライブコーディング（小山田晃浩さん＋益子貴寛さん）

HTMLとCSSを極限まで追い求めているお二人のセッション。XHTML文書をもとにHTML5に書き直していこうという試みです。

  • 益子さんと小山田さんのセッション開始。「ノリとツッコミで進めるHTML5ライブコーディング」ひゃっほーぅ。 #cssnitelp9 posted at 17:40:51
  • HTML5で新しく登場する要素型について。XHTMLから、DOCTYPEを変更して、HTML5にしてみる。 #cssnitelp9 posted at 17:44:06
  • HTML5に変更することによって、head要素の中が簡略化されてすっきりした。 #cssnitelp9 posted at 17:46:23
  • RT @forestk: LP9 で HTML5 とか CSS3 とか jQuery とかいろいろ出てるだろうから、あえて書いておくけど「何ができるか」ではなく「それを使ってどうユーザにステキな体験を与えるか」が一番大事ですからね？ そこをはき違えないよう #cssnitelp9 posted at 17:46:43
  • RT @_anduril_: 実作業で一番ありそうですしねー QT @mackey405: XHTMLからってのがわかりやすくてすてきー #cssnitelp9 posted at 17:47:10
  • IE6がHTML5での新要素を認識しない問題を、html5.jsを使って解決する。 posted at 17:48:45
  • あらら、お大事になさいませ！先ほど名刺交換しておくべきでした。。。また次回に！ RT @versionfive: #cssnitelp9 てことでたいへん残念ですが、今日はおとなしく帰って体休めます。 posted at 17:49:19
  • <div id="header">を<header>に変更する。 #cssnitelp9 posted at 17:50:44
  • RT @vohedge: html5 headerタグはいくつ使ってもいいんだ。 #cssnitelp9 posted at 17:52:34
  • RT @chaco: <header>はページ全体のヘッダー以外でも使ってよい。 #cssnitelp9 posted at 17:52:37
  • はい！でも、無理なきように、なさってくださいね！ RT @versionfive: @crema すみませんー><またおわりがけにでもぜひよろしくお願いししますm(_ _)m posted at 17:54:01
  • RT @double_standard: ページ全体のheader fotterには、IDを付けておくと安心 #cssnitelp9 posted at 17:54:09
  • <section>は、<hx>の効果範囲を明示的にする為に使う。（いままでXHTMLでは、<div class="section">使ってましたー）#cssnitelp9 posted at 17:57:03
  • <section>を使うことによって、文書のアウトラインが形成されると、将来的に音声ブラウザなどでの読みとばしなどに対応できるかも。 #cssnitelp9 posted at 17:57:29
  • 記事の本文範囲を、<article>で囲う。<article>は、1ページに複数回出てくる可能性あり。ブログのように1ページに複数記事が掲載される場合などには、<article>が幅数回出現することがある。 #cssnitelp9 posted at 18:00:03
  • 主体となるナビゲーションをマークアップするのが<nav> #cssnitelp9 posted at 18:00:39
  • 主要ではないリンクリストを何でもかんでも<nav>で囲むのは間違い。 #cssnitelp9 posted at 18:02:20
  • RT @versionfive: 小山田さん「自分を信じてやってみてください」 #cssnitelp9 posted at 18:02:50
  • 本文とは関係ない「余談」は、<aside>でマークアップする。 #cssnitelp9 posted at 18:03:20
  • 広告バナーなどを<aside>でマークアップした場合、クライアントの心証を害する恐れがあるのでは？（そこまで分かったらすごいww） #cssnitelp9 posted at 18:04:44
  • 本文に関係する画像、動画、表は<figure>でマークアップ。説明文は<figcaption>を使用。 #cssnitelp9 posted at 18:08:23
  • RT @project_59: これは支持せざるを得ない。けどちょっと複雑。 RT @gryng02: IE6非対応で減税・補助金つけよう #cssnitelp9 posted at 18:08:43
  • RT @necoze: ・figure 本文と関係ある図とか表とかの画像/そうでないものはdivやpで　・figcaption＝キャプション用の要素 #cssnitelp9 posted at 18:08:53
  • 読みがなのマークアップ実例＞<ruby>畑耕作<rp>（</rp><rt>はたけこうさく</rt><rp>）</rp></ruby> #cssnitelp9 posted at 18:11:01
  • 日時をマークアップ例→<time datetime="1939-23-24">18歳の誕生日</time> #cssnitelp9 posted at 18:12:52
  • Watching: CSSを拡張するプリプロセッサを考える - @masuidrive blog http://blog.masuidrive.jp/index.php/2010/01/20/css-enhancer/ posted at 18:14:30
  • <small>要素は細目に使う。 #cssnitelp9 posted at 18:15:57
  • RT @kzms2: 各ブラウザのcss3とhtml5の対応状況はココが素敵ですよね。 http://bit.ly/cycs4x #cssnitelp9 posted at 18:16:04
  • RT @chaco: Copyright などライセンス的なものは<small>でマークアップ。前とは意味合いが変わっている。 #cssnitelp9 posted at 18:16:24
  • あとで懇親会の時に、聞けたら聞いてみますw RT @daiske_: @crema header とか nav footerなどをレイアウトに使用しない！的なことがどこかに書いてあったのですが、どうなんですか？？ #cssnitelp9 posted at 18:16:59
  • RT @Zazie: RT @necoze: copyrightとaddressについては雄さんのエントリが分かりやすいかも。 http://bit.ly/9elVWh #cssnitelp9 posted at 18:18:43
  • <video>要素で動画埋め込み。controls属性でコントロール表示。ブラウザによって再生可能な動画の形式が違うので、複数の<sorce>要素を入れる。 #cssnitelp9 posted at 18:20:12
  • さっき「くれまさんはデザイナーであってマークアップエンジニアではないから、今日の内容は必要ではないのでは？」って冗談半分にいわれたのだけれど、HTML5とCSS3で何ができるのかが分からなければ、それで実現できるWebサイトデザインはできないと思うんです。 #cssnitelp9 posted at 18:24:30
  • RT @cipher: こういうの流すと役に立つのかしら。　html5media - Project Hosting on Google Code http://bit.ly/drX5W8 #cssnitelp9 posted at 18:24:58
  • RT @yozik: そういえばXHTML2.0でhref属性がほとんどのタグで使えるようになるっていう話があったけど、HTML5ではどうなったんだろう。期待してたのに。#cssnitelp9 posted at 18:25:13
  • だから、私が今日ここにいるのは、おかしなことじゃないと思う。（って、あとで本人にいえばいいのかw） #cssnitelp9 posted at 18:26:05
  • .@akira_maru さんのDWの拡張機能が紹介されましたー。 #cssnitelp9 posted at 18:27:04
  • 益子さんと小山田さんのセッション、すごく理解しやすかったです！ありがとうございました！ #cssnitelp9 posted at 18:27:32

→慣れ親しんだXHTMLからHTML5に変更していくという説明手法がとても有効で、とても分かりやすく勉強になりました。このセッション内容そのものももちろんですが、「説明手法」としても非常に参考になるものだったと思います。

今日から使えるHTML5 API（羽田野太巳さん）

「母国語はPerl」を公言している、羽田野太巳さんのセッション。最近刊の「徹底解説HTML5マークアップガイドブック」も話題なのです。

  • 羽田野さんのセッションスタート。母国語はPerl ww #cssnitelp9 posted at 18:28:31
  • <canvas>にAPIを規定するお話し。わーん、とたんに難しくなってきたお！ #cssnitelp9 posted at 18:32:37
  • RT @daim: そういえばHTML5ではブロック要素とインライン要素の区別は無くなったんだよね？ #cssnitelp9 posted at 18:32:47
  • RT @chaco: マークアップが全くわからないデザイナーさんのデザインは、コーディングが大変なことが多いと思う。#cssnitelp9 posted at 18:33:17
  • 以前渋谷のGoogleのイベントで伺ったお話より、幾分デザイナー向きのお話しかにゃ。 #cssnitelp9 posted at 18:36:49
  • CSS3のようなアニメーション的な機能は、cabvasでもできる。 #cssnitelp9 posted at 18:37:39
  • RT @necoze: これからデザイナーもマークアッパーもプログラマーも間の垣根を飛び越えて、コミュニケーションを密にしていかないといけないっすよね、とCSS3やHTML5の話聞いてて思う。WDEでも同じこと考えてたけど（要復習） #cssnitelp9 posted at 18:38:33
  • RT @kazumich: Canvasはビットマップ #cssnitelp9 posted at 18:38:38
  • RT @meihong: これ、HTML5が普及してくるとHTMLとCSSと既存のJSの流用しかできません＞＜　みたいなコーダーは淘汰されかねんなー #cssnitelp9 posted at 18:38:55
  • 懇親会でもいっぱい宣伝しておきますねw RT @akira_maru: @mariroom @crema それでいきなりtwitterのフォローが何件かきたのですね。w posted at 18:39:37
  • 確かに！ RT @koba: 一応XSLTもプログラムみたいなｗ　RT: @tomix: とうとうコーダーがプログラマーにならないといけない日がきた？　その辺のレポートよろしく　RT @Zazie: いよいよ最後のセッション！\@kojitron #cssnitelp9 *YF* posted at 18:40:36
  • canvasはIEを除いて全て実装済みなう。 #cssnitelp9 posted at 18:41:10
  • Videoのコントロールは、ブラウザによって見た目が違う。 #cssnitelp9 posted at 18:41:43
  • HTML5 Video Player サイトの例。YouTubeとVimeo。 #cssnitelp9 posted at 18:42:57
  • そうそう。デザイナーにはかなり敷居高いですが、html5-developers-jpのMLを眺めてるだけでも、いま何が進行しているか感じられていいですお。http://bit.ly/cX3j81 #cssnitelp9 posted at 18:45:24
  • 要素のドラッグアンドドロップデモ。 #cssnitelp9 posted at 18:46:39
  • RT @gnta: Webの話は意図せずとも気づくとIEのdisり大会になってしまうな...。 #cssnitelp9 posted at 18:47:00
  • draggable属性をtrueにすることで、あらゆる要素がドラッグ可能に。 #cssnitelp9 posted at 18:48:38
  • Gmailへのファイル添付がドラッグアンドドロップで可能になった件。 #cssnitelp9 posted at 18:50:19
  • HTML5によって、デスクトップアプリケーションとWebアプリケーションの垣根が無くなりつつある。 #cssnitelp9 posted at 18:51:21
  • それはおっしゃる通りだと思います。真剣に。 RT @securecat: なんで他人でもやれることに手を広げて自分にしかできないことに特化してかないの？それじゃあHTML5とか待たずして淘汰されるよ。 #cssnitelp9 posted at 18:51:45
  • Web Storageの特徴。（前もここでつまづいた記憶がw） #cssnitelp9 posted at 18:53:21
  • 使えるブラウザが限定されているかもです（まだちょっとよく分かってない） RT @decoco: え、そうなの！ QT @crema: Gmailへのファイル添付がドラッグアンドドロップで可能になった件。 #cssnitelp9 posted at 18:54:28
  • RT @kazumissimi: RT @chaco: 手を広げるというより、知識として浅めに持っておく程度かなと思いますが。RT @securecat: なんで他人でもやれることに手を広げて自分にしかできないことに特化してかないの？それじゃあHTML5と #cssnitelp9 posted at 18:56:09
  • 今日の懇親会では、誰がどういう知識を持ってどういう職務範囲で何をやるかとかいう話題になるかもですなー。まぁ、最終的には自分が心地よいと感じる仕事内容をすればいいのだとは思いますけれども。。。 #cssnitelp9 posted at 18:58:21
  • RT @securecat: わからない/できない→淘汰されるっていう思考じゃなく、わかることできることを高めていく思考のがいいよっていう話 RT @chaco: 手を広げるというより、知識として浅めに持っておく程度かなと思いますが。 #cssnitelp9 posted at 19:00:13
  • RT @chaco: HTML5のAPIはJavascriptが必須 #cssnitelp9 posted at 19:00:48
  • ますますリッチなユーザー体験がHTML5によって加速。 #cssnitelp9 posted at 19:01:46
  • IE6の訃報。お葬式も行われたのですね。 #cssnitelp9 posted at 19:02:24
  • RT @Zazie: 出来ることが増えて、さてどう有効に使うかだなー。あと、知らなかった、出来なかったはないようにしないと。 #cssnitelp9 posted at 19:02:51
  • RT @decoco: 今からコーダーになるわけではないし、デザイナーにもなるわけではないし、でも知ることで可能性を広げられるならとことん突き詰めていかないと、という思い #cssnitelp9 posted at 19:15:19

→以前渋谷のGoogleさんでのイベントでお話を聞いたときよりは若干デザイナー寄りの内容でしたが、それでも私の理解力ではかなりついていくのが難しいセッションではありました。ただ、羽田野さんのHTML5に対する熱意や「こんな事ができるのってすごいでしょ！」という少年のようなワクワク感が素晴らしく、私もどうにかしてこの世界を理解したいという希望を持っています！

コーディングコンテスト結果発表

このCSS Nite LP, Disk 9「Coder's Higher」に合わせて開催された「第2回コーディングコンテスト」の結果発表です。

用意されたデザインを参加者がそれぞれ個々のスキルや考えに基づいてコーディングします。第2回は現在策定中であるHTML5+CSS3を利用し、テクニック、デザイン再現性、メンテナンス性の高さを競います。

ということで、皆さんの個性と創意工夫が問われる訳ですね！

  • セッション全て終了！みなさま、本当にお疲れさまでした＆ありがとうございました！いまからコーディングコンテストの結果発表です。 #cssnitelp9 posted at 19:03:54
  • RT @karenworks: 強烈。http://ie6funeral.com/ #cssnitelp9 posted at 19:05:25
  • コーディングコンテスト応募有効数81。デザイン素材はmovale type5の新機能を紹介するページを @emim さんがデザイン。 #cssnitelp9 posted at 19:06:58
  • .@kyosuke @emim @mayumine @kotarok @kaminogoya @yomotsu @hira @vant @kazumanishihata @hamashun @takazudo @purprin という豪華審査員が壇上に。 #cssnitelp9 posted at 19:11:25
  • シックスアパート賞は「まりお」さん。ピクセルグリッド賞は「竹内美帆」さん。サイバーガーデン賞は「フルカワ」さん。FireFoxは「versionfive」さん。WebSite Expert賞は「えど」さん。 #cssnitelp9 posted at 19:13:31
  • awesome!クリエイターズショップ賞は「（スミマセン聴きのがしました）] posted at 19:13:55
  • awesome!クリエイターズショップ賞は「（スミマセン聴きのがしました）」さん。マイクロソフト賞は「tshinobu」さん。毎日コミュニケーションズ書籍編集部賞「りんぺい」さん。 #cssnitelp9 posted at 19:15:00
  • 入賞作品。面白い作品。 @koba 入ってる！よかったっすねー;) #cssnitelp9 posted at 19:16:30

→ということで、受賞者の皆さん、おめでとうございました！！！！！

最後に

いつもながら、主催者の鷹野さん、スピーカーとスタッフの皆さん、一緒に勉強した参加者の皆さんに、心からの感謝を述べたいと思います。ありがとうございます。

新しい技術と知識を自分の血肉としてとりいれ、クライアントさんに貢献できるかは、自分の努力次第。最近、自分を試される毎日が続いていますが、色々と試しながら成長を続けていこうと決意しています。

余談

私がTwitter上でがんがんつぶやいている間に、興味深いお話しが並走して展開されていたので、少し拾ってみました。

  • Twitterのハッシュタグを使って勉強会の実況をしてると、自分が聞き漏らした部分を他の人がメモってくださってたりするので、本当に素晴らしい。みんなで勉強してる感じが、とてもよい。 #cssnitelp9 posted at 13:22:14
  • ですよね！この楽しさ、北川さんにも教えたいですw RT @kiyotoi: ツイッター使うようになった要因の一つがこれでした。 RT @crema Twitterのハッシュタグを使って勉強会の実況をしてると、自分が聞き漏らした部分を他の人がメモってくださっ #cssnitelp9 posted at 13:50:57
  • ですよね！ RT @kotaro269: ツイッターの面白さを始めて理解したのがセミナーでハッシュタグ使った時だった。ボーッとしててもタグ追えばいいしね！RT @crema: Twitterのハッシュタグを使って勉強会の実況をしてると、自分が聞き漏らした部 #cssnitelp9 posted at 14:40:30

→「Twitterのハッシュタグを使った勉強会の実況」について、@kiyotoiさんと@kotaro269というお二人の有名ブロガーさんが反応してくださったのが印象的でした。

  • そうなんですよね。さっきから、ずっとそれを考えてました。 RT @shokuto: RT @tomix: CMS前提になってから、IAもコーディングも、ワークフローや手法が、自分のなかで明らかに変わってきてる。でも以外にその知見について語ってる #cssnitelp9 *YF* posted at 13:40:00
  • やっぱりw あとCSSの色々な部分で同じ色を使う場合、どこかで変数にしておけば、一発色変換できるよなーっていつも思ってるのですが、試してないっす。 RT @tomix: うんうん　同じ事考えてた！ RT @crema（MTテンプレートでもできるかも） #cssnitelp9 posted at 16:33:02
  • やりたいですー！長めのスパンで考えましょう。ぜひ。 RT @tomix: . @crema その件、ぜひ勉強会というか、研究会やりたいですね。まじで切実。 #cssnitelp9 posted at 13:51:45

→CMS前提のサイトの設計手法や、CSSに変数を取り入れる話など、近々に@tomixさんと勉強会をしたいということで、メモとして残しておきます。

2010年04月20日

CSS Nite , CSS3 , html5