- 全体に line-height: 1; を指定して、無駄スペース削除
- 全体の高さを指定(100px)
- align-items: center; で天地中央揃え
- ロゴブロックのフォントサイズを0
- 背景、画像、リンクブロックと全ての要素が異なるため、高さ指定はしない方が楽
- 「MENU」には padding を指定し、背景を確保した上でテキストを天地左右中央へ配置
- align-items: center; で天地中央揃え
- ロゴブロックのフォントサイズを0
- 当サイトはダミーです。
文字の大きさ、字間、行間
- 全体の高さを指定(100px)
- ブロックごとに align-items: center; を指定して、天地中央揃え
- ロゴ横のテキストは align-self: flex-end; を指定し、ロゴとボトムを揃えている
- ロゴブロックのフォントサイズを0
- 当サイトはダミーです。
文字の大きさ、字間、行間
- 全体の高さを指定(150px)
- 各要素にフレキシブルレイアウトを適用できるよう、細かくブロック分けする
- 右側ブロックは上下をリストタグで分け、justify-content: flex-end; を指定
- ロゴブロックのフォントサイズを0