Nov 5, 2013


このサンプルのように、borderで指定した幅は通常そのままwidthの幅にプラスされます。

これの何が困るかと言いますと、たとえば要素を%で指定したレスポンシブデザインなんかだとborderの幅の分だけハミ出るわけです。ネガティブマージンで対処してもいいんですが、美しくないし面倒だし、忘れた頃に修正が必要になったら大変。

そこで役に立つのがbox-sizingプロパティ どーん!

.inner {
    width: 100%;
    color: white;
    background: black;
    border-left: 5px solid red;
    box-sizing: border-box;
}
この一行を加えるだけで、どんだけぶっといborderだろうがwidthやheightの幅に収まってしまうんです。



いや~ CSS3様様ですよね。Webデザイナーの間では常識かもですが、レスポンシブに乗り遅れた僕には目からウロコだったので敢えてご紹介しました。

ではでは!



Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

サイト内検索
  • Author

  • Twitter

    Follow @jay0926 (534 followers)
  • Facebook