HTML&CSS

z-indexこうすれば思い通り動く〜ネットや入門書では誤解を生む説明が多いので注意!

HTMLとCSSのレイアウトで親要素の裏側に子要素を移動したい。つまり親子間での重ね順を変える場合どうしてますか? positionプロパティとz-indexプロパティを使って移動させるはずです。 でも、なかなか思い通りに動いてくれないはずです。 もしかしたら、親要素に 「z-index:0」 とし  >>続きを読む

CSSグリッドの基本〜display:gridの使い方

Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できるようになりました。けれども、Flexboxによる方法も所詮は1  >>続きを読む

floatの仕組みとoverflowでfloat解除できる理由

HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また、clearプロパティよりももっと簡単に使えるoverflowで解決する方法につ  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今までできなかったこともうまく解決できるようになりました。まず  >>続きを読む