Archive for 2008年5月

border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう

いつものようにコーディングしてブラウザチェックをしていたらFirefoxだけTABLEの左ボーダーがどうしても表示してくれなかったんです :sad:
何が原因なんだろうといろいろいじっていた結果どうやらborder-collapse:collapse;とoverflow:hidden;の組み合わせが悪かったみたいです。
overflow:hidden;が指定されたボックスの中に配置されたTABLEで起こる現象みたいで原因はborder-collapse:collapse;を指定したときのFirefoxの仕様にあったっぽい。

統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。

border-collapse – A Day in the Life より引用

そんなわけでFirefoxは左に1pxはみ出すので、そのはみ出した1pxのボーダーがoverflow:hidden;で文字通り隠されてしまうということらしいです。
テストページ

2カラムをfloatでレイアウトして、その解除をoverflow:hidden;でやっているときは注意しなくちゃ :!: :!:
でもSafariは右にはみ出した1pxのボーダーが消えないんだよね。。なんでだろー?

TABLEのクリーンナップどうやってますか?

サイトリニューアルの時に
「原稿はそのままなのでサイトから引っ張ってきてください。」
なんて言われて、<font>タグやらbgcolorとかガッツリhtml側に記述してあったりすることが多かったりして。
ついでにそれが何十ページとか何百ページとかあったりして。
そうすると何回も置換がしなくちゃいけないなぁー面倒だなーと思って、もう1から作ってしまえとテキストをコピーしたときに気づいたわけです :!:

Firefoxはタブ区切りで、IEは半角スペース

これだけでは何のことやら分らないと思うのですが、TABLEの中のテキストをドラッグ&コピーして、テキストエディターにペーストしたときのセル区切りのしるしの話です。
タブ区切りでもスペース区切りでもどっちでもよいのかもしれないのですが、タブのほうが置換するときにすこぶる便利なのでこの発見は私の中では大きかったんです。
TAB(¥t)を『</td><td>』、改行(¥n)を『</td>¥n</tr>¥n<tr>¥n<td>』てな具合に置換すれば何度も不要なタグ削除のための置換を行わなくてもプレーンなTABLEが簡単につくれちゃいます :razz:

ついでに一括置換できるようなフリーソフトに置換処理を登録したり、秀丸マクロを作ったりしてしまえばもっと時間を短縮出来ちゃいます。

もっと簡単な方法でクリーンナップ出来るのかもしれないんだけど。。
みんなどうやってクリーンナップしているんだろう??

そもそもこういうお仕事ってそんなにないのかな?

30days Albumがすこぶる使いやすい

先月10日にペパポさんからリリースされた写真共有サービス「30days Album」。
なかなか利用する機会がなくてアカウントだけとって、使ってみていなかったんだけど、GWに韓国旅行に行ってきてきたので、使ってみました :razz:

普段あまり写真と取ったりしないし、遠出もしないのでなかなか友達と写真を共有することなんかなさそうだなー。と思ってたんですが、昨日までひさしぶりに女友達と旅行に行ってきました。帰りの飛行機の中で

「写真どーやって交換しようかー?」

という話になって、真っ先に「30days Album」を思いついて早速アルバム使ってみました。
一緒に行った友達はウェブの人じゃない人もいたので最初はミクシーでアルバム作る?なんて話にもなったんだけど、アカウントを取るのも簡単だし、アップロードもミクシーより簡単だと思いました :wink:

30days Album」のいいところと思ったところは

  • とにかくアップロードが簡単
  • 合言葉(パスワード)が全角文字でも大丈夫
  • アップしたら写真が勝手に時系列に並ぶ
  • 写真の閲覧がしやすい

あとは友達が写真を追加してくれてたっぷり共有して30日経過したら、10日間はダウンロードもできるらしいので、来月が楽しみです :oops: