cssを使ってhtml要素をレイアウトする方法についてまとめています。
サマリ
- letter-spacingを使うと文字間を調整できる
- display: inline-blockはblock要素を横並びにする
- flexは縦・横並びだけでなく幅や要素の比率を指定することができる
/** * 横方向のレイアウト */ /* インライン要素に対して */ .parent { text-align: right; letter-spacing: -6px; } .child { display: inline-block; } /* ブロック要素を中央揃え */ .parent { } .child { margin: 0 auto; } /** * 上下方向のレイアウト */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { display: flex; flex-direction: row-reverse; justify-content: center; }