前提として、、、floatとclearは古のタグですが、知らないと過去のファイルを直せないので学ぶ。
ボックスを横並びにさせるためのもの。
万が一、書いてるのに効かない場合は、横幅計算ミスが原因なことが多い！
はじめに
reset css書いてまずは、タグがもってるデフォルトの見た目をなくす。
/* Reset
------------------------------------------------------------*/
body,div,h1,p{
margin: 0;
padding: 0;
}
/*余白をゼロにする*/
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
/*文字の大きさを揃える*/
div{
box-sizing:border-box;
}
/*ボーダーとパディングをwidthに含ませる*/箱を真ん中ぞろえのためには、必ず自分の幅を決めてから、autoする。箱の中央揃え方法はこれのみ。
#layout01 #box01{
width: 960px;
margin: 0 auto;
}
/*まず、幅決めてから、上下のマージンを0にして、左右をauto*/注意 text-align centerは箱の中にいる「テキスト」を真ん中揃えするためのもの。
float
- floatされる方とする方の両方にかける
- right（右寄せ）、 left（左寄せ）、none（指定しない）の３つしか使わない
- floatしたら、その後必ずclearするが、同階層がなければ、親要素でクリアする→後述
- floatしてると真ん中揃えできないので、親を持つようにする
- floatの時はmargin相殺が起こらない！！！
- pcで横並びにした要素を、スマートフォンでは縦並びに表示させたい時に、CSS内で「float:none;」を指定するとfloatが解除され、縦並びに表示させることができる
- 弱点は高さがそろわないことが起こるし、heightは書きたくない！→後述
- 浮いた要素は縦横共に最小サイズになろうとするので、横幅の指定は必須
clear方法3種
clear
floatさせた要素と同階層のものが後にあれば、そこでclearする。
clear: leftかrightかboth(かnone);clear-fix
同階層がない場合は、float対象の親要素に空箱を作ってclearさせる方法。
:afterはセレクタとの間にスペースあると効かないので注意！
デメリット :afterエリアを独占するので他のことをしたいときに困る
セレクタ:after {
display: block;
clear: both;
content:"";
}overflowでhidden
同じく、親要素に以下を記述して、はみ出したものを非表示にするイメージ
デメリット box-shadowが効かない
overflow: hidden;flexbox
横並びにしたとき、最近はflexboxを使う。親要素に以下のように追加すると、均等横並びになる。
例１）
display: flex;例えば、横幅100%で上記の記入、liが５個あれば、１つ20%ずつで横並びになる。
例２）横幅100%で要素が6個あって、25%ずつ（つまり、表示では1行目４つ、2行目２つの左揃え）にしたいときは下記のように記入
ul.pearent {
display: flex;
flex-wrap: wrap;
}
ul.pearent li {
width: 25%;
}CSS Grid Layout
親要素でグリッド指定して、カラムの幅を入力すると下記のような書き方できる。イメージとしては格子がおかれる感じ。
ul.box01 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}具体的な書き方は下記のリンクを参照するとして、おおまかな手順は
- 親要素でグリッドしますよーと宣言して「grid-template-rows」と「grid-template-columns」で行と列の幅を先に宣言してつくる。「1fr」は残りのサイズと覚えてよし！
- 各子要素を以下のように配置してあげる
grid-row: 1;
/*行の線1～2の間を占めて。（隣接するところまでは省略可なので）*/
grid-column: 1 / span 2;
/*列の線1から2つ分を占めて*/
