レスポンシヴ デザインです。例えばメニューの横並びの際に各liの中の文字数が異なる場合や、たくさんの商品を横に並べたりするのに便利!計算機で、sectionの幅とボーダーの幅をたしたりしなくていい!box-sizing:border-boxは、borderの幅とpaddingの幅も、コンテンツの幅のうちですよ!という事にしてくれる。width:calc(100% / 3 - 10px)は、横幅をその都度計算して出してくれる。幅100%を3コで割って下さい!という意味。ボーダーの10pxは引いてね~という意味。
まだ使いこなせないので、https://developer.mozilla.org/ja/docs/Web/CSS/calcで勉強しないとです。
腕に自信のない者に限って、自分の落度を道具などのせいにして責任逃れをしようとする。道具の選び方、使い方も腕のうちで、問題は本人の能力であるということ。
あまり欲張ると、元も子もなくしてしまうことのたとえ。
失敗も、その原因を突き止められれば、むしろ成功への手がかりとなるという意味。
腕に自信のない者に限って、自分の落度を道具などのせいにして責任逃れをしようとする。道具の選び方、使い方も腕のうちで、問題は本人の能力であるということ。
あまり欲張ると、元も子もなくしてしまうことのたとえ。
失敗も、その原因を突き止められれば、むしろ成功への手がかりとなるという意味。
width:calc(100% / 3 - 10px); /* -------- 100%を3で割って10px引くという意味。 +(たす) -(ひく) *(かける)も使える。 演算子の前後は、必ず半角あける。 ---------- */ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* -------- borderの幅、paddingの幅もwidthのうちに入れてくれる。 ---------- */