Main Content

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チェックで減点喰らうんだったらアレだけど、もしちょっとの減点でサイトが使いやすくなるんだったら迷わず減点の方を取っていきたいなあオレは。

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

Comments

  1. Commented on
    Comment by じょに

    僕も大賛成!
    で、テーマめちゃ素敵なんですけどオリジナル?

  2. Commented on
    Comment by sakotsu

    ども!
    こんなステキなのデザインするチカラはないので、wordpressのテーマを別でダウンロードして使わせてもらってます。
    http://coliss.com/articles/blog/wordpress/802.html
    ここあたり。気分次第で定期的に変えていくよ。

  3. Commented on
    Comment by mozk

    普通はposition:relativeを使う。
    dreamweaverはIEのhasLayoutをエミュレートしているぽいけどmin-heightとかではhasLayoutがオンにならないのでclearfixのブラウザ振り分けでhasLayoutがオフになって崩れる。そこでoverflowやposition:relativeなんかを使ってhasLayoutをオンにするという仕組み。

  4. Commented on
    Comment by シナチク

    お、mozkさん登場。

    IEのhaslayoutってなんだって思ってググッたら、ヒット。http://gyauza.egoism.jp/clip/archives/2007/05/ie7-haslayout-bug/
    なるほど、IEさんは妙な仕様でお馬鹿さんてことはわかったよ。

    このサイト良いから巡回しよう。

  5. Commented on

    […] ◆4人目 シナチクさん 「ローテク,スローライフなFlash+走るらんらんるーの人」 ローテクでもアイデア次第で面白い作品が作れる。 炎がミニマムでかわゆい(^∀^) シナチクワールドw […]

  6. Commented on

    […] ご本人さんのブログに作品がアップされています。 […]

Compose Comment