目次
はじめに：横幅がバラバラで困っていませんか？
CSSでレイアウトを組んでいると、
- カードの横幅が揃わない
- テキスト量で幅が変わってしまう
- スマホとPCで見た目が崩れる
といった悩みによく直面します。
「横幅を揃えたい」という悩みは、
CSS初心者が必ず一度はぶつかる壁です。
この記事では、
HTML/CSS初心者の方でも理解できるように
横幅を揃える代表的な方法と使い分けを
基礎から順番に解説します。
横幅が揃わない原因とは？
まず原因を整理しましょう。
- 要素ごとに中身の量が違う
- displayの種類が異なる
- 親要素の幅が不定
- flexやgridの挙動を理解していない
横幅を揃えるには、
どの基準で揃えたいのかを明確にすることが重要です。
方法①：widthを指定して横幅を揃える
最もシンプルな方法です。
.box {
width: 300px;
}特徴
- 確実に横幅が揃う
- レイアウトが安定する
注意点
- 画面サイズが変わると崩れやすい
- レスポンシブ対応が必要
max-widthで柔軟に揃える
固定幅が不安な場合は、
max-widthを使います。
.box {
max-width: 300px;
width: 100%;
}これにより、
最大幅を揃えつつ、画面幅に追従できます。
方法②：flexboxで横幅を揃える
横並びレイアウトでは、
flexboxが非常に便利です。
.list {
display: flex;
gap: 16px;
}
.item {
flex: 1;
}ポイント
- flex: 1 で均等割り
- 中身の量に関係なく揃う
カード型レイアウトでは
最もよく使われる方法です。
横幅を自動で均等にしたい場合
要素数に応じて
自動で幅を揃えたいときはこちら。
.item {
flex: 1 1 0;
}これで、
すべて同じ横幅になります。
方法③：CSS Gridで横幅を揃える
より柔軟に制御したい場合は、
CSS Gridがおすすめです。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}特徴
- 列幅が完全に揃う
- 行・列を同時に管理できる
カード一覧や
商品一覧ページと相性抜群です。
中身の最大幅に合わせて揃えたい場合
テキスト量に左右されず、
一番大きい要素に合わせたい場合もあります。
NG例
display: inline-block;これでは
中身依存で幅が変わります。
解決策
- width指定
- flex / grid の使用
中身基準ではなくレイアウト基準で揃えるのがポイントです。
ボタンの横幅を揃えたい場合
ボタンは特に崩れやすい要素です。
.btn {
min-width: 200px;
text-align: center;
}効果
- 文字数が違っても幅が揃う
- 見た目が安定する
スマホ対応で横幅を揃える方法
レスポンシブでは、
画面幅ごとに調整が必要です。
@media (max-width: 768px) {
.item {
width: 100%;
}
}PCでは横並び、
スマホでは縦並び
という設計が一般的です。
横幅が揃わないときのチェックリスト
うまくいかない場合は、
次を確認してください。
- 親要素にdisplay指定があるか
- flex / grid を正しく使っているか
- width / max-width が競合していないか
- paddingやborderでサイズが変わっていないか
* {
box-sizing: border-box;
}box-sizing指定も
レイアウト安定に効果的です。
よくある勘違い
初心者が誤解しやすいポイントです。
- 高さと横幅は同じ考え方
- inline要素でも幅が揃う
- テキスト量を揃えれば解決
横幅は
CSSの指定で制御するものです。
まとめ：横幅を揃える方法は目的で選ぶ
CSSで横幅を揃える方法は、
- 固定したい → width / max-width
- 均等に並べたい → flexbox
- レイアウト管理したい → grid
というように
目的で使い分けることが重要です。
HTML/CSS初心者の方は、
まず flexboxとgridで揃える方法を
しっかり身につけておきましょう。
それだけで、
レイアウトの完成度は一気に向上します。