2009.04.05

佐清君の手形を!

あんまり頭使いすぎて疲れますたのと、css興味無い方には申し訳ないんで、私が飼ってますカメのご紹介でも。

佐清(すけきよ)君ではなく、「いそこ」と申します。よろしくおねがいします。
でも、よく似てるのです。例の横溝先生の『犬神家の一族』の佐清くんのマスクにw
松子姉さんも同意だとおもいます。


カメラに警戒中です。あんまり撮られたことないもので。
しかし、背景が惨憺たる有様です。水替え時は毎回こうです。
いそこはその辺を歩き回ってるのですが、だいたい早く帰りたくて入れ物の回りを巡っているか、ワーディアンケースの下で甲羅を削ってます。
時にフラワースタンドの足の隙間に無理繰り入ろうとして、鉢を傾けて落としてくれたりします。すごい力持ちなのです。


ヨコクビガメではありません。
ホットスポットの下で就寝中の「ミナミイシガメ」のいそこでございます。
首の曲がり具合が不気味でいいですね。
それとチャームポイントの手のひらが見えてます。本人も良く知っているので、良く見せてます。
手形を取りたいものです。

画像で甲羅がものすごく汚いのがわかるとおもいますが。私のせいでございます。
甲羅ずれは元からでございまして、B級として売られてた所以でございます。
藻が…それはもう藻が生えたのでございます。甲羅に。
蓑亀ってこいつのことなんですねぇ。九州の焼酎のメーカーの広告に書いてあったカメ、顔がいそこにそっくりでした。イシガメとかクサガメとかもっとカワイイ顔ですよね。なんかこう、佐清さんなわけです。
問題ないものだと放置しておりましたら、甲羅に異常が…あきらかに脱皮できてません。層になってます。
医療用の強力イソジンで(よい子はまねしない:動物用のイソジンあります)藻を退治しましたところ
脱皮時期には、自然に薄皮がはがれるようになりました。自分でもごりごりして取ってるようです。

年齢はえーと、7−8歳?
たぶん女の子です。産卵はまだしてません。
性格は臆病だと思います。人間の足は平気です。
散歩中はよく、じーーーーーっと何か物を見つめてます。鉢だとか、リモコンだとか、自分のライトだとか。
そんな訳でよろしくおねがいします。

2009.04.05

理由を忘れた2改

さてネガティブマージンを使った2カラムについての続きでございます。
現行

