css3の新しい技!2013-06-14

レスポンシヴ デザインです。例えばメニューの横並びの際に各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で勉強しないとです。

A bad workman always blames his tools.

下手な職人はいつも道具を責める

腕に自信のない者に限って、自分の落度を道具などのせいにして責任逃れをしようとする。道具の選び方、使い方も腕のうちで、問題は本人の能力であるということ。

Grasp all, Lose all.

全部つかめば全部失う

あまり欲張ると、元も子もなくしてしまうことのたとえ。

Failure teaches success.

失敗は成功を教える

失敗も、その原因を突き止められれば、むしろ成功への手がかりとなるという意味。

A bad workman always blames his tools.

下手な職人はいつも道具を責める

腕に自信のない者に限って、自分の落度を道具などのせいにして責任逃れをしようとする。道具の選び方、使い方も腕のうちで、問題は本人の能力であるということ。

Grasp all, Lose all.

全部つかめば全部失う

あまり欲張ると、元も子もなくしてしまうことのたとえ。

Failure teaches success.

失敗は成功を教える

失敗も、その原因を突き止められれば、むしろ成功への手がかりとなるという意味。

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のうちに入れてくれる。
---------- */