Primary Content: Home

DreamweaverCS3のclearfix使用時デザインビューはイケてないけどSpryはイケてる件

DreamweaverCS3のデザインビューが、相変わらずclearfixに対応してくれてなくてレイアウト崩れを起こしちゃうのが残念な件ですよ。

一応、以下に解決法も見つかりましたが、この方法でもfloatを内包するdivの背景画像と背景色は出ない模様。あくまでレイアウトが崩れないって話なだけのようです。。これはもう割り切るしかないみたい。

上記エントリーによれば、clearfixを指定している部分に、[ overflow: hidden; ]を指定すればいいみたい。

追記(2008/03/19)。mozkさんから頂いたコメントによると、[ overflow: hidden; ]の部分を[ position: relative; ]に変えてもいいらしい(訳はコメント欄を参照)。好みの問題かもしれないけれど、オレはoverflowいじるよりこっちのがいいのかなと思ってpositionを記述することにしとこう。せっかく教えてもらったので。

これと、clearfixについてとても有益な下記2サイトの情報も発見しました!実に奥深い!

これらの情報を組み合わせてまとめてみた結果、自分なりのclearfixを勝手にまとめました。コピペですいません!お世話になります!

.clearfix{
    zoom:1;/*for IE 5.5-7*/
    position:relative;/*for preview*/
}
.clearfix:after{/*for modern browser*/
    content: url(../img/spacer.gif);/*for Netscape*/
    display: block;
    clear: both;
    height: 0;
}
* html .clearfix{
    display:inline-table;
    /**/display:block;/**/
}

今まで僕はずっと[ <br class=”clear” /> ]を、floatを内包するdivの閉じタグ直前に割り込ませて使ってました。[ .clear ]には下記の設定。

.clear{
    clear:both;
    margin:0px;
    padding:0px;
    line-height:0px;
    font-size:0px;
    height:0px;
}

この方法は邪道っていう意見もあるけれど、デザインビューで背景画像/背景色も出るし、なによりもそのお手軽さがうれしい設計。なので場合によっては、今後も引き続きお世話になる予定。

――――――――――――――――――

それにしても、CS3のレンダリングって8から進化してないのね。。というかVista標準フォント・メイリオの行間を再現してくれないのって結構致命的じゃね?ちなみに当方XP使用だけど。あと動きがもっさりしたというか。それに確かタグ閉じ補完機能もあったはずだよね?うまく機能してくれなくて困る。

もーなんなんだよDreamweaverCS3ってやつわ。当然IE8への対応も怪しそうなもんだから賞味期限短いんじゃないのかよこのバージョン。。て、投げ出す前にウリの新機能『Spry』を試してみた。

『Spry』とは、最近流行りのAjaxのフレームワークの一種で、DreamweaverCS3を使って間単に、項目が折り畳める『アコーディオン』の実装や、写真にフェードやスライドといったエフェクト、そして名前順にソート出来たりする表がXMLを参照して作れたりするスグレモノ。サンプルデモは以下。

やるじゃんSpry!ソートする表すげー!使えそう!

今までHTML単体じゃ実現できなかった機能や、画像にFlashライクな表現を掛けれるなんてやるなあAjax。よくわかんないソースもどっかり追加されちゃうけどオレはそれでも別にいいぞ!

「HTMLとCSSのように、デザインとスクリプトを分離させるのがコーディングの美学」を貫く生粋コーダーさんには怒られちゃうかもしれないけど、やっぱなにか機能的なことしようとするとソースはぐっちゃりなっちゃうよな。

冒頭にもちょと書いたけど、デザイン構造とは無関係なタグ[ <br class=”clear” /> ]の存在も、オレはどっちかっていうと肯定派。『デザインビューを崩さないお手軽clear指定法』というメリットは、ソースを一行汚すのより大きいんじゃないかってさ。もちろんLINTチェックで減点喰らうんだったらアレだけど、もしちょっとの減点でサイトが使いやすくなるんだったら迷わず減点の方を取っていきたいなあオレは。

