LABO IWASAKI

CSSで要素の内側にborder

Box Sizing

よく使う「CSS」のひとつです。
これを知らない事はなんでカラム落ちするのかとか
どうしてズレるのか、とか分からなかった。

って言うか、これデフォルトでいいんじゃないの?
その方がデザイン的にすべて平和だと思う。
外側にborder引く時っていつ?

内側にBorder

border

コーディングの時にレイアウトが崩れたりカラム落ちしたりしてませんか?
今でこそないけど、これを知る前、超初心者の頃はどうしてそうなるのか分からない事がたくさんあった。
そんな事をふと思い出したので書こうかと…。

.foo {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   }

該当要素のCSSにこれを追加するだけです。
独学なので、ひたすらググった記憶がある…。

要素にborder引いてて何故カラム落ちするのか不明なアナタは試してみてください。

-moz-」こういうのは「ベンダープレフィックス」と言います。
ブラウザによってベースとなっているレンダリングソフトが違うので、表示に差異がありますが、それを埋めるための記述ですね。
-moz-」は mozilla用です。 FireFoxですね。
-webkit-」は代表的なのは GoogleChrome とか Safariです。(今はOperaも)
-o-」は 昔のOPERAです。今のはwebkitでいけます。
-ms-」は InternetExplorarです。