先生と生徒の会話形式で理解しよう

生徒

「先生、CSSでボックスの大きさを中身に合わせて自動で変えたいときはどうすればいいですか？」

先生

「その場合は、widthやheightにautoやfit-contentを使うと便利です。」

生徒

「autoとfit-contentはどう違うんですか？」

先生

「順番に説明します。まずautoは要素の内容に合わせて自動でサイズを決めます。fit-contentは内容のサイズに合わせつつ、最大値や最小値を設定することもできます。」

1. autoで要素のサイズを自動調整する

CSSでwidth: autoやheight: autoを指定すると、要素の中身の量に応じて幅や高さが自動的に調整されます。例えば、テキストの量が増えるとボックスも縦に広がるため、内容がはみ出さずに表示できます。


<style>
    .box-auto {
        width: 200px;
        height: auto;
        background-color: lightblue;
        padding: 10px;
    }
</style>
<div class="box-auto">
    テキストが長くなると高さが自動で調整されます。
</div>

ブラウザ表示

2. fit-contentで内容に合わせつつ最大値を設定

fit-contentは内容のサイズに合わせて要素の幅や高さを決めますが、最大幅や最小幅を指定することもできます。例えば、長いテキストでもボックスがあまりに大きくならないように制御できます。


<style>
    .box-fit {
        width: fit-content(150px);
        padding: 10px;
        background-color: lightgreen;
    }
</style>
<div class="box-fit">
    このボックスはテキストの幅に合わせて調整されますが、最大幅は150pxです。
</div>

ブラウザ表示