メニューやボタンの横並べの時、要素の幅や余白の取り方で迷っていたのを揃える
- 均等幅ならaタグにwidth:xx%;
- 均等幅でなく、均等余白ならaタグに幅はデフォルトのままでpaddingをつける
- 固定幅ボタンなら幅指定（テキストはflexかgridで上下左右中央寄せ）
メニューのように横並びのaタグとliのどちらに文字スタイルを当てるか
- 基本的にaタグに当てる
- liには横並びや、配置のスタイルを当てる
余白のルール〜余白の取り方で迷ってしまうのを防ぐ〜
- sectionタグには上下の余白をpaddingで設定（タイトルなどの子要素側でmargin-topと設定してしまうと不明な余白ができてしまう）
- ボタンやタイトルのmarginでは余白取らないように（4と同等）
- 要素間の要白は要素のmargin-topで取るように揃える
- （書籍「HTML+CSS コーディングの強化書」のmargin-topかmargin-bottomか）
- Block要素自身に直接marginをつけない（Modifireを増やしてつけること）
ブログ一覧などでみられるカードの横並べのやり方
- 4カラムまでならflexでもgridでも両方あり
- 5カラム以上ならgridで。repeat(数, 1fr)を使うと良い。auto-fillは余白が右に発生、auto-fitはカードが想定以上に幅広になってしまう場合があるため注意。
- カードの中の画像はdivなどで囲ってwidth:100%;を指定しておくこと。カードの可変幅に対応するため。画像剥き出しだと変な比率で拡大されてしまうので注意すること。
※随時追加する
参考にした書籍
コメント