横並びか縦並びか
ProgateのHMLT/CSSをしていて、疑問に思ったことがあったので備忘録としました。
該当するのはこちらの２枚。
１枚目はヘッダーですが、メニューがタイトルと横並びになっています。２枚目はフッターでメニューが右側に置かれていてしかも縦並びになっています。
その２つの違いは一体なんでしょうか？
どこにfloatをつけるか
答えは「どこにfloatをつけるか」になります。
ヘッダーの方はdivのheader-listクラスの中のliに関してfloatがかかっています。
.header-list li {
float: left;
}
こうすることによってリスト内の要素が横並びになっています。
対してフッターのほうはdivのfooter-listクラスそのものにfloatがかかっています。
.footer-list {
float: right;
}
それゆえ、リストに関しては縦並びになっているのです。
よくよく考えれば分かることなのですが、僕のような素人にとってはついつい忘れがちなことなので今回書いておきました。floatって便利ですよね？しっかり使いこなしたいです。