レスポンシブな段組み PCで下のように表示するのが目標。 ２番目のBOXを真ん中にする事がここでの学びのポイント。 ↓PC、タブレットでの表示目標 ↓スマホでの表示目標 以下、段組みの手順。 ①まず4つ BOX用意 BoxAで2~4を囲う BoxAの中でBoxBを用意し２~3を…

boxを左右に振り分ける。 右からやってみた。 @charset "UTF-8"; body{ margin: 0;}.box1, .box2, .box3,.box4{ border: solid 5px crimson; box-sizing: border-box;} .boxA:after{ content: ""; display: block; clear: both;} .box1{ background: lightpi…

画面の右側にメニューをpx固定で作るときなど、 BOXの中に2つBOXを作り右側だけｐｘ固定で表示したい時。 @charset "UTF-8"; body{ margin: 0;}.box1, .box2, .box3,.box4{ background: lightpink; border: solid 5px crimson; box-sizing: border-box;} .bo…

CSS カラム落ちを利用するときに気を付ける事 高さを揃える事。 じゃないと、段組崩れちゃいます。 以下は、box1~3をdivで囲い、 box3をwidth100％にしてカラム落ちで段組みした例。 こうするとdivが一つ少なくて済む @charset "UTF-8"; body{ margin: 0;}.b…

.boxA:after{ content: ""; display: block; clear: both;} clearfixで使う clear: both; の意味 親要素である.boxAが 後述の内容を.boxAに被さって表示させるかどうかを聞いている （もう少し正確に、.boxAの中でフロートしている子要素を避けて、 後述のコ…

CSS boaA{ box-sizing: border-box { とは padding と border をボックスサイズに含む、という意味。 margin は関係ないよ。