すべてのカテゴリ

まだまだIE11に対応したコーディングも必要だと思います。（かなり、状況は変わってきましたが）IE11は他のモダンブラウザと比べるとCSSの対応状況が悪いです。古いブラウザなのでしょうがないのですが...Flexboxなら、IE11でも使えるのかなっと思ったら、思い通りにならない事もありまして...IE11でflexのショートハンドにcalcは使えない→対応方法：全部書きましょう（煩わしいですが...)//3列に並べる、右にマージン20pxつける。.flex_item{flex:0 1 calc((100% - 40px) / 3);margin-right:20px;}.flex_item:nth-of-type(3n){margin-right:0}こんな感じでcalcを使いたい時があるのですが、IE11では、ショートハンド指定でcalcを使えないです。//こんな感じで書く.flex_item{  flex-grow:0;  flex-shrink: 1;  flex-basis:calc((100% - 40px) / 3);  }実はこれだけでは、IE11でまだ崩れる可能性があります。なぜなら、flex-basisにbox-sizingがデフォルトでは効かないからです。→対応方法：max-widthも併記する。max-widthも一緒に指定しましょう。.flex_item{  flex-grow:0;  flex-shrink: 1;  max-width:calc((100% - 40px) / 3);  flex-basis:calc((100% - 40px) /

gridで要素間の間隔を設定できるgap(column-gap,row-gap）。マージンで設定しようとすると、疑似クラスでマージンを打ち消す必要など記述が複雑になるのがgapを指定することで、CSSをすっきりかけます。そんなgapがflexでも全てのモダンブラウザ(IE11以外)で利用できるようになりました。gridのcolumn-gapみたいな、横に設定、縦に設定それぞれにプロパティがあるわけではなく、gapで縦、横一括で指定するみたいです。（もうちょっと確認してみます）