モンスターカレンダー

« 2014年1月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

CSSの最近のブログ記事

4月に行われたLP9の再演ということですが、内容も少し違うようですし、
なにより、コーディングコンテストの解説が聞きたかったので、参加を決めました。

今回のお供は、「iPad」ちゃん。結局電源やら何やらで重くなりましたが、
MacBookよりは軽くて、肩が痛くなるようなことはなかったです。
しかし、もっとわんさかいるかなーと思っていたのに、ほとんどいませんでしたね、iPad保持者。
ノートを持ってきている人も少ない感じで、TLも前回より静かだったと思います。

各セッション

前回のものに少しプラスされたものがほとんどでしたが、
前回はなかった基礎編もありました。
それでも、一度聞いた内容が多かったので、私としては理解度は高かったと思います。

そして、ずっと使ってみたかったCSS3を、ほんのちょっとですが昨日実務でも使ってみました。
ああ、なんてすばらしい!!!
角丸に使ったのですが、簡単すぎて涙が出ましたw。

早く某黒幕さんのように、がしがし使いたいなーと思いましたです。

マークアップエンジニアの明日はどっちだ!

最後のコーディングコンテストの解説のセッションで@kotarok大先生から、
マークアップエンジニアのこれから的なお話がありました。

これを聞けて、ホント行ってよかったと思いました。

コーダーは、マークアップエンジニアと名を変え、最近ではフロントエンドエンジニアという名称にもなってきています。名称の変更と共に、作業内容も高度な技術を必要とし、責任ある立場へと向上していっているように思います。

遅すぎるかもしれませんが、私もこの先の方向性について悩んでいるところでした。
若くもなく、徹夜作業が続くようなことは体力的にきついし、家族もいるのでそうムリはできません。だからといって、このままでいるのもイヤだし、前へ進みたいと思いつつ、何もできていない自分に腹が立ってもいました。

このセッションを聞いて、自分の進みたい方向がちゃんと見えたような気がします。それに進むためには、またハードルが高いんだけどw。

懇親会

イケメン@5509とつるみつつ、これが本編とばかりにたくさんお話しさせてもらいました。
前回と違って人数も少なく、場所もお座敷1カ所だったのと、途中席替えがあったりしたので、
大御所も含め、名刺交換をさせていただいたり、MT vs a-blog CMS 的な
お話に混ぜていただいたりして、楽しい時を過ごしました。

その後2次会では、前回大失言を浴びせてしまった益子さん@5509と20年後の自分をテーマに?熱く語りましたw。

ちょっと早めに店をあとにしましたが、本当に楽しかった。
セミナー、勉強会に参加するのはもちろん、こうやっていろいろな人と話すのってすごく刺激になりますね。

実は前日まで、精神的に少しまいっていたことがあったのですが、若いパワーをたくさん吸収して元気になりました!


将来の自分

5年後、10年後、20年後。自分がどうなりたいか、どうしていたいのかを考えることはとても大事ですね。一番下が成人するまで18年。これは最低でも元気でいたい年月です。

前述のこれからの自分がなりたいものも含め、母としてどうやって生きていきたいかその辺も考えてみたいなぁと思います。

CSS Nite LP, Disk 9「Coder's Higher」

先週の土曜日、CSSNite LP9へ行ってきました。
すごくすごく楽しみにしていたのに、前日夜にチビが熱を出し、かなりどきどきで迎えた土曜日でした。

この日のつぶやきは
twilog
とか
ちゃんと、ちゃちゃっと。
を見て頂くとして、印象に残った部分の感想をつらつらと。

キーノート:マークアップエンジニアのキャリアパス

マークアップエンジニアの名付け親である森田さんの基調講演。
こちらでスライドを確認できるようにしてくださっています。
荷物が片付かないうちに始まってしまって、最初の方は聞き逃したのですが
「マークアップエンジニアの職能」というお話がありました。
詳細はスライドを見て頂ければと思うのですが、これ見て、私はマークアップエンジニアを
名乗っていてもいいのかなぁと思ってしまいました。
これらを完璧にこなすことはできないかもしれない。
でも、できるようになりたいと思いました。いくつになっても日々勉強ですな。

XHTML&CSS超高速コーディング術 LIVE!

XHTML&CSS超高速コーディング術についてはこっちでもかいていますが、
実際にこの手法を見てみたかったので、1番楽しみにしていました!

印象的だったのは、クセのように記述されるIE対策と思われるCSS。
floatしたら、かならずdisplay: inline; というような感じです。
本にも書かれていたとおり、手戻りを最小限にするために、工夫されているんだなぁと
思いました。

モジュールはまとめて1枚のpngに作ってしまうのも斬新と思いました。
モジュールをまとめたテンプレートページはよく作りますが、デザインを
まとめてしまうということはしたことがなかったので、驚きでした。

