HTML/CSS初級11

横並びレイアウトのパターン

◆inline-block → 横に並ぶけどmargin0にしても隙間があいてしまう。
解決＞
・li要素のソース上の改行を削除（liは全て繋げて1列に）
・ul要素の文字のサイズを0にしてli要素を改めて指定

◆float →横に並ぶけど下の要素が右に回り込んで表示が崩れてしまう。floatはかけたら止めないとダメ。
解決＞
・cleariboth → このプロパティをかけるとfloatは止まる。
・clearfix → 親要素にclearfixのclassをつけると解除される。

※注意※
上の2つは古いやり方ですがまだ今のweb業界でも使用されることはあるので覚えておくこと。

◆overflow → 親要素にoverflowを当てるだけ。このやり方が一番楽。

◆column-count → 親要素の中身を何分割するか指定するプロパティ。

◆grid → グリッドレイアウト、マス目状のグリッドに好きな順番に要素を配置や統合したり様々なレイアウトができる。