花粉症？鼻炎？持ちなのに無謀にも4月の鉄剣マラソンのハーフマラソンに出ようとしているjyunzyです。
去年は無理したせいか、出場した次の日にじんましんが出てしまいました。。。
今年はマスクをつけて走ろうかと本気で思っています（笑）
今回は「レスポンシブデザインでのborderの扱い」について話をしてみたいと思います。
レスポンシブデザインは、スクリーンサイズに応じてレイアウトが変わるようにするために、
CSSで横幅を指定する時は％かemの単位を使う事が多いです。
ですが、これをborderでやってスクリーンサイズを縮めた場合、1px以下にはなりません。
それで意図したレイアウトにならないという問題点がでてきます。
そこで使ってもらいたいのが「box-sizing」というプロパティです。
box-sizingで「border-box」と言う値を使うと、要素全体の大きさがwidthの値となります。
paddingやborderにどんな値を入れても横幅はwidthの値になります。
実装例は以下のようになります。
.sample-box { width: 60%; padding: 5%; border:1px; box-sizing: border-box; }ひとつ、問題点を挙げるとしたら、このプロパティはIE7には対応していません。
ブラウザシェア的には殆ど使われていませんが、気になる方は絶対値で横幅を指定した方が無難かも知れませんね。
