県内で幅広く事業をされている企業のホームページをコーディング2

本日も1日コーディング作業をしました。

今日勉強になった事は、position指定で要素に高さが無くなり、その下の要素が上に詰めてきてレイアウトが崩れてしまった場合の対処方法です。

調べていたらいろいろな方法がありましたが、私は::afterの疑似要素で高さを作る方法を試しました。

高さが無くなってしまった親要素::after{

content: “”;

display: block;

padding-top: 〇〇px;  /*任意の高さ*/

}

このように指定すると、疑似要素が高さを作ってブロック?してくれるので、下の要素は上に詰めて来ません。

この方法が最適なのかわかりませんが、なんとかレイアウト崩れを阻止できました。

まだまだ分からない事だらけですが、1つ1つ覚えていきます。