て、一体誰にアピールしてんだオレは?

IE8ベータ版が登場らしいよ

IE8ベータ版が公開されたってさ。

IE7強制インスコ祭りの後でも、依然IE6のシェアがダントツなのにもう次なんて早いよ!って声がコーダー各所から聞こえてきそうなニュースですね。

こうなると、「あれれ、じゃあなんでIE7をあのタイミングでリリースしたの、ねえゲイツ?」の最もらしい理由が「FireFoxが猛追してきたから、つい。。」ぐらいしか思い浮かばないような早さでちょとびっくりした。事実だろうけど。

んで、お仕事にも直結するので関連記事をいくつか集めてみた。

要は、なんか当初は「互換モード」と「標準モード」に、さらに新たな「超標準モード」なるレンダリングモードが追加される予定だったのが、各地より「なんぞそれ!」のブーイングが入ったみたいで、お蔵入りしたとか。で合ってるっけ?

いくら上がweb標準規格を決めたって、頑固なユーザーのブラウザがずっと古いままじゃ、僕らコーダーの仕事は一向に減らないばかりかブラウザ毎に合わせたハック技を駆使して対応しなきゃならんこともあるわけで、どうせならいっそのこと、古いブラウザからはアダルトサイトとか見れなくしてしまえばいいんだ!もう知らない!

コーディング専門チームから卒業して1年半ぐらい経つけど、うん、『Selectors API 』とか『DOMオブジェクト』とか『セマンティックWeb』とかなんだなんだって感じ。もうオレの手持ち知識では先端技術は動かせないのかってちょと焦ってしまうね。

HTMLコーダーの領域は頭打ちかと思ってたけど、まだまだ続くんじゃん。ていうか、ブログ(CMS)もSNSも台頭しまくりんぐなここ最近の印象だと、もう静的ページをちまちま作ってるだけの製作会社は大丈夫なのか?っていう認識。となると近い将来、もう動的phpとかでページ量産してくのが主流になるんじゃないかって思えてもきたので、コーダーのみなさんはHTMLだけじゃなくて他の言語も覚えなきゃ仕事選べなくなっちゃうかもよって思って、ちょと戦慄した。言い過ぎ?

とはいえ、これらの技術が中小企業案件ばっかの現場レベルですぐ必要になるかはまだわかんないなあ。

まあ、サブコーダーとしては、IE8とかFireFox3とかHTML5とかおもしろそうだしとりあえず静観しとくかって感じ。あれ?そういやXHTMLってどうなったの?

Flash勉強会『大阪てら子』に行って来たよ!

ちょっと前のことなんだけど、Flash/ActionScript大好きっ子達が集まるイベント『てら子』に初参戦してきました。

大阪にはこの手の勉強イベントというのがあまりなく、また、去年まで勤めていた会社でもFlasherは少数派だったので、どんな人たちが集まるのだろうとワクテカしながら入場。会場にはAID-DCCFICCといった「うーわ!」ていう会社の方や、他にも聞いたことある会社の方達が集まっててガッチガチに緊張してしまってた。

講義内容は、旬の3Dライブラリ『Papervision3D』のサンプルをライブコーディングと『水にインクを落として広がっていくような表現』をDisplacementMapFilterっていうフィルタ使って再現したりで、すごいワクワクした。

でも両方とも当然AS3で組まれてて、あーそっか先端の人はやっぱAS3なのかー、ということを実感。僕も準備が出来次第AS3の本を読み漁ってみようかしらとは思ったのだが、でもすぐにはまだ動けない予感。。

この後の2次会でも、同業のFlasherさん達とずっと話してたんだけど、やっぱ中小企業のFlash案件ではまだAS2で事足りるのと、AS3は開発コストが高そうなイメージもあって、僕も含めて多くの皆さんはまだあまりAS3に触れられていないような印象でした。

他にも、「Flasherのスケジュールが複数のディレクターによって押さえられているぐらいのFlasher不足」など、Flasherを取り巻くリアルな現場環境について興味深い話も聞けました。

