スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/3-0474f505

トラックバック

[T1] トラックバックしてみる

http://roka404.blog84.fc2.com/blog-entry-3.htmlブログタイトルStyle Design Engineerへの道副題日々のマークアップ&CSSコーディング業務の中で蓄積されていくちょっとしたノウハウとかバグ情報とかいろいろ備忘録的に記録していきます。【感想】 「Style Design Engin...

コメント

コメントの投稿
管理者にだけ表示を許可する

overflow:hidden;とclearfix

後続要素が無いためにclear:both;でフロート解除できない場合、フロートしている子要素を包む親要素に対してoverflow:hidden;を設定したり、clearfixを使ったりすると思いますが、双方メリット・デメリットがあるのでまとめておきます。

【overflow:hidden;】
<メリット>
・classを追加する必要がないのでHTMLソースコードをシンプルに保てる
・1行で済むので簡単
・DWのデザインビューが崩れない
<デメリット>
・IE6で効かないことが多いのでIE6用ハック(zoom:1;)を併用する必要がある。
・FireFoxで印刷バグが発生することがある。

【clearfix】
<メリット>
・IE6含め全てのブラウザで有効なので安心
<デメリット>
・DWのデザインビューが崩れる
・いちいちclassを追加するのでHTMLソースがclass="clearfix"だらけになる


上記のように、特にDWを使っている人にとってはどちらも完璧じゃないのが分かると思います。
で、結局自分としては

・メインコンテンツエリアのような大きな領域の場合はclearfix
・細かいパーツのようなものの場合はoverflow:hidden;

というように使い分けすることで落ち着きました。
本当はDW使いなのでoverflow:hidden;でやりたいのですが、Firefoxの印刷バグにやられて酷い目にあったことがあるので、それ以来メインコンテンツエリアのような複数ページにまたがる可能性があるような大きな領域にはoverflow:hidden;は使わなくなりました。

ちなみにその印刷バグというのは「overflowがかかっている領域以降がスコーンと次ページに落ちてしまい、かつ1ページ分の領域を超えた分に関しては一切印刷されなくなる」というものです。
これは、FirefoxでA41ページに収まらないような長い領域にoverflow:hidden;を使った場合にのみ起きる現象で、今の所overflow:hidden;を使わないようにする以外に修正する方法がみつかりません。

というわけで、ベースのレイアウト部分にはclearfixを使うのですが、そうなると今度はDreamweaverのデザインビュー表示が崩れるという問題が発生します。普段基本的にDWを使うのでこれは正直痛いです。これを直すにはclearfix部分に結局overflow:hidden;を追加してやるしか無い訳で、そうなるともうclearfixを使う意味がないという悪循環・・・(苦笑)

で、Dreamweaverには「デザインタイムスタルイシート」という作業中にのみ有効になるCSSを設定する機能があるときいたので早速使ってみたのですが、実はこれが環境設定で「デザインノート」を有効にしないと使えないんですね。。。「デザインノート」を有効にしていると各フォルダに「_notes」っていう余計なフォルダが出来てしまい、データ納品時にいちいちこれを削除してやらなきゃいけないので、案件によってはかなり面倒、ということでこれもあまり活用出来ず。。。

結局DW環境でやろうとする限り八方丸く収まるうまいやり方ってのは無い、という結論に至りました...orz
制作環境Codaにでも移そうかしら?
スポンサーサイト


このエントリーをはてなブックマークに追加
この記事にトラックバックする(FC2ブログユーザー)
http://roka404.blog84.fc2.com/tb.php/3-0474f505

トラックバック

[T1] トラックバックしてみる

http://roka404.blog84.fc2.com/blog-entry-3.htmlブログタイトルStyle Design Engineerへの道副題日々のマークアップ&CSSコーディング業務の中で蓄積されていくちょっとしたノウハウとかバグ情報とかいろいろ備忘録的に記録していきます。【感想】 「Style Design Engin...

コメント

コメントの投稿
管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。