CSS
navi-training 1
CSS default
navi-training 2
CSS
navi-training 3 
display control training
display:inline off
float training1
float training2
メインテキストに枠線を追加。幅が広がるためサブテキストが改行される。
float training3
box-sizing:border-box;を追加することで、内側に線を引くことができる
float training4
pにfloatの設定を入れていない(none)。 floatを入れると改行される。
Don't forget clear float setting.
flexbox training
flex設定なし
flex:1;(余白を分割し、それぞれの要素に分配)
grid training
I am a basic level element.
I am a basic level element.
I am a basic level element.
I am a basic level element.
I am a relatively block level element.
I am a basic level element.
I am a basic level element.
I am a absolutely block level element.
I am a basic level element.
I am a basic level element.
Fixed
I am a basic level element.
I am a basic level element.
Sticky
I am a basic level element.
I am a basic level element.
I am a basic level element.
I am a basic level element.
I am a basic level element.
I am a basic level element.
Multi-column training
１行あたりの幅(column-width;)を親タグに設定。画面幅が広くなれば行が増える。
この場合、２行目は親タグの高さ。
画像と画像タイトル(設定なし)
画像と画像タイトル
親要素(div.divgazou2)にdisplay:flex; flex-direction:colum;で要素縦並び。
タイトル(p)にwidth:fit-content;を指定し、親要素と同じ幅にする。
margin-right,leftをautoにすることで中央に寄せる。
画像と画像タイトルを並べる
上の「画像とタイトル」のdivをさらにdivで囲み、display:flex;を設定。
画像と画像タイトルをグリッド形式で並べる
.gazougrid2{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 200px 100px;*/
grid-row-gap: 10px;
margin-bottom: 20px;
}
.gazougrid2>div{
width: 100%;
display:flex;
flex-direction: column;
}
/*.gazougrid2{
display: flex;
}*/
/*.divgazou4{
width: 50%;
display: flex;
flex-direction: column;
}*/
.divgazou4 img{
width: 98%;
margin-right: auto;
margin-left: auto
;
}
.divgazou4 p5 {
width: fit-content;
margin-right: auto;
margin-left: auto;
}