しかし、疑問。
psdのデータをレイヤー情報なしにpngにしてしまってスライスするとなると
透過したいとか、重なりがある部分とかそういうのはどうしているんだろう。
そういうのは別途作成しているのかな。

その辺お伺いしたかったんだけど、エレベーター前でご挨拶しただけで
懇親会ではお話できず残念。もし、これ読んだら教えてくださいw

Coding with jQuery

超イケメンの登場!
はい、目の保養させてもらいましたw

普段使っている47都道府県のセレクトメニューありますよね。
あれって、スクロールし過ぎちゃったり、九州とか下の方に表示される方には
面倒!って思われる方多いと思うのです。
アレをぱっと見開きで作っちゃたのがこれです。

jQueryが担う分野はクロスブラウザ対策。
ユーザーのことを考え、かつ制作者にも優しいとお話されていました。

こんなことやりたいんだけどどうすればいいんだろう?と困っていると
やさしく相談に乗ってくれる、ステキなお兄ちゃん。
まだまだな私ですけど、もっと勉強してjQueryってこんなにおもしろいんだよ!と
紹介できるようになりたいなぁ。

実例に学ぶ!コーディングから参加するUI設計

ハムさん登場!
私もおそろいのTシャツ着ていました。

実例を挙げての紹介。何がよかったって、普通なら隠しておきたい
失敗も紹介するという大物っぷり。
ををーこれすげー!と思っても、実際にはこんな理由でボツになりましたという話が、
実務的でいいなぁと思いました。

実装前に決めておくこと:動作、jsオフの時、対象ブラウザ、操作する部分をどこに記述するのか

こういうこと大事。
こういうことが決まらずに要望だけが一人歩き的な制作をしたことありますが
本当に大変でした。

技術はいろいろあるけれど、ちょっとした気遣い、優しさ。誰が使うのか考えて
実装を検討するというお話が、ハムさんの人柄を現していたような気がします。

Webパフォーマンス最適化のためのコーディング手法

またもイケメン登場。

通常、私はデザインをもらって、コーディングするだけですから
パフォーマンスを考えてどうのこうのなんていわれたことがありません。
制作方法もほとんど自己流です。

昔、光通信なんてなくて、ぴーひょろろーな時代には
大きな画像は読み込みに時間がかかるから、とにかく小さく小さくと
切り刻んだものでした。
その頃からくらべたら、最近は格段に速くなっています。
でもだからこそ、数秒の読み込みの遅さが気になるんだろうなと思います。

マシンの性能だけでなく、ブラウザによっても読み込み速度が違いますが
それをクリアするためにいろいろ工夫をしているというお話でした。

衝撃的だったのは「パフォーマンスを考え、コスト意識を説明して
デザインを変えるという案もある」いうこと。
私のような外注末端の状況でそれをやるのはほぼムリだけど、
デザイン絶対じゃないところに驚きを覚えました。

CSS3 for tomorrow [ver.LP9]

先月の銀座でも思ったのですが、もうおもしろいったらない。
デモを手元で見ることができるので、より理解が深まりました。
@Takazudoさんのスライド
@sigwygさんのスライド 

今回時間がなくて完成できなかったコーディングコンテストですが、
このスライドを見ていて、あの部分にこれを、あっちにはアレを
などと想像がふくらみました。

ここでも「でしゃばりすぎない」という言葉が出ました。
できるようになることはたくさん増えるし、簡素化されるけど
どこまでそれをやるのか、そしてそれをどの役割の人がやるのかなど
考えさせられました。

ノリとツッコミで進める HTML5 ライブコーディング

まさにノリ突っ込み感じでテンポよく進められていました。
実際、ソース表示の部分などもよく見えたし、分かりやすかったと思います。

実際にあり得そうなシチュエーションのxhtmlからHTML5への移行を
デモしてくださいました。

いっぱい書いてあるものをばっさり消していくのは、気持ちがよかったです。
事前にもっとよく資料を見ておけばもっと楽しめたと思いました。

今日から使えるHTML5 API

目をキラキラさせて、ものすごく楽しそうにお話をされている姿は、
まるで少年のようだと思いました。

私にはまだまだ難しいレベルのお話でしたが、HTML5の
可能性をたくさん教えて頂けました。
HTML5のAPIはJavascriptが必須だとのこと。
これからもこの業界にいるなら、もっともっとがんばらなくては。

懇親会

こんな機会に名刺を無くすという大バカもの。
家に帰ったら持って行くのを忘れただけでした。
ご心配頂いたみなさま、ごめんなさい。
絶対これだけは忘れちゃいけないと思っていたのに、おっちょこちょいの助です。

