はじめに
まずは以下のようなサンプルコードを書いてみます。
<divclass="container"><divclass="sample">sample1</div><divclass="sample">sample2</div><divclass="sample">sample3</div><divclass="sample">sample4</div><divclass="sample">sample5</div><divclass="sample">sample6</div></div>.sample{background:skyblue;margin:10px;padding:10px;}結果。
ここから、要素の配置を色々と変えていきます。
このとき、CSSでfloat: left;みたいなことをするよりも、フレックスボックスやグリッドを使った方が、簡単に自由なレイアウトができるみたいです。
フレックスボックス
CSSに以下のコードを追加します。
.container{display:flex;}結果。
横並びになりました。
さらにいろいろいじっていきます。
並び順を逆にする(横)
.container{display:flex;flex-direction:row-reverse;}
並び順を逆にする(縦)
.container{display:flex;flex-direction:column-reverse;}
折り返す
.container{display:flex;flex-wrap:wrap;}
中央揃え(水平)
.container{display:flex;justify-content:center;}
右揃え(水平)
.container{display:flex;justify-content:flex-end;}
両端均等揃え
.container{display:flex;justify-content:space-between;}
均等揃え
.container{display:flex;justify-content:space-around;}
高さを広げる
.container{display:flex;align-items:stretch;height:20vh;}
上に揃える
.container{display:flex;align-items:flex-start;height:20vh;}
下に揃える
.container{display:flex;align-items:flex-end;height:20vh;}
中央揃え(垂直)
.container{display:flex;align-items:center;height:20vh;}
グリッド
CSSを以下のようにします。
.container{display:grid;}
特に変わりません。色々といじっていきます。
子要素の横幅と余白
.container{display:grid;grid-template-columns:200px200px200px;gap:20px;}
子要素の横幅の比率
.container{display:grid;grid-template-columns:1fr2fr3fr;gap:10px;}
おまけ
おすすめの本です。どちらかというとCSSに重点が置かれている感じがします。デザインについての説明が豊富なのが特徴です。
1冊ですべて身につくHTML-CSSとWebデザイン入門講座