メシのタネ

Webプログラミング 備忘録

  • AWS移行でコケ中

    現在このWebサイトが稼働している、このサーバーのMySQLをマスターとし、AWS上のRDSをスレーブとして、データ移行をしようと思ったが、バイナリロギングの取得が上手くいかない。多分の手順VPSのDBでスレーブ用のユーザ作成バイナリロギングを行うスレーブ側RDSにマスターのDUM[...]

    続きを読む
  • AWS ソリューションアーキテクト アソシエイトに合格しました。

    実は、今日までIT無資格でした。ええ歳だし、そろそろなんか資格取っておくかーと考えだしたので、取って嬉しい資格を取ろうと思ってたところ、AWSの資格あったなーと思って、調べてみたら、みんな14日で受かる!とか言ってるので、じゃあというこで、試験日14日後とかにして、試験の予約入れたのが地獄の始まり[...]

    続きを読む
  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む

【Float】CSSの嫌いプロパティNo1

Floatが僕は嫌いです。

Floatしだすと、レイアウトがぶっ壊れるので、いつもドキドキでした。
最近は、パワープレーでぶっ壊れてもなんとかしてたんですけど、
対面のデザイナーに、ある時ソースを見られて、ありえねーこいつありえねーみたいに言われたので
ちゃんと覚えようと心に決めました。

そんな訳で、会社にあった専門書を拝借しまして、また一からCSSを覚えなおしております。

で、分かった事は

・floatはそもそもレイアウト用のプロパティじゃない
・clearは下の親要素に入れると表示が崩れる
・floatはbrockとして扱われる

ってことです。

・Clearは下の親要素に入れると表示が崩れる

表示が崩れると書いたんですけど、実際は違うのかもしれませんね。
頭の出来があんましよくないので、こうやって解釈した方が僕は分かりやすかった。
正確には崩れる可能性があるってことです。

思う様にfloatしてる親要素のBoxが上手く開かない。
あれってClearの指定位置が悪かったんです。

図にするとこんなん

下の要素っていうのは、この図で言うとpです。
親要素の外で、Clear使うと回り込みだけ解除されるので、
イメージだけは、親要素からはみ出ます。

でも、親要素内でclearを使えばこうなります。

新しくブロック要素を追加しないで、after使ってやるのが、今の流行っぽいです。
昔の流行を知ってるわけじゃないですけど、今の流行っぽいです。「clearfix」って奴らしいです。

・floatはブロックとして扱われる

コレも知らなかった。ただ、サイトに書いてある、IEの余白バグの回避方とやらを
そのまま実戦してただけなので、何で大丈夫なのか全く意味が分からなかったんですが、
CSS2,1の仕様で、Floatしたら、勝手にBrockになるみたいですね。
なので、どんどんInline指定しましょう。

IE6以外のブラウザだと、display:inline;?何書いてあるかわかんねーよ!ってなるらしいです。

こんだけで、マージン倍のIE6バグは回避できます。
なので、floatする場合常に書いておいたほうが良いかも知れないですね。

関連記事

コメントをお待ちしております