「なんでこんなに面白いFlashをみんなやりたがらないのだろう」とも思いましたが、最近のFlashはアニメーションだけではなくてスクリプトが高度になりすぎて、どこから始めていいのかわからん、間口を広げすぎだ!ていう戸惑いの声も。

確かに、昔みたいにナンチャッテスクリプターの技術じゃ満足に動かせなくなってきたような気もするし、世の中に溢れるFlash表現も出尽くして見慣れてきたというのもあるから、客が求めるFlashの要求もだんだん高まっていったというのも一因としてあるかもしんない。

出来ることが増えて進化していく事で逆に取っ付きにくくなっていくなんて、なんだか皮肉。。
スクリプトわからなくてもアニメーション出来るのがFlashの魅力だったのにネ。

後は、電通の人に「電通主導のセカンドライフは今どうなってるんですかあ?」なんていじわるっぽく聞いたり(ごめんなさい)、はてな本社が京都に移転とか、ネットでちょと話題になってた3D技術の話とか興味深かったです。

つーか、内容がオレには濃密すぎてすごい疲れた。疲れたけど楽しかったよ。。
これは次回も参加するっきゃないっす!

AS3書くならFlashDevelop?

ってネットで評判だったので、そろそろ試してみっかーとしてたら、trick7さんのブログにて丁寧な解説記事ががが!

他にもあったので紹介。

web技術に関して日本より随分進んでいる海外の情報を得るには、英語サイト回らないといけないので読み進めるのがちょっち億劫なんだけど、こういう記事にはいつも助かりまくりんぐ!

それにしても、僕らwebいじくる者としての定番ソフト、Flash, Photoshop, Illustrator, Dreamweaver, FireworksのCS3シリーズをここ2ヶ月で触ってきましたけど、なんかどれも以前のバージョンと比べて劇的にパワーアップしてる感も沸かず(発売前あれほど謳っていたソフト間の互換性もなんかイマイチ…)、FlashCS3なんかは、あまりの動作のもっさり感にちょいと「うわUZEEEEEEEE!」って唸ってた時もありました。

コード200行超えたあたりから急激にパフォーマンス落ちるのは俺のPCのせい?それに、元々アニメーションソフトから進化してきたからしょうがないのかわかんないけど、Flashでスクリプトメインで作る場合もっと書き易くならんかなって思ってた所に、フリー高機能外部エディタFlashDevelopの情報キタコレというわけで、近いうちに触ってみよう。AS2でも使えるの?

久しぶりの更新で文句垂れてましたけど、やっぱりFlash大好きさ!
これからスゴ腕Flasherが集うとされるmixiコミュの勉強会行って来る! ノシ

Flashブログパーツの設置方法に触れてみる

そういやブログパーツって意外とお手軽に設置出来たよね、てことを試すために解説サイト(素敵ソースも配布!)を巡回した。

見ながらの設置は一応出来たんだけど、ソースをそのまま丸パクッて自分用のを再配布とかはちょっと気が引けるので、自分なりに理解して落とし込んでから配布できる用のをそのうち作ってみようと思った。そのためにJavaScriptをもっと知った方がいいということになったよ当たり前のことだけど。

ActionScriptは大好きなのにJavaScriptは敬遠て良くないなということで、購入リストにJavaScriptの本を追加しとこう。でもどれがいいの?プロとして恥ずかしくないシリーズってどうなのよ?いけてるの?

ブログハジマタ \(^o^)/

お気軽にFlashの試作/実験をアウトプット出来るようにブログを始めてみます。
別にガッシガシに更新していくわけでもないけれども、勉強したことを吐き出すことを意識してやっていこうかと。

それにしてもWordPressはMovableTypeよりも軽くて良いね。
MovableTypeがこんなに日本で流行った理由がわからなくなってきた。
WebDesigning誌も贔屓目にしてるのはなぜなんだぜ。

まーいいや、動的ページ万歳。