ちょいの助のくせに、オバチャンパワーで、図々しくもたくさんの方と
お話しさせていただき、名刺もたくさんちょうだいしました。
ありがとうございます。
自己紹介リストの2番のやる気満々のオバチャンです。

本当はもっと行動的に他の階にも行きたかったのですが、何せ名刺がないので
お伺いするのも恥ずかしく、ずっと3階にいました。
久しぶりにあえたお友達もいて、ほんとよかった。
もっともっと時間があったら、名刺も忘れなかったらよかったのに。


オバチャンというのは、あちらは自分のことなんか全く知らない有名人でも
こちらはなんだかよく知っているという気になってしまうのですね。
お酒も入って、テンション高く、そんな失敗をしてしまい、アレはすごかったと
@cremaちゃんをはじめ、周りの方々にひかれてしました。


@cremaちゃんもごめんなさい。


益子さん、ごめんなさい。この場で失礼をお詫びします。
初めて言葉を交わしたのに、挨拶もせず、カニがないだの、
あれこれ文句つけて申し訳ありませんでした。


帰り際に、鷹野さんにiPadさわらせて頂きました。
これまたちゃんとお話しするのは初めてだったのに、きちんと
ご挨拶もせずに申し訳ありませんでした。

iPad、すごく欲しくなりました!


mukiオフ

ここからはまた別の集まりなんですが、この日の出演者@5509 @h2ham を含めた
数人である勉強会のコミュがあって、おそれながらそこに入れて頂いています。
おそろいのTシャツもこのメンバーで作ったものです。

せっかくなので、懇親会終了直前に抜けて、お店を変えておしゃべりしてきました。
ホントに楽しくて、時間が足りませんでした。
みんなありがとー!!!


で、最終的に感じたこと

今のキャリアであと10才若くて、子どももいなければなーと思うこともあります。
でも私は私。今の自分を受け入れ、努力するしかありません。

たまにしかこういう集まりに行けなくて、行くとうれしくてテンションあがってしまいます。
図々しいオバチャンです。ご迷惑をかけることもあるかもしれません。
ごめんなさいです。

あきらめたらそこで終わり。忙しくたって、時間は自分で作るもの。
固まってきた頭なので時間はかかるけれど、前に進むことをおそれず、忘れずに
夢を追いかけていきたいなと思った1日でした。

久しぶりに積ん読ではなく読破しました。

この本が出ると知ったのはTwitterでした。
Amazonさんで本を買っても、ああやっぱりいらなかったなと思うことがあるので、
立ち読みしてからと思ってそう発言したら、中の人から「買えやwww」と
RTされてしまった本なのです。

発売日だったか翌日かに本屋で立ち読みしました。
技術的な面については、不要かなと思い買うのをやめようかと思いましたが、
前半の管理面については、立ち読みではなくじっくり読んでみたいと感じましたので
購入しました。

私は、個人事業主で在宅ですから、マークアップなどの作業を複数で
行うという作業はあまりありません。
ですから、この本に書かれているような綿密な管理は必要ないのかもしれませんが
役に立つことも多かったです。

一人でやっていると、自分ががんばればいいや的なことになりがちですし、
私ルールみたいなものができあがってしまうのですが、普段やっていることが
この本に書かれていることと同じこと、似ていることも多く、なんか安心しました。

ルールとして、マニュアルとして決めてしまうということは
最初は面倒かもしれませんが、あとあと楽になることが多いようです。

ひとつだけ言わせてもらうとすれば、書面だけでは
背景画像とロールオーバーの画像に違いなどが一瞬分かりにくいという点かな。
(ええ、私ちょっと目が悪いんですよ)
これは、サンプルデータを落としてみればスッキリ解決するんですけどね♪


一度、実際にデータをbmpにして、スライスするところから見てみたい。
東京でも実演してくれないかなぁ。


先週土曜日、CSS Nite LP, Disk 6「CMSリベンジ編」に行ってきました。
最後にこういうのに行ったのはいつのことか。2年以上は前のことなので、思い出せません。


一つ一つの具体的なことは、カアサンズの方で書くとして、こちらでは全体的な感想を。

一番感じたのは「プレゼンテーション」の重要さ。

どんなに製品が良くても、どんなに実績があっても、それが伝わらなかったら制作者は興味を示さないんじゃないかと思いました。誰に、何を伝えたいのか。これがなかったWebRelease2は、最後の「○○使ってみたい人〜」という挙手のアンケートでは、ほとんど手が上がらなかった。
逆に今回MVPをとったa-blog cmsは「Web制作者のためのCMS」とうたっているだけあって、プレゼンもわかりやすくとてもスムーズで良かったと思います。