先行float:left(#side_colum)の左ボックスにfloat:leftした340pxの右ボックス(#center_colum)を重ねた。
右ボックス(#center_colum)のmargin-leftに-340px(ネガティブ)のマージンを与え、内容の子boxのマージンで左スペースを確保。

問題点

  • IE6で「widthを明示した親ボックス」からはみ出した「ネガティブマージンを持つ子ボックス」のネガティブマージン分がレンダリングされない。
  • IE6にfloatさせた方向と同じ方向のmarginを2倍とるバグがあり、もしかしたら-680pxもマージンをとっていたりして、中のdivの内容のマージンにより、結局左ボックスの上に重なって、内容表示されているのではないかという危惧。

IE6環境が無いので、確認とれませんが。
家人のIE7環境もHDDすっとびにより、確認してません…(;e;)
 1年保証がちょうど切れたタイミングっす。ソニータイマーが入っていたようです。

さて、対策。
1.に関しては親ボックスにはwidth与えないことで対応。
そもそもfloatされたボックスはmarginが理由ではみ出さないし、内容の子boxは正マージンなんでとりあえずは問題なしみたいです。
まあ、すごくはみ出すので気になってしまったと言う気持ち的な問題は、このへんで解決。「その位置は決して包含ブロックの内部だけに制限されるものではなく、外にはみ出しても構わない。」参考

次は、問題点2.のfloatと同じ方向のmarginを考察。
IE6の「floatした方向と同じ方向のマージンが二倍」のバグを危惧しましたが、後続のボックスがfloatである場合、そのボックスのマージンは正常にとられるようです。
でも一つ目にfloatしたボックスのマージンはやはり二倍
だがしかし、一つ目のfloatにマイナスマージンを設定しなければ無問題。

使える方法であることはわかりましたが、後で忘れると思うので汎用性を持たせたいと思います。
今まで、後続の右ボックスfloat:leftに対して、margin-left:のmarginを取っていたので、
反対方向のmarginをとることに。
しかし、右ボックスの右マージン辺を移動したところで、先行floatボックスの右マージン辺に対して、後続floatボックスの左マージン辺が追随するので、意味がありません。
でも、float:leftなんで、右マージン辺を移動したい。
と言うわけで、
左ボックスの右marginにネガティブになってもらおうと思います。

左ボックスの右マージンが左端にあれば、右ボックスの左マージン辺が追っかけてきてボックスが重なります。


内の人の位置をmargin:leftで調整。ここは前のcssと同じです。
以前は、リンクさせる要素(h4)に対して下記の指定をしてますたが、

cssが煩雑になるのと、IEのマイナスマージンの不審行動対策で左ボックス(#side_colum)のcss自体に記述。
IE6でどうなるか判りませんが…とりあえず。
変更はハイライトの部分だけです。便利ねー。

2009.04.05

連絡事項

以前お世話になっていた趣味のサボテン多肉系サイトさまをリンクをupしました。
長い月日が流れ去り、見失ってしまったサイトさまのリンクを寂しくはずしました。
アドレス変わってますなどありましたらご連絡ください。
そして、当方にはまだサボテン多肉系のコンテンツがございません。
リンクするに内容がそぐわないと思われますので、相互リンクとなっておりましても、ご遠慮なくリンクをお外し下さいますよう。
そのうち復活しますんで、待って頂けるのであれば、尚有り難いです。
そんで、あのーまことに言いにくいことなのですが、IE6、それ以前のブラウザをお使いの皆様、
右側の列が表示されていない可能性がございます。
リンクの並びは二列ありますて、ぐるっとした蛇の絵の下にもリンクがございます。
じゃあ、おまいのサイトは何でなら見られるんだと言う話になるんですが
Firefoxなら見られるものになっております。ダウンロードはこちら
IE6でも、デザイン崩れしてたとしてもなるべく内容はお伝えしたいと思いますので、少々お待ち下さい。ただ今方法を模索しとります。

2009.04.05

理由を忘れた

ここ数日、一つのページに嵌ってました。
本サイトのLinksページ。
過去のサイトからhtmlとバナー画像を流用し、ローカルでプレビューする限りは問題なし。
アップロードするとバナー画像も見えないわ、リンクも効かないわで、苦労してました。
問題は画像データの方にあったようで、ImageReady で書き出しし直した所、表示されるようになりました。原因は判らずです。
流用したデータはOS9に保存してたgifとかjpegとか。なんかLinksページに疲れすぎて、原因が探れません…。

第二の嵌りもありますて。第三くらいまではまってるんですが。
最初、段組をpositionで組んでたのを項目が増えると不便だなということで、floatで組み直しました。
前にどっかの賢いサイトからお借りしてきたんですよ。(不覚にもlinkを見失ってしまいました。)
ネガティブマージンを使ったカラム落ちしない段組の方法。
愛用してたのですが、ネガティブマージンを使うとどうして落ちないのか、その理由を今ひとつ理解していない。改めて学習しようとサイト巡りをしたところ、秀逸なサイトが豊富で理解はばっちり?出来ました。

今回使ったCSSは固定幅の二段組み

#center_columの左マージン辺をがっちりwidth分取って、右マージン辺に重なってる状態。

#center_columの右に行った左マージン辺は前のfloatさせたボックスの#side_columの右マージン辺に沿おうとするので、widthが同じ二つのボックスはぴったり重なります。

現時点であ、左の#side_columの内容上に#center_columの内容がごしゃごしゃにかさなってます。
んで、#center_columの中の#r_cont にmargin-left:370px;を与えると、ちゃっかり30px分の余白を左にはさんで表示されるのです。

が!ここで、理解の範疇を超えるwというか、混乱しますた。
親ボックスから子であるボックスが飛び出てる状態なわけで。普段使わないから、なんか違和感が…
…まあ、text-indentでh1とかを背景画像を表示して文字すっ飛ばしたりするし、そのテクニックと同じでしょうか。
ただ、IE6で表示されないらしい…まあ、時間のあるときにでも新たな道を探りたいと思います。
リキッドではなく両方固定幅なんで、別にネガティブマージンを使わなくても、二つの子ボックスを囲う親ボックスを作ってwidthを指定してやればいいのですが、外に一つ背景画像の為の親ボックスがあるし、大体、#center_columの内容をまとめてmargin与える為に#r_contとか余計なdivがあるし、また囲うのもなぁと言うことで、この方法は便利なのですが…。
一つ問題があります。
ずばり、リンクが目的なのに#side_columのリンクがクリックできないw
center_columのボックスが被ってるせいです。うぉ嵌った。
簡単な記述でクリアできました。小粋空間さん、ありがとうございます。
リンクさせる要素にこの指定でばっちり解決。

ネガティブマージンについて、お勉強させて頂いたのは、ここのサイト。
てんぽさん
Tech de Goさん

PageTop