あと、今回感じたのは、「Dreamweaverでも編集が楽ちん」というのが多かったこと。最近のお仕事にはDWよりCodaを併用して使っているので、あまりこれには魅力を感じなかった。デザインビューで崩れません!というのは強い売りなんでしょうか。私はデザインビューで確認しないのでふーんとしか思いませんでした。


最後に5分のセッション3本がありましたが、これが一番充実していた感じがします。他のセッションの持ち時間は45分。それでもみなさん足りない感じでしたから5分はあっという間です。だからこそぎっちり、手短に、要点だけを入れ込めたんではないかと思いました。プレゼンはみなさん早口でおもしろかったです。


「みんな5分でいいじゃん」という発言があったのですが、5分ずつ聞いて、詳しく聞きたいヤツだけそのあとじっくり聞くのっていいかもと思いました。


結局、国産CMSはサポートはもちろん日本語だし、欲しい機能があって追加して欲しいと頼むのも日本語。やっぱり安心な気はします。だからといって、MTに勝てるのか、MTから乗り換えるのかというと難しいような気もします。


それMTでもできるじゃん。新しく覚えるより、MTでカスタマイズした方が早いよ。
と思ってしまった私はイケナイ子です。


そこでこの日の名言

MTでいいじゃん。
by アルファサード 野口純生氏


----------------------------------------------------------------------------

お子様たちがいるので懇親会には出られませんでしたが、お友達三人に会うことが出来ました。今は三人ともすっかり有名人で、これまた有名な方々が、彼女たちに所へきて話しかけていました。あ、誰々さんだ!と思っても、話しかけることも出来ず、もちろん紹介してもらうなんてことも出来ず。


しかし!なんとすごい偶然で、まさに今お仕事の指示を頂いている人と隣に!
お会いしたことはないので、顔も知りません。もちろん最初はわからなかったのですが、その方がとなりで開いたノートパソコンの画面がちらりと目に入った。(今回は机なしだったので、ホントすぐとなり)そこにはまさにその案件名が!!!
休憩時間に、私の目の前に座っていた友人と挨拶を交わしたので、こっそりメールでお名前を聞いちゃいました。もちろん、そのあとちゃんとご挨拶させていただきました。まさか隣になるなんて、神の思し召しといって笑いました。


情報だけなら家にいても手に入るかもしれません。
でも、実際にその場所に行って、人に会って受ける刺激というのはまた別物です。
夜の外出は難しいけど、日中であれば時間は作れるので、都合が合えばどんどん人に会いに出たいと改めて思いました。お誘いくださいませ。

クライアントから「IEでCtrlと+、Ctrlと-で拡大縮小していくことでレイアウトが崩れるので対処を」と言われました。
zoom関連だなと思ったのですが、zoom:1の記述じゃ直らないみたい。
ググってみたら、mixiのトピにありました。おなじものは
IE7でbodyの背景が拡大/縮小されない!【IE7対策】
にありました。

でも私はこの方法ではうまくいかなかった。
なので、
IE7のズーム機能による問題の解決策
こちらの方法で、不本意ながら<div>を付け加えました。

ですが、ヘッダーのパーツを position: absolute; で配置していたので、
今度はそこが他の変化とあわない。ということで、positionを使わずに
配置する方法に変更しました。

とりあえず、これで解決の巻。

オットに許可をもらえたので、参加申込みをしました。
時間的に最後まではいられないと思うけど。

いろいろ話題の国産CMS。やっぱり国産は安心なのか?
そのあたりも含めて、勉強してこようと思います。

2009年6月27日土 13:50-18:40(実質4H50M)
ベルサール西新宿
東京都新宿区西新宿4丁目15番3号
住友不動産西新宿ビル3号館 (〒160-0023)

CSS Nite LP, Disk 6「CMSリベンジ編」(2009年6月27日開催)

初めて体験したIE6のバグです。

『Explorer 6 Duplicate Characters Bug』

というらしいです。

IE6のバグ
Win IE6でテキストが複製し、はみ出るバグ
IE6で、文字(画像)が複製されてズレる

このあたりにありますが、私の場合画像置換で飛ばしたはずのテキストが
本来表示されている画像の下に最後の2文字だけ表示されるという珍現象に!

で、解決策は
「コメントを外す」

ただ、これだけ。

でも、すぐ近くのコメントを外しただけではダメで、検証する手間が惜しいので
全部消してみたら、変なテキストは消えてくれました。

上の参考サイトの一つにあったんですが、「DWのテンプレートのコメントを
消さなくて解決してよかったー」というのがありました。
今回、私もDWのテンプレート機能を使っていました。
もしかして、これらの相性が悪くてこのバグが起きるのかも?

css修正しまくっても消えませんよ。
とにかく変な文字が出て困ったら、コメント削除です。